如果是從內(nèi)部架構(gòu)與理念劃分,目前 JavaScript 框架可以劃分為 5 類。
出現(xiàn)的是以命名空間為導(dǎo)向的類庫或框架,如創(chuàng)建一個數(shù)組用 new Array(),生成一個對象用 new Object(),完全的 Java 風(fēng)格,因此我們就可以以某一對象為根,不斷為它添加對象屬性或二級對象屬性來組織代碼,金字塔般地壘疊起來。代表作如早期的 YUI 與 EXT。
出現(xiàn)的是以類工廠為導(dǎo)向的框架,如著名的 Prototype,還有 mootools、Base2、Ten。它們基本上除了最基本的命名空間,其他模塊都是一個由類工廠衍生出來的類對象。尤其是 mootools 1.3,把所有類型都封裝成 Type 類型。
就是以 jQuery 為代表的以選擇器為導(dǎo)向的框架,整個框架或庫主體是一個特殊類數(shù)組對象,方便集化操作――因為選擇器通常是一下子選擇到 N 個元素節(jié)點(diǎn),于是便一并處理了。jQuery 包含了幾樣了不起的東西:“無 new 實例化” 技術(shù),$(expr)就是返回一個實例,不需要顯式地 new 出來;get first set all 訪問規(guī)則:數(shù)據(jù)緩存系統(tǒng)。這樣就可以復(fù)制節(jié)點(diǎn)的事件了。此外,IIFE(Immediately-Invoked Function Expression)也被發(fā)掘出來。
就是以加載器串聯(lián)起來的框架,它們都有復(fù)數(shù)個 JavaScript 文件,每個 JavaScript 文件都以固定規(guī)則編寫。其中最著名的莫過于 AMD。模塊化是 JavaScript 走向工業(yè)化的標(biāo)志。《Unix 編程藝術(shù)》列舉的眾多 “金科玉律” 的第一條就是模塊,里面有言――“要編寫復(fù)雜軟件又不至于一敗涂地的唯一方法,就是用定義清晰的接口把若干簡單模塊組合起來,如此一來,多數(shù)問題只會出現(xiàn)在局部,那么還有希望對局部進(jìn)行改進(jìn)或優(yōu)化,而又不至于牽動全身”。許多企業(yè)內(nèi)部框架都基本采取這種架構(gòu),如 Dojo、YUI、kissy、qwrap 和 mass 等。
就是具有明確分層架構(gòu)的 MV * 框架。首先是 JavaScript MVC(現(xiàn)在叫 CanJS)、backbonejs、spinejs,然后更符合前端實際的 MVVM 框架,如 knockout、ember、angular、avalon、winjs。在 MVVM 框架中,原有 DOM 操作被聲明式綁定取代了,由框架自行處理,用戶只需專注于業(yè)務(wù)代碼。
下面是有關(guān)框架特征的結(jié)論。
對基本數(shù)據(jù)類型的操作是基礎(chǔ),如 jQuery 就提供了 trim、camelCase、each、map 等方法,對 Prototype.js 等侵入式框架則是在原型上添加 camelize 等方法。
類型的判定必不可少,常見形式是 isXXX 系列。
選擇器、domReady、Ajax 是現(xiàn)代框架的標(biāo)配。
DOM 操作是重中之重,節(jié)點(diǎn)的遍歷、樣式的操作、屬性操作也屬于它的范疇,是否細(xì)分就看框架的規(guī)模了。
brower sniff 已過時,feature detect 正被應(yīng)用。不過特性偵測還是有局限性,如果針對于某個瀏覽器版本的渲染 Bug、安全策略或某些 Bug 的修正,還是要用到瀏覽器嗅探。但它應(yīng)該獨(dú)立成一個模塊或插件,移除框架的核心。
現(xiàn)在主流的事件系統(tǒng)都支持事件代理。
數(shù)據(jù)的緩存與處理,目前瀏覽器也提供 data-* 屬性進(jìn)行這方面的工作,但不太好用,需要框架的進(jìn)一步封裝。
動畫引擎,除非你的框架像 Prototype.js 那樣擁有像 script.aculo.us 這樣頂級的動畫框架做后盾,最好也加上。
插件的易開發(fā)和擴(kuò)展性。
提供諸如 Deferred 這樣處理異步的解決方案。
即使不專門提供一個類工廠,也應(yīng)該存在一個名為 extend 或 mixin 的方法對對象進(jìn)行擴(kuò)展。jQuery 雖然沒有類工廠,但在 jQuery UI 中也不得不增加一個,可見其重要性。
自從 jQuery 出來一個名為 noConflict 的方法,新興的框架都帶此方法,以求狹縫中生存。
許多框架非常重視 Cookie 操作。