[探索 5 分鐘] jQuery 發展歷史

第一版 jQuery 在 2006 年發布, 支持跨瀏覽器。有人會以為 jQuery 是一個 Framework, 但其實他歸類為 JavaScript Library。wiki 也是這麼解釋:

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

寫在前頭, 由於 JavaScript 是很靈活的直譯式語言, 只要在 <head> <script> 參考一隻 js 就完成 jQuery 載入, 但是 1.6 版前後, 有 .attr() 與 .prop() 的差異; 以及 2.0 版以後不再相容 IE 6, 7, 8。有些開發者在維護舊系統時為了避免新舊版本衝突, 在獨立開發頁面載入較新版本, 久了造成單一站台共存 jQuery 版本, 這是非常不具維護性的做法。為了與時俱進, 建議逐漸換為新版, 並配置唯一版本的 jQuery 到 master or layout 頁統一管理。企業內若對 IE 愛不釋手, 就避免追到 1.9 版以後。因為這樣寫其實滿醜的。

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

jQuery History

縱看 jQuery 的版號跟出版日期, 非常活躍, 發展已經超過 10 年 (2006 ~ 2017截稿), 每年都有一次以上的版本更新, 而且還能保持精簡, Production 檔案大小約在 100 KB 內。

ver	release date	note
1	2006-08-26	First stable release
1.1	2007-01-14
1.2	2007-09-10
1.3	2009-01-14	Sizzle Selector Engine introduced into core
1.4	2010-01-14
1.5	2011-01-31	Deferred callback management, ajax module rewrite
1.6	2011-05-03	Significant performance improvements to the attr() and val() functions
1.7	2011-11-03	New Event APIs: .on() and .off(), while the old APIs are still supported.
1.8	2012-08-09	Sizzle Selector Engine rewritten, improved animations and $(html, props) flexibility.
1.9	2013-01-15	Removal of deprecated interfaces and code cleanup
1.1	2013-05-24	Incorporated bug fixes and differences reported from both the 1.9 and 2.0 beta cycles
1.11	2014-01-24
1.12	2016-01-08
2	2013-04-18	Dropped IE 6–8 support for performance improvements and reduction in filesize
2.1	2014-01-24
2.2	2016-01-08
3	2016-06-09	Promises/A+ support for Deferreds, $.ajax and $.when, .data() HTML5-compatible
3.1	2016-07-07	jQuery.readyException added, ready handler errors are now not silenced
3.2	2017-03-16

jQuery 程式起手式

Dependency

ex:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

請務必小心, 雖然雲端或是 cdn 的 js 版本可以分攤站台流量, 但在中國大陸常常會被阻擋, 建議重要頁面, 站台要直接 response 一份離線版本, 並啟用 js 快取, 免得無法進行交易就糗大。

$ Function

$ 是一個 jQuery 的函式名稱, 這個符號已經約定俗成是給 jQuery 使用, 請避免程式又創建自己的 $ 函數或變數, global.js 中可以看到 $ 符號與 jQuery 物件是等義的, 都 assign 給全域的 window

window.jQuery = window.$ = jQuery;

Entry Point

程式進入點萬萬不可直接在 <script> 程式區域直接使用 $ 操作, 而必須等 jQuery 以及 DOM 載入完成 (DOMContentLoaded), 進入點必須技巧性地置於以下三種其中之一

$(function () {
    // your jQuery code
});

// or
$(fn); // your init function call

// or
$(document).ready(function(){
   // your jQuery code
});

個人偏好第三種, 雖然代碼長度最長, 但卻表達這裡是 jQuery ready 的進入點

DOM Selector

selector 是聰明好用的 DOM 選擇器, 可單選或多選來批量操作元素, 如 $('#id'), $('.css')。但有時候後端開發太久突然回到前端, 還是會忘記冒號, #號, 大於, 中括胡, 空白, 以及組合技究竟可以框選到哪些 element(s)。w3schools 提供一個絕佳的測試介面, 只要可以回答全數問題, 基本上算是訓練有素的工程師了 (疑?)

jQuery selector 底層使用的是 Sizzle, a pure JavaScript CSS selector engine。有興趣的同學可到 github 看看。

離題與 jQuery 無關

今天發現有個 Node.js 開源專案叫做 cheerio, 特別給 server side 使用, jQuery 有部分核心就是這個專案實作的

Cheerio implements a subset of core jQuery. Cheerio removes all the DOM inconsistencies and browser cruft from the jQuery library, revealing its truly gorgeous API.

看 cheerio 官網的範例, 是與 Sizzle CSS selector 一樣的味道在 HTML 中做 DOM 控制


const cheerio = require('cheerio')
const $ = cheerio.load('<h2 class="title">Hello world</h2>')

$('h2.title').text('Hello there!')
$('h2').addClass('welcome')

$.html()
//=> <h2 class="title welcome">Hello there!</h2>

然後在 cheerio 代碼裡面又看到一隻 parse.js, 相依於開源專案 htmlparser2, 所以整個 DOM 其實是透過這個輕量級的底層來解析的, 性能評比 (參考用) 如下


gumbo-parser   : 34.9208 ms/file ± 21.4238
html-parser    : 24.8224 ms/file ± 15.8703
html5          : 419.597 ms/file ± 264.265
htmlparser     : 60.0722 ms/file ± 384.844
htmlparser2-dom: 12.0749 ms/file ± 6.49474
htmlparser2    : 7.49130 ms/file ± 5.74368
hubbub         : 30.4980 ms/file ± 16.4682
libxmljs       : 14.1338 ms/file ± 18.6541
parse5         : 22.0439 ms/file ± 15.3743
sax            : 49.6513 ms/file ± 26.6032

The command "npm test" exited with 0.
Done. Your build exited with 0.

性能相對優於其他 parser, 筆記筆記。

參考資料

https://en.wikipedia.org/wiki/JQuery
https://www.w3schools.com/jquery/trysel.asp
https://github.com/cheeriojs/cheerio
https://github.com/fb55/htmlparser2
https://github.com/jquery/sizzle
https://api.jquery.com/category/selectors/
https://cheerio.js.org/
http://www.phperz.com/article/17/0425/278917.html

NW Pie - 老吳的技術探索 Blog

Search This Blog