JET(Javascript Extension Tools - Javascript 擴展工具包)

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

特性

  1. 微內核設計
    • 內核可完全分離出來,用於構建自己的框架
  2. 自由拼裝各個模塊
  3. 命名空間、原生對象零污染
  4. 無縫集成各種js框架
    • 與jQuery, YUI, Mootools, Prototype.js 等框架無縫集成
    • 與多種局部框架無縫集成,如:Mini, Sizzle, cssQuery, xpath, JSON 等等
  5. 多版本共存
    • 如採用的JET版本過舊,舊有的Javascript代碼不能與新版本JET兼容,則可以採用多版本共存的方式保持程序的可延續性
  6. 分層設計
    • Javascript核心層,與Javascript解釋引擎無關的封裝和擴展
    • 瀏覽器端Javascript層,對瀏覽器中的Javascript引擎部分的封裝和擴展

代碼示範

  • JET 代碼組織方式一(傳統):
var J = new Jet();
J.out(J.version);
  • JET 代碼組織方式二(推薦):
Jet().$package(function(J){
        J.out(J.version);
});

 

JET設計理念

不要重複自己(Don’t Repeat Yourself)

//=================================================================

感謝 David Flanagan, John Resig, 以及 MooTools, YUI, Prototype, Dojo, ExtJs 的作者們!

//=================================================================

 

JET 下載:http://code.google.com/p/j-et/downloads/list

 

 

JET  
JET 簡介

命名含義

  • JET 是 Javascript Extension Tools 的縮寫,即 Javascript 擴展工具套件的意思。
  • jet 本意是噴氣式飛機,所以同時借喻輕巧、快速的寓意。

設計理念

  • 保持最優的執行效率
  • 保持 Javascript 原有的代碼風格,降低學習難度
  • 更好的組織工業級 Javascript 應用程序

其他

  • 探索在前端使用 MVP、MVC 模式來構建大型 WebApp (Build Web App with MVP)
  • 探索工業級 Javascript 的開發技術

發展規劃

  1. 核心底層 - 純Js底層功能封裝/代碼組織/無縫接入其它js庫 - [完成]
  2. 基礎擴展 - 跨瀏覽器封裝/工具函數/設計模式相關 - [完成]
  3. UI 基礎控件 - 按鈕/面板/窗口/樹形列表/Tab/lightbox/widgets...
  4. 實時動畫系統 - 實時定時器/關鍵幀動畫/加速度公式/物理引擎/聲音控制器...
  5. 遊戲引擎 - 角色控制/地圖系統/遊戲異步通訊系統/尋路算法/鍵盤控制/人工智能/...

結構圖

第一層 Core Javascript 擴展模塊 代碼組織模塊(輕鬆組織大型應用,無縫接入其它js庫)
第二層 Browser Javasccript 擴展模塊(跨瀏覽器,基礎封裝) 可選模塊(設計模式相關模塊,選擇器模塊...)
第三層 UI 組件 實時動畫模塊 遊戲引擎模塊

騰訊內部使用的js庫也開源了— JET(Javascript Extension Tools – Javascript 擴展工具包),很難得的一件事情,趕緊下了Jet 1.1.1版本的整個源碼,包括說明文檔來看看源碼,看看騰訊強大的前端技術的後面會有一個怎樣的js庫來支撐的。http://code.google.com/p/j-et/wiki/JET

查看了Jet的使用方式之後,首先不禁冒出了一個詞“複製”。是的,Jet複製了YUI3的編寫方式,提供了“包”的概念package:

Jet().$package(function(J){
  //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是否可用來實現。

在代碼的編寫方式上也有值得借鑑的地方:在包的開頭將全部的功能函數用變量聲明瞭,之後實現每一個功能函數,最後把功能函數註冊到包的命名空間下面。這樣組織代碼,看起來比較清晰,對實現代碼的顆粒化也是有很大幫助。

不過在代碼的細節上,還是有很多可以優化的地方:包括減少屬性查詢、執行語句,字符串的處理,以及在一些功能的實現上等等也都可以使用比較優雅的方式來實現的。但整體上來說是:簡潔、代碼組織有序、在兼容性方面做的也不錯……

 

 

 

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