Web前端框架與類庫(kù)的思考
說(shuō)起前端框架，我也是醉了?，F(xiàn)在去面試或者和同行聊天，動(dòng)不動(dòng)就這個(gè)框架碉堡了，那個(gè)框架好犀利。
當(dāng)然不是貶低框架，只是有一種殺雞焉用牛刀的感覺。網(wǎng)站技術(shù)是為業(yè)務(wù)而存在的，除此毫無(wú)意義，框架也是一樣。在技術(shù)選型和架構(gòu)設(shè)計(jì)當(dāng)中，脫離網(wǎng)站業(yè)務(wù)發(fā)展的實(shí)際，一味的追求時(shí)髦新技術(shù)，可能會(huì)適得其反，將網(wǎng)站發(fā)展引入崎嶇小道。就好像一個(gè)日均pv只有幾百的小型電商網(wǎng)站，卻要大喊“某寶就是這么搞的”，然后搭建應(yīng)用服務(wù)器集群，使用分布式文件系統(tǒng)和分布式數(shù)據(jù)庫(kù)系統(tǒng)...等巴拉巴拉的一堆用來(lái)處理高并發(fā)，海量數(shù)據(jù)訪問(wèn)的手段。我想說(shuō)，有意義嗎？
前端框架的理解誤區(qū)
網(wǎng)站的價(jià)值在于它能為用戶提供什么價(jià)值，在于網(wǎng)站能做什么，而不在于它是怎么做的，所以在網(wǎng)站還很小的時(shí)候就去追求網(wǎng)站的架構(gòu)框架是舍本逐末，得不償失的。前端框架同理，如果是一個(gè)簡(jiǎn)單的頁(yè)面型產(chǎn)品，應(yīng)用只是依賴服務(wù)器來(lái)生成Web頁(yè)面和視圖，并且只需要使用一些簡(jiǎn)單的Javascript或者JQuery來(lái)使應(yīng)用更加具有互動(dòng)性，那么一個(gè)JQuery前端類庫(kù)就可以了，真的沒必要用上一些高大上的框架。
當(dāng)然，框架的確是很有用的，重點(diǎn)是我們要知道什么時(shí)候該用什么框架。大公司大項(xiàng)目的經(jīng)驗(yàn)和成功模式固然重要，值得學(xué)習(xí)借鑒，但我們不能因此變得盲從。只有深刻去理解前端框架，知道什么時(shí)候該用什么什么框架解決什么問(wèn)題，才能有的放矢，直擊要害。
前端框架與前端類庫(kù)的區(qū)別
使用框架前，我覺得很重要的一點(diǎn)是弄清類庫(kù)（諸如JQuery）和框架（諸如angularJS)的區(qū)別在何處。
簡(jiǎn)單而言，類庫(kù)，解決的是代碼或者是模塊級(jí)別的復(fù)用或者對(duì)復(fù)雜度的封裝問(wèn)題，例如將一個(gè)解決復(fù)雜問(wèn)題的功能模塊封裝成一個(gè)函數(shù)，提供一個(gè)簡(jiǎn)單的接口。庫(kù)它是一種工具，它提供了很多封裝好的方法，用與不用取決于我們自身，即使用了也不會(huì)影響我們呢的代碼結(jié)構(gòu)。
而框架，更多的是對(duì)模式級(jí)別的復(fù)用和對(duì)程序組織的規(guī)范。這里的模式是指比如MVC，為了實(shí)現(xiàn)M和V的解耦，把復(fù)雜的耦合關(guān)系由經(jīng)常變化的業(yè)務(wù)代碼轉(zhuǎn)移到不經(jīng)常變化的框架內(nèi)部消化。是面向一個(gè)領(lǐng)域來(lái)提供一套解決方案，提高開發(fā)效率，如果我們選擇了使用某框架，就應(yīng)該遵循該框架所規(guī)定的規(guī)則。
二者最主要的區(qū)別是：JQuery以DOM操作為中心，框架，準(zhǔn)確來(lái)說(shuō)是MVC框架，是以模型（model）為中心，而DOM操作是附加的。所以，以模型為中心最終達(dá)到的目的是帶來(lái)一整套工作流程的變更，使得后臺(tái)工程師可以編寫前端的模型代碼，把后臺(tái)與前端打通，交互設(shè)計(jì)師處理UI跟模型的互動(dòng)關(guān)系，UI設(shè)計(jì)師可以專注、無(wú)障礙的處理HTML源碼，把它們以界面模板的形式提交給交互工程師。這一整套協(xié)作機(jī)制能大大提高開發(fā)效率。使用MVC框架使得前端任務(wù)更好的被解耦。
前端MVC框架思想
我們知道，傳統(tǒng)的MVC模式將一個(gè)應(yīng)用劃分為——模型層（model）、視圖層（view）、控制層（controller）。他們?cè)趹?yīng)用系統(tǒng)中擔(dān)當(dāng)不同的角色，完成不同的任務(wù)。
- Model：即數(shù)據(jù)模型，用來(lái)包裝和應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)或者對(duì)數(shù)據(jù)進(jìn)行處理，模型可以直接訪問(wèn)數(shù)據(jù)。
- View：視圖用來(lái)有目的顯示數(shù)據(jù)，在視圖中一般沒有程序上的邏輯，為了實(shí)現(xiàn)視圖上的***功能，視圖需要訪問(wèn)它監(jiān)視的數(shù)據(jù)模型。
- Controller：控制器調(diào)控模型和視圖的聯(lián)系，它控制應(yīng)用程序的流程，處理事件并作出響應(yīng)，事件不僅僅包括用戶的行為還有數(shù)據(jù)模型上的改變。通過(guò)捕獲用戶事件，通知模型層作出相應(yīng)的更新處理，同時(shí)將模型層的更新和改變通知給視圖，使得視圖作出相應(yīng)改變。因此控制器保證了視圖和模型的一致性。
那么在前端中的表現(xiàn)。前端MVC中各部分的職責(zé)：
我對(duì)前端的View的理解是，與頁(yè)面上元素直接相關(guān)的部分都屬于View。包括html，CSS和一部分直接控制頁(yè)面元素的JS?？梢詮腗odel中得到數(shù)據(jù)，并將其顯示到頁(yè)面上。而關(guān)于數(shù)據(jù)的變更與請(qǐng)求，則統(tǒng)統(tǒng)交給Controller處理。
那么Controller呢？作為Model和View的粘合劑，Controller將View方面的請(qǐng)求轉(zhuǎn)發(fā)給合適的Model，在必要時(shí)也會(huì)去更新View。而Controller本身也可以作為Model的觀察者，獲取Model的變更。而作為Controller本身，就不應(yīng)該有涉及到頁(yè)面元素的代碼了。
***談?wù)凪odel，與后端的溝通、AJAX請(qǐng)求以及對(duì)數(shù)據(jù)的處理都屬于Model的工作。Model本身不知道誰(shuí)是View，誰(shuí)是Controller。它只提供一些方法供View和Controller調(diào)用，并且將變更通知給它的觀察者View或Controller。顯然，Model與頁(yè)面元素之間也解耦了。
雖然基于MVC模型的框架之間也有很多不同之處，但是總體而言，Model負(fù)責(zé)保存vier需要的數(shù)據(jù)以及數(shù)據(jù)處理邏輯，例如讀寫，更新，刪除，驗(yàn)證，轉(zhuǎn)換等。View負(fù)責(zé)接收并顯示Model提供的數(shù)據(jù)以及接收用戶的輸入，并且響應(yīng)事件，Model更新后及時(shí)將更新反饋回用戶。Controller處理業(yè)務(wù)邏輯和事件邏輯。
知己知彼，對(duì)癥下藥
在前端框架和類庫(kù)越來(lái)越豐富的今天。選擇一款對(duì)的框架或類庫(kù)就顯得尤為重要了，我覺得沒必要盲目跟風(fēng)，看見什么框架火就屁顛屁顛跑去啃一個(gè)星期，然后因?yàn)轫?xiàng)目工作上用不到，幾個(gè)月之后又全忘光了。
所以我覺得重要的是把基礎(chǔ)打扎實(shí)，重點(diǎn)是去了解各個(gè)類庫(kù)與框架的作用，某類框架著重用于解決什么問(wèn)題，然后在項(xiàng)目需要用到時(shí)候再去研讀API才是上策。
***，我們要清楚MVC在前端開發(fā)中的應(yīng)用具有的局限性，簡(jiǎn)單的項(xiàng)目如果使用MVC框架會(huì)可能導(dǎo)致項(xiàng)目變得更加復(fù)雜。當(dāng)然隨著Web前端的復(fù)雜度不斷增加，前端MVC框架的不斷發(fā)展，相信在未來(lái)的應(yīng)用軟件類復(fù)雜產(chǎn)品當(dāng)中，MVC框架一定會(huì)給前端工作帶來(lái)效率上的飛躍。
以上只是我對(duì)前端框架和類庫(kù)一些淺顯的認(rèn)識(shí)，不喜勿噴，更希望您能提出更好的學(xué)習(xí)框架和類庫(kù)的方法。共同進(jìn)步，共同學(xué)習(xí)。
文中若有技術(shù)層面的錯(cuò)誤還請(qǐng)斧正，誤人子弟實(shí)乃罪過(guò)。
