從內部架構和理念劃分,目前JavaScript框架可以劃分為5類。 第一種是以命名空間為導向的類庫或框架,如果創建一個數組用new Array(),生成一個對象用new Object(),完全的java風格,因此,我們以某一對象為跟,不斷為它添加對象和二級對象屬性來組織代碼,如金字塔般壘起來,早期代 ...
從內部架構和理念劃分,目前JavaScript框架可以劃分為5類。
第一種是以命名空間為導向的類庫或框架,如果創建一個數組用new Array(),生成一個對象用new Object(),完全的java風格,因此,我們以某一對象為跟,不斷為它添加對象和二級對象屬性來組織代碼,如金字塔般壘起來,早期代表YUI,EXT(so,不是有活力的公司都還用它們)
第二種是以類工廠為導向的框架。著名的有Prototype,還有mootools、Base2、Ten,它們基本上除了最基本的命名空間,其它模塊都是一個由類工廠衍生出來的類對象。尤其mootools1.3把所有類型都封裝成Type類型。
第三種,就是以jQuery為代表的以選擇器為導向的框架,整個框架或庫主體是一個特殊的類數組對象,方便集化操作(因為選擇器一下子選擇到了N個元素節點),於是一併處理了。jQuery有幾樣了不起的東西:
- “無new實例化”技術,$( expr )就是返回一個實例,不需要顯式的new出來;
- get first set all訪問規則;
- 數據緩存系統。這樣就可以賦值節點事件了。
- IIFE也被髮掘出來
第四種,就是載入器串聯起來的框架,它都有複數個javascript文件,每個javascript文件都以固定規則編寫。其中,最著名的莫過於AMD。模塊化是javascript走向工業化的標誌,“要編寫複雜軟體有不至於一派塗地的唯一方法,就是定義清晰的介面,把若幹模塊組合起來,如此一來,多數問題只會出現在局部,那麼還有希望對局部進行改進和優化,而不至於牽動全身。”許多企業內部框架都基本採取這種架構,如Dojo,YUI,Kissy,qwrap,mass,(requirejs,Seajs)等.
第五種,就是具有明確的分層構架的MV*,首先是javascript MVC,(現在叫Canjs)、backbone.js和spinejs,然後更符合前端實際的MVVM框架,如,knockout,emberm,angular,avalon,winjs。在MVVM框架中,原有的DOM操作被聲明式綁定取代了,由框架自由處理,用戶只專註於業務代碼。
javascript框架的主要功能
jQuery框架類庫的模塊劃分主要依據在github的源代碼,基本上都是一個模塊一個javascript文件,jQuery一開始專註於DOM操作的思路一開始就是對的,以後不斷在相容性上,性能上進行改進,經過多年發展,jQuery龐大的插件與完善的BUG提交渠道,使得自身不斷完善
Prototype.js早期的王者,它劃分為四個部分。
- 語言擴展
- DOM擴展
- Ajax部分
- 廢棄部分,新版本用其他方法實現原有功能
Prototype.js的語言擴展覆蓋面很廣,包括基本數據類型和從語言借鑒過來的“類”。其中,Enumerable只是一個普通的方法包,ObjectRange、PeriodicalExecuter、Templat則是用Class類工廠生產出來的(來自社區貢獻)。
mootools由於API設計的非常優雅,其官方網站上有很多優質插件,才沒有在原型擴展的反對浪潮中沒落。
Rightjs:又一個在原型擴展上的框架,MochiKit 一個Python風格的框架,十分獨到,能進框架前十。
Ten:日本著名博客社區 Hatena的Javascript框架,amachang開發,受Prototype.js影響,是最早以空間命名的框架典範;mass Framework:一個以大模塊開發為目標,jQuery式的框架。
經過細節的比較,我們很容易得出以下框架特征的結論
- 對基本數據的操作是基礎,如jQuery提供的trim camelCase each map等方法,Prototype.js等入侵式框架則在原型上添加camelize等方法
- 類型的判定比不可少,常見的形式是jsXXX系列
- 選擇器,domReady Ajax是現代框架的標配
- DOM操作是重中之重,節點的遍歷,樣式操作,屬性操作也屬於它的範疇
- 現在主流的事件系統都支持事件代理
- 數據的緩存與處理,目前瀏覽器也支持data-屬性進行操作,但不好用,需要框架封裝
- 動畫引擎
- 插件的易開發和擴展性
- 提供諸如Deferred這樣處理非同步的解決方案
- 即使不專門提供一個類工廠,也應該存在一個名為extend或mixin的方法對對象進行擴展。jQuery雖然沒有類工廠,但在jQuery UI中也不得不增加一個,可見其重要性。
- 自從jQuery出來一個名為noConflict的方法,新興的框架都帶此方法,以求狹縫中生存。
- 許多框架非常重視Cookie操作。