如何使用jQuery版本

7   Comments

如果您會在部落格或網站裡使用 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
如何使用jQuery版本
Subject : 如何使用jQuery版本
Author : - Dream Talker Updated at: 1:59 PM
Votes : 100% - 5.0 - based on 2015
如何在Blogger使用jQuery版本
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. @Mark X 我以為1.10.2是比較老的版本,現在使用1.9.1,請問哪個比較快?

    昨天用Google+帳號留言會不見。

    ReplyDelete
    Replies
    1. 哈哈! 抱歉! 我有收到您的訊息; 但G+留言板無法顯示出來, 我已經修改. 真是不好意思.

      Delete
  2. To Neil,
    是喔! 大概最近Youtube整合帳戶, 因此受到影響吧? 沒空去找原因, 等它自己修好.

    1.9.1版之後的2.0版開始分歧成兩系; 因為有大部分的開發者認為無須浪費資源去維護舊版本的瀏覽器所需要的jQuery, 因此精簡體積成為2.0以後的版本, 如現在最新的2.0.3.
    包容所有使用者需要的, 則成為1.10版. 看您的需求啦! 經由Google Analytics分析, 您的網站訪問者極少使用舊瀏覽器; 那麼改成2.0以後的版本, 不過兩者載入時間沒差多少, 我採用1.10以後的CDN版本.

    ReplyDelete
  3. 我檢查自己的範本居然有兩個相同的link! XD

    ReplyDelete
    Replies
    1. 相同的版本載入時沒影響.

      Delete
  4. ㄚ!我也中招了! 以前用的JQUERY作者都沒提過這個問題

    ReplyDelete
    Replies
    1. 移除不用的jQuery版本時, 請隨時對照各種動作效果是否受影響.

      Delete