jQuery - 時代嘅眼淚


有返咁上下資歷嘅人都應該會知道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>

以當時瀏覽器對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!');
            }
        }
    });
});

但係喺網頁開發嘅世界,程式開發永遠都係一步緊跟住一步咁去。Javascript開始慢慢完善返以前所帶落黎嘅問題:逐步標準化嘅functions或者methods、效能加強、安全問題等。如果你去做下一啲JS嘅benchmark,你會發現Vanilla JS一啲都唔輸蝕。

document.querySelector('.class') vs $('.class')。

另外就係jQuery嘅本質問題。因為佢本身係DOM-driven嘅Javascript framework,如果你嘅DOM結構喺往後嘅更新唔同咗,你就有可能令到成段程式死咗。呢樣嘢發生喺我早幾日幫公司做嘅嘢度:因為見到個class name有typo,我就想幫佢改返個名以方便理解佢係乜黎,結果反而搞到JS嗰邊唔識郁......因為佢哋搵唔到個element。

既然處理DOM咁麻煩,咁不如唔好搞佢?於是data-driven嘅概念就開始出現。

W3CSchool教學例子 - AngularJS。

自己新寫嘅to-do list已經完全唔用jQuery,而係轉用Vue了。

比起操控複雜嘅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再無任何令人眼前一亮嘅改變的話,會被歿入歷史洪流之中,大概都只係時間問題吧?

Powered by Half-moon Production.

Copyright © 2011-2020 by 泣雨家的雜物房. Version 1.5.2.

jQuery - 時代嘅眼淚


有返咁上下資歷嘅人都應該會知道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>

以當時瀏覽器對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!');
            }
        }
    });
});

但係喺網頁開發嘅世界,程式開發永遠都係一步緊跟住一步咁去。Javascript開始慢慢完善返以前所帶落黎嘅問題:逐步標準化嘅functions或者methods、效能加強、安全問題等。如果你去做下一啲JS嘅benchmark,你會發現Vanilla JS一啲都唔輸蝕。

document.querySelector('.class') vs $('.class')。

另外就係jQuery嘅本質問題。因為佢本身係DOM-driven嘅Javascript framework,如果你嘅DOM結構喺往後嘅更新唔同咗,你就有可能令到成段程式死咗。呢樣嘢發生喺我早幾日幫公司做嘅嘢度:因為見到個class name有typo,我就想幫佢改返個名以方便理解佢係乜黎,結果反而搞到JS嗰邊唔識郁......因為佢哋搵唔到個element。

既然處理DOM咁麻煩,咁不如唔好搞佢?於是data-driven嘅概念就開始出現。

W3CSchool教學例子 - AngularJS。

自己新寫嘅to-do list已經完全唔用jQuery,而係轉用Vue了。

比起操控複雜嘅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再無任何令人眼前一亮嘅改變的話,會被歿入歷史洪流之中,大概都只係時間問題吧?