JET(Javascript Extension Tools - Javascript 擴展工具包)
站在巨人的肩上 Standing on shoulders of giants
JET 適用於 Web Page 和 Web App 的開發
據說是騰訊內部開發的!
JET 下載地址:http://code.google.com/p/j-et/downloads/list
特性
-
微內核設計
- 內核可完全分離出來,用於構建自己的框架
- 自由拼裝各個模塊
- 命名空間、原生對象零污染
-
無縫集成各種js框架
- 與jQuery, YUI, Mootools, Prototype.js 等框架無縫集成
- 與多種局部框架無縫集成,如:Mini, Sizzle, cssQuery, xpath, JSON 等等
-
多版本共存
- 如採用的JET版本過舊,舊有的Javascript代碼不能與新版本JET兼容,則可以採用多版本共存的方式保持程序的可延續性
-
分層設計
- Javascript核心層,與Javascript解釋引擎無關的封裝和擴展
- 瀏覽器端Javascript層,對瀏覽器中的Javascript引擎部分的封裝和擴展
代碼示範
- JET 代碼組織方式一(傳統):
var J = new Jet(); J.out(J.version);
- JET 代碼組織方式二(推薦):
Jet().$package(function(J){ J.out(J.version); });
不要重複自己(Don’t Repeat Yourself)
//=================================================================
感謝 David Flanagan, John Resig, 以及 MooTools, YUI, Prototype, Dojo, ExtJs 的作者們!
//=================================================================
JET 下載:http://code.google.com/p/j-et/downloads/list
騰訊內部使用的js庫也開源了— JET(Javascript Extension Tools – Javascript 擴展工具包),很難得的一件事情,趕緊下了Jet 1.1.1版本的整個源碼,包括說明文檔來看看源碼,看看騰訊強大的前端技術的後面會有一個怎樣的js庫來支撐的。http://code.google.com/p/j-et/wiki/JET
查看了Jet的使用方式之後,首先不禁冒出了一個詞“複製”。是的,Jet複製了YUI3的編寫方式,提供了“包”的概念package:
//code here...
};
採用的也是顆粒化的方式,將負責不同功能的代碼整理到獨立的js文件裏,比如:DOM、string、Event、http、fx、ui等等,不過Jet方法裏並不能像YUI3那樣直接導入該包的js文件,查看它的DEMO,需要自由組合幾個js文件來實現想要的功能,做到了無縫的插入包,這個就得益於Jet中的微內核—jet.core.js。
上面是第一個“複製”,在查看jet.base.js這個文件源碼的時候,看到了很多熟悉的函數呀:$try、clone、timedChunk、bind、random等等,這些都還是似乎直接複製。這個base文件包含了微內核、dom、browser、event、date、Class(用於繼承和擴展的相關方法和屬性)。但是,感覺看Jet的源碼很爽,讀起來很順暢,整體來看Jet的各個文件的組織是:微內核來提供包以及仿照YUI3的這種操作方式,而其他的dom、event、browser等則是作爲工具代碼包的概念組織起來的。這就更像是一種函數功能集合,在各個包裏對提供的各種接口API,也是過程函數的編寫方式,增加、刪除、修改都非常的容易,顆粒化的程度較高,這點非常贊~。核心邏輯簡單了,代碼組合的方式也就簡單的多了。
Jet中Class的繼承方式還是比較簡單的,並且只提供原型的繼承,對於父類中的使用this聲明的方法和屬性則不繼承。這點不知道開發人員是怎麼考慮的。
還有一個非常讚的地方,是event包中addEventListener、removeEventListener在IE下的處理方式。在IE下使用一個包裝函數來對事件event對象做屬性擴展,來使得跟W3C的事件的屬性接口達成統一。同時通過一個事件儲存容器,來儲存每一個事件,在window設置了unload的情況下,刪除全部已註冊的事件。onDomReady原理跟我之前所寫的類似,通過定時器來檢測document、document.body、document.getElementById、document.getElementsByTagName是否可用來實現。
在代碼的編寫方式上也有值得借鑑的地方:在包的開頭將全部的功能函數用變量聲明瞭,之後實現每一個功能函數,最後把功能函數註冊到包的命名空間下面。這樣組織代碼,看起來比較清晰,對實現代碼的顆粒化也是有很大幫助。
不過在代碼的細節上,還是有很多可以優化的地方:包括減少屬性查詢、執行語句,字符串的處理,以及在一些功能的實現上等等也都可以使用比較優雅的方式來實現的。但整體上來說是:簡潔、代碼組織有序、在兼容性方面做的也不錯……