架構選型

　　庫(lib)具有以下三個特點：

　　1、是針對特定問題的解答，具有專業性；

　　2、不控制應用的流程

　　3、被動的被調用

　　架構(frameword)具有以下三個特點：

　　1、具有控制反轉(inverse of control)的功能

　　2、決定應用程式的生命周期

　　3、一般來說，內建了大量的庫

　　由下圖所示，架構會在特定的時間要求程式執行某段代碼。架構決定了什麼時候調用庫，決定了什麼時候要求代碼去執行特定功能

　　而實際上，一個庫有時也可以稱之為架構，而庫裡面內建的方法稱之為庫

　　架構和庫的差別不由實際大小決定，而由思考角度來決定。架構和庫實際上可以統稱為解決方案

　　前端開發中的解決方案主要用于解決以下7個方面的問題：

　　1、DOM

　　2、Communication(通信)

　　3、Utililty(工具庫)

　　4、Templating(模闆內建)

　　5、Component(元件)

　　6、Routing(路由)

　　7、Architecture(架構)

【why】

　　為什麼要使用外部的解決方案呢？

　　1、提高開發效率

　　2、可靠性高（浏覽器相容，測試覆寫）

　　3、配備優良的配套，如文檔、DEMO及工具等

　　4、代碼設計的更合理、更優雅

　　5、專業性高

　　如果問題過于簡單，或者備選架構的品質和可靠性無法保證，再或者無法滿足業務需求，則不應該選擇外部的架構。如果團隊中已經有相關的積累，就更不需要使用了

【how】

　　一般地，解決方案要實際開發中有以下3種使用方式：

　　1、開放式：基于外部子產品系統，并自由組合

　　2、半開放式：基于一個定制的子產品系統，内部外部解決方案共存

　　3、封閉式：深度定制的子產品系統，很少需要引入外部子產品

　　接下來，将針對解決方案中提到的7個問題進行分别介紹，首先是DOM

　　關于DOM，主要包括Selector(選擇器)、Manipulation(DOM操作)、Event(事件)、Animation(動畫)這四個部分

　　DOM相關的解決方案主要用于提供以下操作　

　　1、提供便利的 DOM 查詢、操作、移動等操作

　　2、提供事件綁定及事件代理支援

　　3、提供浏覽器特性檢測及 UserAgent 偵測

　　4、提供節點屬性、樣式、類名的操作

　　5、保證目标平台的跨浏覽器支援

【常用方案】

　　常用的DOM解決方案有 jQuery、zepto.JS、MOOTOO.JS等

　　jQuery是曾經風靡一時的最流行的前端解決方案，jQuery特有的鍊式調用的方式簡化了javascript的複雜操作，而且使人們不再需要關心相容性，并提供了大量的實用方法

　　zepto是jQuery的精簡版，針對移動端去除了大量jQuery的相容代碼，提供了簡單的手勢，部分API的實作方式不同

　　mootools源碼清晰易懂，嚴格遵循Command-Query(指令-查詢)的接口規範，沒有諸如jQuery的兩義性接口。還有一個不得不提的特點是，使用選擇器擷取的是DOM原生對象，而不是被包裝過的對象。而它支援的諸多方法則是通過直接擴充DOM原生對象實作的，這也是它的争議所在

　　相比較而言，最穩妥的DOM解決方案是jQuery

【專業領域】

　　上面的解決方案用于解決DOM一般的通用問題。随着技術的發展，DOM的專業領域出現一些小而精緻的解決方案

　　1、手勢

　　Hammer.JS包括了常見手勢封裝（Tab、Hold、Transform、Swifp）并支援自定義擴充

　　2、局部滾動

　　iscroll.JS是移動端position:fix + overflow:scroll的救星

　　3、進階動畫

　　Velocity.JS可以複雜動畫序列實作，不僅局限于 DOM

　　4、視訊播放

　　Video.JS類似原生 video 标簽的使用方式，對低級浏覽器使用 flash 播放器

　　關于通信，主要包括XMLHttpRequest、Form、JSONP、Socket等 

　　通信相關的解決方案主要用于提供以下操作

　　1、處理與伺服器的請求與相應

　　2、預處理請求資料與響應資料 Error/Success 的判斷封裝

　　3、多類型請求，統一接口（XMLHttpRequest1/2、JSONP、iFrame）

　　4、處理浏覽器相容性

　　除了jQuery等，其他常用的通信解決方案有Reqwest、qwest等

　　Reqwest支援JSONP，穩定性高，IE6+支援，CORS 跨域，Promise/A 支援

　　qwest代碼少、支援XMLHttpRequest2、CORS 跨域、支援進階資料類型（ArrayBuffer、Blob、FormData）

　　對于實時性要求較高的需求可以使用socket.io，它實時性高，支援二進制資料流，智能自動回退支援，且支援多種後端語言

　　工具包(Utililty)的主要職責包括以下：

　　1、提供 JavaScript 原生不提供的功能

　　2、包裝原生方法，使其便于使用

　　3、異步隊列及流程控制

　　常用的工具包解決方案有es5-shim、es6-shim、underscore、Lodash等　　

