前面的話

　　有一個(gè)流傳較廣的笑話，一個(gè)人在stackoverflow中提了一個(gè)問題，如何使用javascript實(shí)現(xiàn)一個(gè)數(shù)字與另外一個(gè)數(shù)字相加。最高票回答是你應(yīng)該使用jQuery插件，jQuery插件可以做任何事情。?歷史總是在重演，以前是jQuery，現(xiàn)在可能是react或vue。不同的框架有不同的應(yīng)用場(chǎng)景，殺雞不要用牛刀。本文將詳細(xì)介紹框架選型

?

框架與庫

　　庫(lib)具有以下三個(gè)特點(diǎn)：

　　1、是針對(duì)特定問題的解答，具有專業(yè)性；

　　2、不控制應(yīng)用的流程

　　3、被動(dòng)的被調(diào)用

　　框架(frameword)具有以下三個(gè)特點(diǎn)：

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

　　2、決定應(yīng)用程序的生命周期

　　3、一般來說，集成了大量的庫

　　由下圖所示，框架會(huì)在特定的時(shí)間要求程序執(zhí)行某段代碼。框架決定了什么時(shí)候調(diào)用庫，決定了什么時(shí)候要求代碼去執(zhí)行特定功能

　　而實(shí)際上，一個(gè)庫有時(shí)也可以稱之為框架，而庫里面集成的方法稱之為庫

　　框架和庫的區(qū)別不由實(shí)際大小決定，而由思考角度來決定。框架和庫實(shí)際上可以統(tǒng)稱為解決方案

?

解決方案

　　前端開發(fā)中的解決方案主要用于解決以下7個(gè)方面的問題：

　　1、DOM

　　2、Communication(通信)

　　3、Utililty(工具庫)

　　4、Templating(模板集成)

　　5、Component(組件)

　　6、Routing(路由)

　　7、Architecture(架構(gòu))

【why】

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

　　1、提高開發(fā)效率

　　2、可靠性高（瀏覽器兼容，測(cè)試覆蓋）

　　3、配備優(yōu)良的配套，如文檔、DEMO及工具等

　　4、代碼設(shè)計(jì)的更合理、更優(yōu)雅

　　5、專業(yè)性高

　　如果問題過于簡(jiǎn)單，或者備選框架的質(zhì)量和可靠性無法保證，再或者無法滿足業(yè)務(wù)需求，則不應(yīng)該選擇外部的框架。如果團(tuán)隊(duì)中已經(jīng)有相關(guān)的積累，就更不需要使用了

【how】

　　一般地，解決方案要實(shí)際開發(fā)中有以下3種使用方式：

　　1、開放式：基于外部模塊系統(tǒng)，并自由組合

　　2、半開放式：基于一個(gè)定制的模塊系統(tǒng)，內(nèi)部外部解決方案共存

　　3、封閉式：深度定制的模塊系統(tǒng)，很少需要引入外部模塊

?

DOM

　　接下來，將針對(duì)解決方案中提到的7個(gè)問題進(jìn)行分別介紹，首先是DOM

　　關(guān)于DOM，主要包括Selector(選擇器)、Manipulation(DOM操作)、Event(事件)、Animation(動(dòng)畫)這四個(gè)部分

　　DOM相關(guān)的解決方案主要用于提供以下操作　

　　1、提供便利的 DOM 查詢、操作、移動(dòng)等操作

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

　　3、提供瀏覽器特性檢測(cè)及 UserAgent 偵測(cè)

　　4、提供節(jié)點(diǎn)屬性、樣式、類名的操作

　　5、保證目標(biāo)平臺(tái)的跨瀏覽器支持

【常用方案】

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

