2015年10月16日

引用 jQuery 連結及版本的注意事項

A+
許多 Blogger 工具都會用到 jQuery 這個 javascript 框架,需要引用一個外部 js 檔連結。對於不熟悉程式碼的使用者,極有可能從網路上 google 找來許多工具、外掛,並在自己網站引用了多次 jQuery 連結,結果導致網頁載入時,重複讀取了多次 jQuery、或使用了多個不同版本的 jQuery,不但拖慢網頁速度,而且不同版本之間也可能會打架。

WFU 寫的不少工具都會用到 jQuery,過去在撰寫使用說明時,都是直接引用這篇「如何使用jQuery版本」。不過因為最近「BLOGGER 支援 HTTPS」,以及考量到「部落格網站如何不被大陸封鎖?」,決定重新整理一下引用 jQuery 時,所有需要注意的細節,也請安裝過 WFU BLOG 工具的讀者,瞭解一下這個主題。



一、jQuery 版本


首先我們需要瞭解,所引用的 jQuery 連結,長得是什麼樣子,才知道怎麼修改。

1. 官網檔案

如果想將 jQuery 放在自己的網頁空間,可以到「官網」下載。以最新的版本為例,官網提供的檔案外連如下:

http://code.jquery.com/jquery-2.1.4.min.js

來認識一下檔名格式 "jquery-2.1.4.min.js":
  • 包含 "jquery" 字串
  • 版本為 "2.1.4"
  • "min" 代表壓縮檔
  • 附檔名為 "js"

瞭解大略的格式後,將來在範本要尋找 jQuery 比較方便。


2. 選擇使用版本

究竟要使用哪一個版本,大致有幾個考量方向:
  • 檔案尺寸:2.0 以後的版本,大幅縮減了檔案體積,減少網路傳輸時間。沒有特別考量的話,請選擇 2.0 以後、壓縮過的版本。可參考這個網頁「jQuery file size」,有各版本檔案大小的一覽表。
  • 是否要支援 IE:如果網站想要照顧 IE8 以下的使用者,那麼只好選擇 1.8.3 之前的版本。
  • 使用的外掛支援性:有的 jQuery 外掛,有可能使用較舊的語法來撰寫,導致無法使用較新的 jQuery 版本。舉例來說,如果網站使用了「圖片輪播外掛﹍camera」這個外掛,就必須使用 1.8.3 以前的版本。



二、如何找出多餘的 jQuery


對 jQuery 有了初步認識後,可以來找出網站所有多餘的 jQuery 外部連結。以 Blogger 為例,除了要搜尋範本的內容,還需要檢查所有的側邊欄或小工具。

1. Blogger 小工具

Blogger 後台 → 版面配置 → 一一編輯各個小工具內容。具體的作法可以搜尋 "jquery" 字串,找看看有沒有 "jquery???.js" 這樣的外部 js 連結,有找到的話大概類似這樣一行:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
整行刪除即可。


2. Blogger 範本

Blogger 後台 →「範本」→「編輯 HTML」,一樣搜尋有沒有外部的 js 連結。找到多個的話,請刪到剩下一個,並將唯一的一個 jquery 外部連結,放到範本中 </head> 之前(或前一行)的位置。

在修改範本之前,建議先閱讀「備份範本的訣竅」系列文章。



三、相容於 HTTPS 模式


如果你的網站「啟用了 HTTPS 模式」,那麼範本中的所有外部連結,都必須逐一檢查,並改為 "https://" 開頭的連結,才不會被判訂為「混合內容」。

不過最簡單、安全的作法,是將所有的網址,全部使用 "//" 開頭的字串即可,去掉 "http:" 或 "https:" 字串,例如原本 jQuery 官網提供的 js 連結,可改為以下:

<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
這樣的做法有不少好處,除了可以相容於 HTTPS 模式,也可以避免「在 Google Drive 建立 HTML 網頁, 需要注意這三件事」→「一、某些檔案類型無法外連?」→「1. HTML 檔內的 js 外連」這樣的情形。



四、CDN 及大陸市場


雖然 jQuery 檔案可以放在自己的網頁空間,但速度絕對比不上放在「CDN」的檔案。值得慶幸的是,有不少免費的 CDN 提供了 jQuery 檔案讓我們引用,例如 Google、jQuery 官網,所以不想拖慢網頁速度的話,請使用 CDN 的外連檔案。而如何選擇合適的 CDN,請看以下的分析。

1. Google CDN

這個 Google 的官方網頁,提供了各種 js 框架的 CDN 外連網址:

可找到 jQuery 的外連網址格式為:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
將紅色字串改為自訂的版本號即可。

基本上 Google 的 CDN 分布最廣,這也代表全球訪客的平均讀取速度會是最快,如果沒有別的考量,使用 Google CDN 就對了。


2. jQuery CDN

jQuery 官方也提供了 CDN:

例如目前最新的版本外連為:

<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
請依自己需求改為其他版本的連結。


3. 大陸市場

Google CDN 雖然是最佳選擇,但使用「不被大陸封鎖的免費空間測試心得」→「一、檢測工具」測試之後,發現 Google CDN 的檔案連結會被大陸封鎖

如果讀者想根據「部落格網站如何不被大陸封鎖?」,來讓 Blogger 能被大陸讀者拜訪的話,那麼只好捨棄 Google CDN,改用 jQuery 官方的 CDN 檔案連結。



五、彙整


本篇所有的章節都還滿重要的,如果還是不清楚如何進行,這裡再匯整複習一下:
  • 先根據「一、jQuery 版本」,瞭解外連 js 檔的格式,並決定自己需要的 jQuery 版本。
  • 接著把網頁所有重複引用的 jQuery 外連 js 檔都刪除,只留下一個。
  • 把 js 檔連結,改為 "//" 開頭的字串即可。
  • 根據「四、CDN 及大陸市場」,決定使用 Google CDN 或是 jQuery CDN 的外連。
  • 最後將這行外連 js 檔字串,放在 Blogger 範本中 </head> 之前(或前一行)的位置。


更多 jQuery 相關工具:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。