javascript架構設計之架構分類及主要功能

javascript架構設計之架構分類及主要功能

　　這篇文章主要介紹了javascript架構設計之架構分類及主要功能的相關資料,需要的朋友可以參考下

　　從內部架構和理念劃分，目前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的語言擴充覆蓋面很廣，包括基礎資料型別 (Elementary Data Type)和從語言借鑒過來的“類”。其中，Enumerable只是一個普通的方法包，ObjectRange、PeriodicalExecuter、Templat則是用Class類工廠生產出來的(來自社區貢獻)。

　　mootools由於API設計的非常優雅，其官方網站上有很多優質外掛程式，才沒有在原型擴充的反對浪潮中沒落。

　　Rightjs：又一個在原型擴充上的架構，MochiKit 一個Python風格的架構，十分獨到，能進架構前十。

　　Ten：日本著名部落格社區 Hatena的Javascript架構，amachang開發，受Prototype.js影響，是最早以空間命名的架構典範;mass Framework：一個以大模組開發為目標，jQuery式的架構。

　　經過細節的比較，我們很容易得出以下架構特徵的結論

　　?

1 2 3 4 5 6 7 8 9 10 11 12

對基本資料的操作是基礎，如jQuery提供的trim camelCase each map等方法，Prototype.js等入侵式架構則在原型上添加camelize等方法 類型的判定比不可少，常見的形式是jsXXX系列 選取器，domReady Ajax是現代架構的標配 DOM操作是重中之重，節點的遍曆，樣式操作，屬性操作也屬於它的範疇 現在主流的事件系統都支援事件代理 資料的緩衝與處理，目前瀏覽器也支援data-屬性進行操作，但不好用，需要架構封裝 動畫引擎 外掛程式的易開發和擴充性 提供諸如Deferred這樣處理非同步解決方案 即使不專門提供一個類工廠，也應該存在一個名為extend或mixin的方法對對象進行擴充。jQuery雖然沒有類工廠，但在jQuery UI中也不得不增加一個，可見其重要性。 自從jQuery出來一個名為noConflict的方法，新興的架構都帶此方法，以求狹縫中生存。 許多架構非常重視Cookie操作。

       以上所述就是本文的全部內容了，希望大家能夠喜歡。