　　jQuery是曾經(jīng)風(fēng)靡一時(shí)的最流行的前端解決方案，jQuery特有的鏈?zhǔn)秸{(diào)用的方式簡(jiǎn)化了javascript的復(fù)雜操作，而且使人們不再需要關(guān)心兼容性，并提供了大量的實(shí)用方法

　　zepto是jQuery的精簡(jiǎn)版，針對(duì)移動(dòng)端去除了大量jQuery的兼容代碼，提供了簡(jiǎn)單的手勢(shì)，部分API的實(shí)現(xiàn)方式不同

　　mootools源碼清晰易懂，嚴(yán)格遵循Command-Query(命令-查詢)的接口規(guī)范，沒有諸如jQuery的兩義性接口。還有一個(gè)不得不提的特點(diǎn)是，使用選擇器獲取的是DOM原生對(duì)象，而不是被包裝過的對(duì)象。而它支持的諸多方法則是通過直接擴(kuò)展DOM原生對(duì)象實(shí)現(xiàn)的，這也是它的爭(zhēng)議所在

　　相比較而言，最穩(wěn)妥的DOM解決方案是jQuery

【專業(yè)領(lǐng)域】

　　上面的解決方案用于解決DOM一般的通用問題。隨著技術(shù)的發(fā)展，DOM的專業(yè)領(lǐng)域出現(xiàn)一些小而精致的解決方案

　　1、手勢(shì)

　　Hammer.JS包括了常見手勢(shì)封裝（Tab、Hold、Transform、Swifp）并支持自定義擴(kuò)展

　　2、局部滾動(dòng)

　　iscroll.JS是移動(dòng)端position:fix + overflow:scroll的救星

　　3、高級(jí)動(dòng)畫

　　Velocity.JS可以復(fù)雜動(dòng)畫序列實(shí)現(xiàn)，不僅局限于 DOM

　　4、視頻播放

　　Video.JS類似原生 video 標(biāo)簽的使用方式，對(duì)低級(jí)瀏覽器使用 flash 播放器

通信

　　關(guān)于通信，主要包括XMLHttpRequest、Form、JSONP、Socket等?

　　通信相關(guān)的解決方案主要用于提供以下操作

　　1、處理與服務(wù)器的請(qǐng)求與相應(yīng)

　　2、預(yù)處理請(qǐng)求數(shù)據(jù)與響應(yīng)數(shù)據(jù) Error/Success 的判斷封裝

　　3、多類型請(qǐng)求，統(tǒng)一接口（XMLHttpRequest1/2、JSONP、iFrame）

　　4、處理瀏覽器兼容性

【常用方案】

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

　　Reqwest支持JSONP，穩(wěn)定性高，IE6+支持，CORS 跨域，Promise/A 支持

　　qwest代碼少、支持XMLHttpRequest2、CORS 跨域、支持高級(jí)數(shù)據(jù)類型（ArrayBuffer、Blob、FormData）

【專業(yè)領(lǐng)域】

　　對(duì)于實(shí)時(shí)性要求較高的需求可以使用socket.io，它實(shí)時(shí)性高，支持二進(jìn)制數(shù)據(jù)流，智能自動(dòng)回退支持，且支持多種后端語言

?

工具包

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

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

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

　　3、異步隊(duì)列及流程控制

【常用方案】

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

　　上面提到的shim，也是經(jīng)常聽到的一個(gè)詞，翻譯過來是墊片的意思。對(duì)于es5、es6等標(biāo)準(zhǔn)包括的一些新方法，由于瀏覽器兼容性不高，所以無法直接使用它們。這時(shí)，就需要在保證實(shí)現(xiàn)與規(guī)范一致的基礎(chǔ)上，來擴(kuò)展原型方法，這種做法就叫做shim。好處在于，實(shí)際上就是在使用javascript的語法，但不用去考慮低版本瀏覽器的兼容性問題

　　es5-shim 提供 ES3 環(huán)境下的 ES5 支持

　　es6-shim 提供 ES5 環(huán)境下的 ES6支持

　　underscore 提供兼容 IE6+ 的擴(kuò)展功能函數(shù)

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

?

模板

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

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

　　原理如下：輸入一段模板字符串，通過編譯之后 ，生成一段Function，通過Function的render或類render函數(shù)渲染輸入的數(shù)據(jù)data，輸出模板字符串，字符串通過innerHTML或類似的方式渲染成最后的DOM結(jié)構(gòu)。這類模板的問題在于通過字符串生成DOM之后就不再變化，如果在改變輸入的數(shù)據(jù)data，需要重新render，重新生成一個(gè)全新的DOM結(jié)構(gòu)，性能較差。但該模板可以在服務(wù)器端運(yùn)行

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

　　原理如下：將輸入的字符串模板通過innerHTML轉(zhuǎn)換為一個(gè)無狀態(tài)DOM樹，然后遍歷該節(jié)點(diǎn)樹，去抓取關(guān)鍵屬性或語句，來進(jìn)行相關(guān)的綁定，進(jìn)而變成了有狀態(tài)的DOM樹，最終導(dǎo)致DOM樹會(huì)與數(shù)據(jù)模型model進(jìn)行綁定。這類模板的特點(diǎn)是修改數(shù)據(jù)時(shí)，會(huì)使有狀態(tài)的DOM樹實(shí)時(shí)更新，運(yùn)行時(shí)性能更好，也會(huì)保留 DOM 中的已有事件

　　3、活動(dòng)模板(Living Template)，解決方案包括(RegularJS、RactiveJS、htmlbar)

　　原理如下：活動(dòng)模板融合了字符串模板和DOM模板的技術(shù)，模板字符串string通過自定義的解析器DSL-based Parse解析成AST(抽象語法樹)，通過遍歷AST，使用createElement()、setAttribute()等原生DOM方法，生成DOM樹，最終導(dǎo)致DOM樹會(huì)與數(shù)據(jù)模型model進(jìn)行綁定。由于其內(nèi)部完全不使用innerHTML，所以安全性較高

?

組件

　　組件(Component)的主要職責(zé)包括以下：

　　1、提供基礎(chǔ)的 CSS 支持

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

　　3、提供聲明式的調(diào)用方式（類似 Bootstrap）

【常用方案】

　　常用的組件解決方案有Bootstrap、Foundation等，兩者具有移動(dòng)端first的流式柵格系統(tǒng)，由sass組織，可定制UI

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

　　Foundation在國內(nèi)知名度不高

?

路由

　　路由在單頁系統(tǒng)中非常重要，主要職責(zé)如下

　　1、監(jiān)聽 URL 變化，并通知注冊(cè)的模塊

　　2、通過 JavaScript 進(jìn)行主動(dòng)跳轉(zhuǎn)

　　3、歷史管理

　　4、對(duì)目標(biāo)瀏覽器的兼容性支持

　　無論什么框架，在完成配置之后，內(nèi)部都有如下圖所示的類似的路由表。

【常用方案】

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

　　page.JS類似 Express.Router 的路由規(guī)則的前端路由庫

　　Director.JS可以前后端使用同一套規(guī)則定義路由

　　Stateman處理深層復(fù)雜路由的獨(dú)立路優(yōu)庫

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

?

架構(gòu)

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

　　市面上，有很多架構(gòu)模式，包括MVC、MVVM、MV*等

　　架構(gòu)的職責(zé)主要包括以下：

　　1、提供一種范式幫助（強(qiáng)制）開發(fā)者進(jìn)行模塊解耦

　　2、視圖與模型分離

　　3、容易進(jìn)行單元測(cè)試

　　4、容易實(shí)現(xiàn)應(yīng)用擴(kuò)展

　　以MVVM為例，如下圖所示。它包括Model(數(shù)據(jù)層或模型層)、View(視圖層)、ViewModel(控制層)

　　Model(數(shù)據(jù)層或模型層)表示數(shù)據(jù)實(shí)體，它們用于記錄應(yīng)用程序的數(shù)據(jù)

　　View(視圖層)用于展示界面，界面是數(shù)據(jù)定制的反映，它包含樣式結(jié)構(gòu)定義以及VM享有的聲明式數(shù)據(jù)以及數(shù)據(jù)綁定

　　ViewModel(控制層)是View與Model的粘合，它通過綁定事件與View交互并可以調(diào)用Service處理數(shù)據(jù)持久化，也可以通過數(shù)據(jù)綁定將Model的變動(dòng)反映到View中

　　它們的關(guān)系是：各部分之間的通信，都是雙向的；View 與 Model 不發(fā)生聯(lián)系，都通過 ViewModel 傳遞；View 非常薄，不部署任何業(yè)務(wù)邏輯，稱為"被動(dòng)視圖"（Passive View），即沒有任何主動(dòng)性，而ViewModel非常厚，所有邏輯都部署在那里

【SPA】

　　要特點(diǎn)注意的是，MV* !==?SPA(單頁系統(tǒng))

　　SPA應(yīng)用程序的邏輯比較復(fù)雜，需要一種模式來進(jìn)行解耦，但并不一定是MV*模式

?

最后

　　最后推薦一個(gè)框架選型網(wǎng)站https://www.javascripting.com，該網(wǎng)站根據(jù)不同的需求的選擇，給出當(dāng)下流行的框架選型

原文地址：http://www.cnblogs.com/xiaohuochai/p/7041595.html

---

.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺(tái)或掃描二維碼關(guān)注

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的前端框架选型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。