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

Image may be NSFW.
Clik here to view.許多 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 外連網址：

• https://developers.google.com/speed/libraries/

可找到 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：

• https://code.jquery.com/jquery/

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

<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>之前(或前一行)的位置。

Image may be NSFW.
Clik here to view.