如何定製自己的jQuery

一、安裝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,.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源碼中體現如下

1
2
3
4
5
if typeof define === "function" && define.amd ) {
    define( "my-jquery", [], function() {
        return jQuery;
    });
}

此時當你的模塊require時,需要改爲 require('my-jquery'),通過define傳遞依賴時也需要改下


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章