如何使用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

---

Author Summary

Subject : 如何使用jQuery版本
Author : Unknown - Dream Talker Updated at: 1:59 PM
Votes : 100% - 5.0 - based on 2015
如何在Blogger使用jQuery版本

Unknown

5 Stars - Reviews