　　上面提到的shim，也是經常聽到的一個詞，翻譯過來是墊片的意思。對于es5、es6等标準包括的一些新方法，由于浏覽器相容性不高，是以無法直接使用它們。這時，就需要在保證實作與規範一緻的基礎上，來擴充原型方法，這種做法就叫做shim。好處在于，實際上就是在使用javascript的文法，但不用去考慮低版本浏覽器的相容性問題

　　es5-shim 提供 ES3 環境下的 ES5 支援

　　es6-shim 提供 ES5 環境下的 ES6支援

　　underscore 提供相容 IE6+ 的擴充功能函數

　　Lodash是underscore 的高性能版本，方法多為 runtime 編譯出來的

　　模闆主要包括三類：基于字元串的模闆(String-based)、基于DOM的模闆(DOM-based)、活動模闆(Living Template)

　　1、基于字元串的模闆(String-based)，解決方案包括(dustjs、hogan.js、dot.js)

　　原理如下：輸入一段模闆字元串，通過編譯之後 ，生成一段Function，通過Function的render或類render函數渲染輸入的資料data，輸出模闆字元串，字元串通過innerHTML或類似的方式渲染成最後的DOM結構。這類模闆的問題在于通過字元串生成DOM之後就不再變化，如果在改變輸入的資料data，需要重新render，重新生成一個全新的DOM結構，性能較差。但該模闆可以在伺服器端運作

　　2、基于DOM的模闆(DOM-based)，解決方案包括(angularjs、vuejs、knockout)

　　原理如下：将輸入的字元串模闆通過innerHTML轉換為一個無狀态DOM樹，然後周遊該節點樹，去抓取關鍵屬性或語句，來進行相關的綁定，進而變成了有狀态的DOM樹，最終導緻DOM樹會與資料模型model進行綁定。這類模闆的特點是修改資料時，會使有狀态的DOM樹實時更新，運作時性能更好，也會保留 DOM 中的已有事件

　　3、活動模闆(Living Template)，解決方案包括(RegularJS、RactiveJS、htmlbar)

　　原理如下：活動模闆融合了字元串模闆和DOM模闆的技術，模闆字元串string通過自定義的解析器DSL-based Parse解析成AST(抽象文法樹)，通過周遊AST，使用createElement()、setAttribute()等原生DOM方法，生成DOM樹，最終導緻DOM樹會與資料模型model進行綁定。由于其内部完全不使用innerHTML，是以安全性較高

　　元件(Component)的主要職責包括以下：

　　1、提供基礎的 CSS 支援

　　2、提供常見的元件，如slider、Modal等

　　3、提供聲明式的調用方式（類似 Bootstrap）

　　常用的元件解決方案有Bootstrap、Foundation等，兩者具有移動端first的流式栅格系統，由sass組織，可定制UI

　　Bootstrap封裝了常用的元件，是目前最火的元件解決方案

　　Foundation在國内知名度不高

　　路由在單頁系統中非常重要，主要職責如下

　　1、監聽 URL 變化，并通知注冊的子產品

　　2、通過 JavaScript 進行主動跳轉

　　3、曆史管理

　　4、對目标浏覽器的相容性支援

　　無論什麼架構，在完成配置之後，内部都有如下圖所示的類似的路由表。

　　常用的路由解決方案有page.JS、Director.JS、Stateman、crossroad.JS等

　　page.JS類似 Express.Router 的路由規則的前端路由庫

　　Director.JS可以前後端使用同一套規則定義路由

　　Stateman處理深層複雜路由的獨立路優庫

　　crossroad.JS老牌路由庫，API 功能較為繁瑣

　　所有的架構(architecture)都是一個目的，就是解耦。解耦有很多方式，可以通過事件、分層等

　　市面上，有很多架構模式，包括MVC、MVVM、MV*等

　　架構的職責主要包括以下：

　　1、提供一種範式幫助（強制）開發者進行子產品解耦

　　2、視圖與模型分離

　　3、容易進行單元測試

　　4、容易實作應用擴充

　　以MVVM為例，如下圖所示。它包括Model(資料層或模型層)、View(視圖層)、ViewModel(控制層)

　　Model(資料層或模型層)表示資料實體，它們用于記錄應用程式的資料

　　View(視圖層)用于展示界面，界面是資料定制的反映，它包含樣式結構定義以及VM享有的聲明式資料以及資料綁定

　　ViewModel(控制層)是View與Model的粘合，它通過綁定事件與View互動并可以調用Service處理資料持久化，也可以通過資料綁定将Model的變動反映到View中

　　它們的關系是：各部分之間的通信，都是雙向的；View 與 Model 不發生聯系，都通過 ViewModel 傳遞；View 非常薄，不部署任何業務邏輯，稱為"被動視圖"（Passive View），即沒有任何主動性，而ViewModel非常厚，所有邏輯都部署在那裡

【SPA】

　　要特點注意的是，MV* !== SPA(單頁系統)

　　SPA應用程式的邏輯比較複雜，需要一種模式來進行解耦，但并不一定是MV*模式

　　最後推薦一個架構選型網站https://www.javascripting.com，該網站根據不同的需求的選擇，給出當下流行的架構選型