We’re finally finished removing jQuery from https://t.co/r2QL2aHBfa frontend. What did we replace it with? No framework whatsoever:
— Mislav Marohnić (@mislav) 2018年7月25日
• querySelectorAll,
• fetch for ajax,
• delegated-events for event handling,
• polyfills for standard DOM stuff,
• CustomElements on the rise.
有返咁上下資歷嘅人都應該會知道jQuery呢套Javascript framework。想當年,JS入門級嘅你掌握咗jQuery就幾乎等於掌握咗front end嘅世界;即使有返一定JS資歷嘅人都因為jQuery帶黎嘅方便而樂於使用佢。而今日,隨住GitHub已經棄用jQuery,雖然未去到話步入歷史,但係影響力應該逐漸衰退。
曾經你要用操控DOM嘅形式去控制你嘅網頁元素。
<div id="app"></div>
<script>
$(document).ready(function() {
$('#app').html('<p>This is an inline text in the #app element.</p>');
});
</script>
<script>
$(document).ready(function() {
$('#app').html('<p>This is an inline text in the #app element.</p>');
});
</script>
以當時瀏覽器對Javascript以至ECMAScript仲未有一個好統一嘅標準黎講,jQuery嘅API能夠做到跨平台支援已經方便咗唔少開發者。另外,好多需要用CSS或者Vanilla Javascript寫一大堆嘢去行嘅動態畫面都可以透過簡單嘅API去達成。jQuery UI就有一個叫animate()嘅API去做到唔錯嘅動畫效果。
不過講咁多,當初最吸引我去用jQuery嘅原因就係佢嗰個簡單嘅Ajax API。我只要諗我要傳啲乜嘢去server side,點樣去處理回傳返黎嘅資料就已經搞掂好多嘢。喺崇尚load less嘅網頁世界黎講,jQuery對於我黎講簡直係上咗神枱。
$(document).ready(function() {
$.ajax({
dataType: 'json',
data: {
userId: 1,
name: 'John Doe'
},
url: 'example.com/user',
method: 'patch',
success: function() {
// Your code...
},
statusCode: {
404: function() {
alert('Endpoint not found!');
}
}
});
});
$.ajax({
dataType: 'json',
data: {
userId: 1,
name: 'John Doe'
},
url: 'example.com/user',
method: 'patch',
success: function() {
// Your code...
},
statusCode: {
404: function() {
alert('Endpoint not found!');
}
}
});
});
但係喺網頁開發嘅世界,程式開發永遠都係一步緊跟住一步咁去。Javascript開始慢慢完善返以前所帶落黎嘅問題:逐步標準化嘅functions或者methods、效能加強、安全問題等。如果你去做下一啲JS嘅benchmark,你會發現Vanilla JS一啲都唔輸蝕。
另外就係jQuery嘅本質問題。因為佢本身係DOM-driven嘅Javascript framework,如果你嘅DOM結構喺往後嘅更新唔同咗,你就有可能令到成段程式死咗。呢樣嘢發生喺我早幾日幫公司做嘅嘢度:因為見到個class name有typo,我就想幫佢改返個名以方便理解佢係乜黎,結果反而搞到JS嗰邊唔識郁......因為佢哋搵唔到個element。
既然處理DOM咁麻煩,咁不如唔好搞佢?於是data-driven嘅概念就開始出現。
比起操控複雜嘅DOM,你只需要諗資料點樣處理就好,而其他嘢就交返俾JS framework / library本身去搞。咁樣嘅話就唔駛再驚因為改咗HTML上嘅一啲嘢而搞到成段程式碼死咗──尤其JS嘅debug一如既往咁難嘅時候。
至於曾經令jQuery引以為傲嘅Ajax library呢?我哋而家有Axios。甚至Vue本身都有自己嘅Ajax library Vue-resource嘅時候,點解仲要用一個已經逐漸被技術淘汰嘅舊式JS framework?
咁係咪代表jQuery會好快死?咁又未必。雖然GitHub已經放棄jQuery,而GitLab亦都轉咗用Vue,但係仲有唔少出名嘅framework或者網站都係仲用緊佢,而且短期內都唔會改變。好似Bootstrap 4咁,即使有另外開發一套叫Bootstrap-Vue嘅套件,但係佢本身framework個底都仲係靠jQuery運作,例如toggle modal等動作。不過,如果jQuery再無任何令人眼前一亮嘅改變的話,會被歿入歷史洪流之中,大概都只係時間問題吧?