淺談JavaScript 架構分類

淺談JavaScript 架構分類

 　　第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操作被聲明式綁定取代了，由架構自行處理，使用者只需專註於業務代碼。

　　下面是有關架構特徵的結論。

　　對基礎資料型別 (Elementary Data Type)的操作是基礎，如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操作。