如何定制你自己的jQuery


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM