如何使用jQuery版本
如果您會在部落格或網站裡使用 jQuery 特效讓網頁更活潑便利; 如果您不是請專精網頁知識人員為您編排內容; 又假如您和我一樣喜歡在 Blogger 自行動手整修, 那麼以下的入門概念或許有需要.緣由是有位網友想裝上某個 jQuery 特效插件, 但擔心過多的 javascript 檔案會拖慢網速, 所以只能忍痛捨棄. 我參觀他的部落格發現一件有趣的事實. 當他使用某個效果或功能時, 會按照程式來源的教學將 jQuery 函式庫也附加上去; 不同的插件可能當時使用的 jQuery 版本不同, 於是日積月累下來, 網站裡會佈滿各個版本的程式庫, 活像個 jQuery 版本的歷史博物館,網頁開啟變慢也不是異數了... var types=[BootstrapDialog.TYPE_INFO];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Suggestion',message:'打開 Blogger CSS, "Ctrl + F" 搜尋 "jQuery" 字樣, 即可列出已使用的 jQuery 版本',buttons:[{id:'btn-ok',label:' OK',cssClass:'btn-primary',autospin:false,action:function(dialogRef){dialogRef.close()}}]})});
一般而言, 提供插件的來源作者通常會提醒:如已使用 jQuery 函式庫則不必重複程式碼. 這裡指的是類似這樣的一列語法:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>不同的特效或功能只要是它們依據的版本不是差異過大, 通常可以相容, 藉由測試可知那一版本可共用, 您只需要留下一個版本即可. 但是對於我們這樣不熟悉 jQuery 家族的使用者而言, 如何分辨哪個 js 是 jQuery 系列的函式庫呢?
目前 jQuery 有兩系版本: 1.x 版本和 2.x 版本. 您可以查閱哪些版本是流通的. jQuery code 而這些編號是具有網路規範下的程式庫提供者所共通的; 並不能自行命名. 例如有一篇介紹 lightbox 的秀圖效果, 裡面有個 "jquery-1.10.2.min.js" , 當您看到這個編號是屬於程式庫的命名編號時; 它不會是作者另外寫出來的不同版本或是其他作用的程式碼, 藉由其他相容版本也照樣可以執行燈箱效果; 例如您的網站使用 jquery-1.7.1 的版本, 無須再上傳 jquery-1.10.2 的檔案. 當然其他執行用的 js 要上傳.
不同版本可能無法執行程式, 同時使用不同版本的方法不在此篇討論範圍. 我們該使用那一個版本較恰當? 1.x 版本可支援 IE6~8 的舊式瀏覽器, 2.x 版本支援新式瀏覽器且體積較小. 不過 1.x 版本要有 jQuery Migrate plugin 的支援才相容于舊IE.
在您決定使用哪一個版本時應該考慮載入速度. 所幸 jQuery 可藉由 CDN 的互聯方式提昇效能, 而目前最佳的公用版本來自 Google Libraries API , 也就是網址: http://ajax.googleapis.com/ajax/libs/jquery/版本編號/jquery.min.js 這個函式庫網址會比你自行上傳或其他公用程式網址快速, 而 Google 強大的數據支援使得 jQuery 載入更流暢. 目前的 CDN 佔比可參考 CDN Usage Statistics.
雖然最新版本精簡卻不一定是最佳選擇, 目前 2.x 版本僅佔 jQuery 使用者的 0.5%; 另外 99.5% 是使用 1.x 版本. 除去了同樣是最新的 1.10.2 版本(相當於 2.0.3 版本)約佔 17.5%, 所以 82% 的使用者並非使用最新版本. 根據 Alexa 的登錄統計, 22.5% 的 jQuery 使用者在他們的網站上使用 1.7 版本(包括 Microsoft.com ), 也就是說 1.7.x 的版本可能是載入最快的版本. 不過也有相當大比例的使用者採用 latest version (自動最新版本)的方式, 如: code.jquery.com/jquery-latest.min.js 相當於 1.10.2 版本, 而 1.7 版本包含 1.7.0、1.7.1、1.7.2 分散比例. 預估下來也可能是最新的 1.10.2 較優勢, 所以選擇 1.x 系列的最新版本應該是最佳選擇, jquery.com 也是推薦這個 CDN 版本.(最佳版本請依照 CDN 佔比分析修改當時版本編號)
結論是, 網站裡選擇一個可相容的較新版本, 固執的舊 jQuery 功能改用新的程式碼取代, 同時使用不同的 jQuery 函式庫去對應程式只會讓往後更難整理.
參考資料:
jQuery程式庫
Wiki CDN
Usage of JavaScript libraries for websites
CDN Usage Statistics