框架選型

前面的話

　　有一個流傳較廣的笑話，一我的在stackoverflow中提了一個問題，如何使用javascript實現一個數字與另一個數字相加。最高票回答是你應該使用jQuery插件，jQuery插件能夠作任何事情。 歷史老是在重演，之前是jQuery，如今多是react或vue。不一樣的框架有不一樣的應用場景，殺雞不要用牛刀。本文將詳細介紹框架選型

 

框架與庫

　　庫(lib)具備如下三個特色：

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

　　二、不控制應用的流程

　　三、被動的被調用

　　框架(framework)具備如下三個特色：

　　一、具備控制反轉(inverse of control)的功能

　　二、決定應用程序的生命週期

　　三、通常來講，集成了大量的庫

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

　　而實際上，一個庫有時也能夠稱之爲框架，而庫裏面集成的方法稱之爲庫

　　框架和庫的區別不禁實際大小決定，而由思考角度來決定。框架和庫實際上能夠統稱爲解決方案

 

解決方案

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

　　一、DOM

　　二、Communication(通訊)

　　三、Utililty(工具庫)

　　四、Templating(模板集成)

　　五、Component(組件)

　　六、Routing(路由)

　　七、Architecture(架構)

【why】

　　爲何要使用外部的解決方案呢？

　　一、提升開發效率

　　二、可靠性高（瀏覽器兼容，測試覆蓋）

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

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

　　五、專業性高

　　若是問題過於簡單，或者備選框架的質量和可靠性沒法保證，再或者沒法知足業務需求，則不該該選擇外部的框架。若是團隊中已經有相關的積累，就更不須要使用了

【how】

　　通常地，解決方案要實際開發中有如下3種使用方式：

　　一、開放式：基於外部模塊系統，並自由組合

　　二、半開放式：基於一個定製的模塊系統，內部外部解決方案共存

　　三、封閉式：深度定製的模塊系統，不多須要引入外部模塊

 

DOM

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

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

　　DOM相關的解決方案主要用於提供如下操做　

　　一、提供便利的 DOM 查詢、操做、移動等操做

　　二、提供事件綁定及事件代理支持

　　三、提供瀏覽器特性檢測及 UserAgent 偵測

　　四、提供節點屬性、樣式、類名的操做

　　五、保證目標平臺的跨瀏覽器支持

【經常使用方案】

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

　　jQuery是曾經風靡一時的最流行的前端解決方案，jQuery特有的鏈式調用的方式簡化了javascript的複雜操做，並且令人們再也不須要關心兼容性，並提供了大量的實用方法

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

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

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

【專業領域】

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

　　一、手勢

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

　　二、局部滾動

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

　　三、高級動畫

　　Velocity.JS能夠複雜動畫序列實現，不只侷限於 DOM

　　四、視頻播放

　　Video.JS相似原生 video 標籤的使用方式，對低級瀏覽器使用 flash 播放器

通訊

　　關於通訊，主要包括XMLHttpRequest、Form、JSONP、Socket等 

　　通訊相關的解決方案主要用於提供如下操做

　　一、處理與服務器的請求與相應

　　二、預處理請求數據與響應數據 Error/Success 的判斷封裝

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

　　四、處理瀏覽器兼容性

【經常使用方案】

　　除了jQuery等，其餘經常使用的通訊解決方案有Reqwest、qwest等

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

　　qwest代碼少、支持XMLHttpRequest二、CORS 跨域、支持高級數據類型（ArrayBuffer、Blob、FormData）

【專業領域】

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

 

工具包

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

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

　　二、包裝原生方法，使其便於使用

　　三、異步隊列及流程控制

【經常使用方案】

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

　　上面提到的shim，也是常常聽到的一個詞，翻譯過來是墊片的意思。對於es五、es6等標準包括的一些新方法，因爲瀏覽器兼容性不高，因此沒法直接使用它們。這時，就須要在保證明現與規範一致的基礎上，來擴展原型方法，這種作法就叫作shim。好處在於，實際上就是在使用javascript的語法，但不用去考慮低版本瀏覽器的兼容性問題

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

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

　　underscore 提供兼容 IE6+ 的擴展功能函數

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

 

模板

　　模板主要包括三類：基於字符串的模板(String-based)、基於DOM的模板(DOM-based)、活動模板(Living Template)

　　一、基於字符串的模板(String-based)，解決方案包括(dustjs、hogan.js、dot.js)

　　原理以下：輸入一段模板字符串，經過編譯以後 ，生成一段Function，經過Function的render或類render函數渲染輸入的數據data，輸出模板字符串，字符串經過innerHTML或相似的方式渲染成最後的DOM結構。這類模板的問題在於經過字符串生成DOM以後就再也不變化，若是在改變輸入的數據data，須要從新render，從新生成一個全新的DOM結構，性能較差。但該模板能夠在服務器端運行

　　二、基於DOM的模板(DOM-based)，解決方案包括(angularjs、vuejs、knockout)

　　原理以下：將輸入的字符串模板經過innerHTML轉換爲一個無狀態DOM樹，而後遍歷該節點樹，去抓取關鍵屬性或語句，來進行相關的綁定，進而變成了有狀態的DOM樹，最終致使DOM樹會與數據模型model進行綁定。這類模板的特色是修改數據時，會使有狀態的DOM樹實時更新，運行時性能更好，也會保留 DOM 中的已有事件

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

　　原理以下：活動模板融合了字符串模板和DOM模板的技術，模板字符串string經過自定義的解析器DSL-based Parse解析成AST(抽象語法樹)，經過遍歷AST，使用createElement()、setAttribute()等原生DOM方法，生成DOM樹，最終致使DOM樹會與數據模型model進行綁定。因爲其內部徹底不使用innerHTML，因此安全性較高

 

組件

　　組件(Component)的主要職責包括如下：

　　一、提供基礎的 CSS 支持

　　二、提供常見的組件，如slider、Modal等

　　三、提供聲明式的調用方式（相似 Bootstrap）

【經常使用方案】

　　經常使用的組件解決方案有Bootstrap、Foundation等，二者具備移動端first的流式柵格系統，由sass組織，可定製UI

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

　　Foundation在國內知名度不高

 

路由

　　路由在單頁系統中很是重要，主要職責以下

　　一、監聽 URL 變化，並通知註冊的模塊

　　二、經過 JavaScript 進行主動跳轉

　　三、歷史管理

　　四、對目標瀏覽器的兼容性支持

　　不管什麼框架，在完成配置以後，內部都有以下圖所示的相似的路由表。

【經常使用方案】

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

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

　　Director.JS能夠先後端使用同一套規則定義路由

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

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

 

架構

　　全部的架構(architecture)都是一個目的，就是解耦。解耦有不少方式，能夠經過事件、分層等

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

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

　　一、提供一種範式幫助（強制）開發者進行模塊解耦

　　二、視圖與模型分離

　　三、容易進行單元測試

　　四、容易實現應用擴展

　　以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，該網站根據不一樣的需求的選擇，給出當下流行的框架選型

　　本文是蔡劍飛、鄭海波老師的《產品前端架構》課程中《框架選型》章節的學習記錄