這個章節是在Google Developers 平台中有一個叫做Make the Web Faster的章節,Google主機託管的函式庫(Google Hosted Libraries)就是最流行的JavaScript開放原始碼函式庫的內容傳遞網路(Content distribution network),這些主機託管的函式庫包括(持續增加中):
- AngularJS
- Angular Material
- Dojo
- Ext Core
- jQuery
- jQuery Mobile
- jQuery UI
- MooTools
- Prototype
- script.aculo.us
- SPF
- SWFObject
- three.js
- Web Font Loader
Google會直接跟函式庫關鍵的負責人合作,只要函式庫有新的版本釋出就會接受最新的穩定版本。
我要如何開始?
看看接下來的開發者指南來取得主機託管的函式庫,然後在你的網站或應用程式上執行。
開發者指南
Google主機託管的函式庫是最流行的JavaScript開放原始碼函式庫穩定、可靠且高速的全球化內容傳遞網路,要增加一個函式庫到你的網站上只要使用<script>標籤來含括函式庫,下面會再解釋:
函式庫
要載入主機託管的函式庫,複製貼上下面的HTML語法在你的網頁中,舉例,要載入jQuery,內嵌這一行: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
到你的網頁中。
ㄚ琪建議你即使你自己的網站只使用HTTP,也要透過HTTPS的CDN載入函式庫較妥,現在,這兩者的效率跟暫存的運作是一樣的,CDN檔案使用CORS跟Timing-Allow表頭並允許暫存一年。
下面的部份列出所有主機託管的函式庫,ㄚ琪列出名稱跟所有支援的版本。
- AngularJS
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> - 網站:
angularjs.org - 穩定版本:
1.3.14, 1.3.13, 1.3.12, 1.3.11, 1.3.10, 1.3.9, 1.3.8, 1.3.7, 1.3.6, 1.3.5, 1.3.4, 1.3.3, 1.3.2, 1.3.1, 1.3.0, 1.2.27, 1.2.26, 1.2.25, 1.2.24, 1.2.23, 1.2.22, 1.2.21, 1.2.20, 1.2.19, 1.2.18, 1.2.17, 1.2.16, 1.2.15, 1.2.14, 1.2.13, 1.2.12, 1.2.11, 1.2.10, 1.2.9, 1.2.8, 1.2.7, 1.2.6, 1.2.5, 1.2.4, 1.2.3, 1.2.2, 1.2.1, 1.2.0, 1.0.8, 1.0.7, 1.0.6, 1.0.5, 1.0.4, 1.0.3, 1.0.2, 1.0.1 - 不穩定版本:
1.4.0-beta.5, 1.4.0-beta.4, 1.4.0-beta.3, 1.4.0-beta.2, 1.4.0-beta.1, 1.4.0-beta.0, 1.3.0-rc.5, 1.3.0-rc.4, 1.3.0-rc.3, 1.3.0-rc.2, 1.3.0-rc.1, 1.3.0-rc.0, 1.3.0-beta.19, 1.3.0-beta.18, 1.3.0-beta.17, 1.3.0-beta.16, 1.3.0-beta.15, 1.3.0-beta.14, 1.3.0-beta.13, 1.3.0-beta.12, 1.3.0-beta.11, 1.3.0-beta.10, 1.3.0-beta.9, 1.3.0-beta.8, 1.3.0-beta.7, 1.3.0-beta.6, 1.3.0-beta.5, 1.3.0-beta.4, 1.3.0-beta.3, 1.3.0-beta.2, 1.3.0-beta.1
- Angular Material
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script> - 網站:
- material.angularjs.org
- 早期的beta版本:
0.8.2, 0.8.1, 0.8.0, 0.7.1, 0.7.0, 0.6.1, 0.6
- Dojo
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> - 網站:
dojotoolkit.org - 版本:
1.10.4, 1.10.3, 1.10.2, 1.10.1, 1.10.0, 1.9.7, 1.9.6, 1.9.5,
1.9.4, 1.9.3, 1.9.2, 1.9.1, 1.9.0, 1.8.10, 1.8.9, 1.8.8, 1.8.7, 1.8.6, 1.8.5,
1.8.4, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.8, 1.7.7, 1.7.6, 1.7.5, 1.7.4,
1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.4, 1.5.3,
1.5.2, 1.5.1, 1.5.0, 1.4.6, 1.4.5, 1.4.4, 1.4.3, 1.4.1, 1.4.0, 1.3.2,
1.3.1, 1.3.0, 1.2.3, 1.2.0, 1.1.1
- Ext Core
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script> - 網站:
sencha.com/products/extcore - 版本:
3.1.0, 3.0.0
- jQuery
- 1.x 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> - 2.x 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> - 網站:
jquery.com - 版本:
2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0,
1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3,
1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1,
1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2,
1.3.1, 1.3.0, 1.2.6, 1.2.3 - 注意: 2.1.2, 1.2.5 跟 1.2.4因為它們存留的時間太短而且不穩定所以沒有託管。
- jQuery Mobile
- 程式碼:
<script src=”https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js”></script><link
rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" /> - 網站:
jquerymobile.com - 版本:
1.4.5, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0 - 注意: 這個函式依賴jQuery,你必須在載入這個模組前載入jQuery。
- jQuery UI
- 程式碼:
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js”></script><link
rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> - 網站:
jqueryui.com - 版本:
1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.4, 1.10.3, 1.10.2,
1.10.1, 1.10.0, 1.9.2, 1.9.1, 1.9.0, 1.8.24, 1.8.23, 1.8.22, 1.8.21,
1.8.20, 1.8.19, 1.8.18, 1.8.17, 1.8.16, 1.8.15, 1.8.14, 1.8.13,
1.8.12, 1.8.11, 1.8.10, 1.8.9, 1.8.8, 1.8.7, 1.8.6, 1.8.5, 1.8.4,
1.8.2, 1.8.1, 1.8.0, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.0, 1.5.3, 1.5.2
- 注意: 這個函式庫依賴jQuery,你必須在載入這個模組前也載入jQuery,1.8.3版因為週期太短以及
1.8.3其實是載入
1.8.4所以都沒有託管。
- MooTools
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script> - 網站:
mootools.net - 版本:
1.5.1, 1.5.0, 1.4.5, 1.4.4, 1.4.3,
1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.5, 1.2.4,
1.2.3, 1.2.2, 1.2.1, 1.1.2, 1.1.1
- Prototype
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script> - 網站:
prototypejs.org - 版本:
1.7.2.0, 1.7.1.0, 1.7.0.0, 1.6.1.0,
1.6.0.3, 1.6.0.2
- script.aculo.us
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script> - 網站:
script.aculo.us - 版本::
1.9.0, 1.8.3, 1.8.2, 1.8.1 - 注意: 這個函式庫依賴
Prototype
,在載入這個模組前,你必須載入Prototype。
- SPF
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/spf/2.1.2/spf.js"></script> - 網站:
youtube.github.io/spfjs - 版本:
2.1.2, 2.1.1, 2.1.0, 2.0.1, 2.0.0
- SWFObject
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> - 網站:
code.google.com/p/swfobject/ - 版本:
2.2, 2.1
- three.js
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script> - 網站:
threejs.org - 版本:
r67, r68, r69
- Web Font Loader
- 程式碼:
<script
src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script> - 網站:
github.com/typekit/webfontloader - 版本:
1.5.10, 1.5.6, 1.5.3, 1.5.2, 1.5.0, 1.4.10,
1.4.8, 1.4.7, 1.4.6, 1.4.2, 1.3.0, 1.1.2, 1.1.1,
1.1.0, 1.0.31, 1.0.30, 1.0.29, 1.0.28, 1.0.27, 1.0.26,
1.0.25, 1.0.24, 1.0.23, 1.0.22, 1.0.21, 1.0.19, 1.0.18,
1.0.17, 1.0.16, 1.0.15, 1.0.14, 1.0.13, 1.0.12, 1.0.11,
1.0.10, 1.0.9, 1.0.6, 1.0.5, 1.0.4, 1.0.3, 1.0.2, 1.0.1,
1.0.0
故障排除
如果你碰到問題:
- 看看有沒有打錯字,記住JavaScript是有大小寫不同的語言。
- 使用JavaScript除錯器,在Chrome,使用Chrome DevTools,在Firefox,你可以使用內建的Firefox DevTools,在IE,你可以使用F12 developer tools。
- 看看ㄚ琪以前寫的jQuery UI入門、關於jQuery、jQuery Mobile快速開發教學mobile 網站入門
- 買本書回來看,像是深入淺出 jQuery 之類的書
- 直接留言給我
3 則留言