jQuery隨着版本的不斷升級代碼量也隨之增加,從1.0.0的不到兩千行到現在的1.10.2已經突破1萬行。
新的API不斷增加,但有些在項目中並沒有用到。jQuery團隊很早就考慮到這一點,按模塊來划分,並可以按需定制自己的jQuery。
jQuery從1.9開始構建工具遷移到grunt。grunt是基於node的,因此需要安裝node,下面詳細介紹。
一、安裝node
很簡單,這里有入門參考。
二、安裝grunt
也很簡單,這里有入門參考。
三、去github下載jQuery源碼
使用命令: git clone git://github.com/jquery/jquery.git
下載后的目錄
四、安裝依賴包
確保第二步里grunt-cli已經安裝(推薦全局安裝,使用參數-g)。
這里使用命令npm install即可,下載的東西比較多,大概需要1分鍾左右。下載完成后根目錄jquery中多了一個node_modules,如下
可以看到安裝了一堆lib,uglify、gzip.js、requirejs等。至此,所有安裝都已完畢。
五、編譯源碼到dest目錄
非常簡單,cd到jquery目錄,敲grunt,如圖
此時jquery目錄里多了一個dest目錄
dest目錄有三個文件,未壓縮的jquery.js,壓縮的jquery.min.js和souremap(jquery.min.map需瀏覽器支持),這就是最終生產環境用到jquery版本。和你在官網下載的沒有任何區別。
注意:
默認編譯的是的2.x版本,2.x不支持IE6,7,8,如果想編譯1.x的版本,使用git命令 git checkout 命令,如下將切換的 1.10.0
git checkout 1.10.0
所有的tag可通過命令 git tag 查看
六、定制你自己的jQuery
上面編譯的是完整版的jQuery,如果想定制自己的jQuery,比如你不需要動畫模塊,或者不需要ajax模塊等。
查看jquery目錄下的src目錄,可以看到jQuery自身是分模塊開發的,各個模塊在獨立的目錄或文件里,如下圖
除了 核心模塊(core)和 選擇器(selector),其它模塊都可以定制(包含或排除)。
比如你的項目中沒有用到ajax模塊,那么通過以下命令編譯的jquery.js將不包含$.ajax, $.get, $.getJSON等。
cd到jquery目錄,輸入 grunt custom:-ajax
此時查看dest目錄下的jquery.js會發現代碼只有7千多行,少了許多。這個版本的jquery版本號也很特殊,如下
不想包含多個模塊,以逗號分隔即可,如
不包含ajax和動畫:grunt custom:-ajax,-effects
不包含css、位置、包裹:grunt custom:-css,-offset,-wrap
七、修改jQuery的AMD模塊名
我們知道jQuery可以做為AMD的一個模塊存在,它默認的模塊名是 "jquery"。
如果不想使用該名稱,通過命令 grunt custom --amd="my-jquery" 即可完成修改
這時jquery的模塊名稱就變為 "my-jquery" 了,jquery.js源碼中體現如下
if ( typeof define === "function" && define.amd ) { define( "my-jquery", [], function() { return jQuery; }); }
此時當你的模塊require時,需要改為 require('my-jquery'),通過define傳遞依賴時也需要改下。
特殊情況下你可能要使用一個匿名模塊,使用命令 grunt custom --amd="",關於AMD及模塊化請猛擊 Modular JS。