如果是從內部架構與理念劃分,目前JavaScript框架可以分割成5類。
第1種
出現的是以命名空間為導向的類別庫或框架,如建立一個陣列用new Array(),產生一個物件用new Object(),完全的Java風格,因此我們就可以以某一物件為根,不斷為它添加物件屬性或二級物件屬性來組織程式碼,金字塔般地壘疊起來。代表作如早期的YUI與EXT。
第2種
出現的是以類工廠為導向的框架,如著名的Prototype,還有mootools、Base2、Ten。它們基本上除了最基本的命名空間,其他模組都是由類別工廠衍生出來的類別物件。尤其是mootools 1.3,把所有類型都封裝成Type類型。
第3種
就是以jQuery為代表的以選擇器為導向的框架,整個框架或庫主體是一個特殊類數組對象,方便集化操作——因為選擇器通常是一下子選擇到N個元素節點,於是便一並處理了。 jQuery包含了幾樣了不起的東西:「無new實例化」技術,$(expr)就是回傳一個實例,不需要明確地new出來;get first set all存取規則:資料快取系統。這樣就可以複製節點的事件了。此外,IIFE(Immediately-Invoked Function Expression)也被挖掘出來。
第4種
就是以載入器串連起來的框架,它們都有複數個JavaScript文件,每個JavaScript檔案都以固定規則編寫。其中最著名的莫過於AMD。模組化是JavaScript走向工業化的象徵。 《Unix程式設計藝術》列舉的眾多「金科玉律」的第一條就是模組,裡面有言——「要編寫複雜軟體又不至於一敗塗地的唯一方法,就是用定義清晰的介面把若干簡單模組組合起來,如此一來,多數問題只會出現在局部,那麼還有希望對局部進行改進或優化,而又不至於牽動全身」。許多企業內部框架基本上都採取這種架構,如Dojo、YUI、kissy、qwrap和mass等。
第5種
就是具有明確分層架構的MV*框架。首先是JavaScript MVC(現在稱為CanJS)、backbonejs、spinejs,然後更符合前端實際的MVVM框架,如knockout、ember、angular、avalon、winjs。在MVVM框架中,原有DOM操作被聲明式綁定取代了,由框架自行處理,使用者只需專注於業務程式碼。
以下是有關框架特徵的結論。
基本資料型別的操作是基礎,如jQuery就提供了trim、camelCase、each、map等方法,對Prototype.js等侵入式框架則是在原型上加入camelize等方法。
類型的判定必不可少,常見形式是isXXX系列。
選擇器、domReady、Ajax是現代框架的標配。
DOM操作是重中之重,節點的遍歷、樣式的操作、屬性操作也屬於它的範疇,是否細分就看框架的規模了。
brower sniff已過時,feature detect正被應用。不過特性偵測還是有局限性,如果針對於某個瀏覽器版本的渲染Bug、安全策略或某些Bug的修正,還是要用到瀏覽器嗅探。但它應該獨立成一個模組或插件,移除框架的核心。
現在主流的事件系統都支援事件代理。
資料的快取與處理,目前瀏覽器也提供data-*屬性進行這方面的工作,但不太好用,需要框架的進一步封裝。
動畫引擎,除非你的框架像Prototype.js那樣擁有像script.aculo.us這樣頂級的動畫框架做後盾,最好也加上。
插件的易開發和擴充性。
提供諸如Deferred這樣處理非同步的解決方案。
即使不專門提供一個類別工廠,也應該存在一個名為extend或mixin的方法對物件進行擴充。 jQuery雖然沒有類別工廠,但在jQuery UI中也不得不增加一個,可見其重要性。
自從jQuery出來一個名為noConflict的方法,新興的框架都帶此方法,以求狹縫中生存。
許多框架非常重視Cookie操作。