?????? 每一種技術(shù)的出現(xiàn)都是為了解決某一特定的問題，而一種技術(shù)的流行興起除了天時地利便是因為它較好的解決了工程師們普遍都遇到的問題，每一種技術(shù)的出現(xiàn)、興起、更新、淘汰能在一方面展現(xiàn)前端的發(fā)展歷程并在一定程度上展現(xiàn)其未來的發(fā)展趨勢，技術(shù)的興衰并不代表技術(shù)的優(yōu)劣，沒有最好的技術(shù)，只有最符合項目需求的技術(shù)。

?????? Ajax的出現(xiàn)

??? 在最初還沒有前端的時候，網(wǎng)站的開發(fā)全是由一個工程師負(fù)責(zé)，他們不僅要負(fù)責(zé)實現(xiàn)底層的服務(wù)支持，還要負(fù)責(zé)將數(shù)據(jù)拼接進(jìn)模板并返回給瀏覽器，瀏覽器解析模板，將網(wǎng)頁展示出來。早期的前端便是負(fù)責(zé)寫模板的。后來，由于ajax的橫空出世，使得前端能夠獨立拿到數(shù)據(jù)，以及其促進(jìn)的web2.0的產(chǎn)生、瀏覽器性能的提升，前端的世界便由此豐富起來，對前端工程師的要求也越來越高。前后端分離后，前端人員需要維護(hù)自己的前端項目，而前端項目的開發(fā)模式、開發(fā)流程隨著技術(shù)的變遷而不停的改變。

UI框架的出現(xiàn)與jQuery的崛起

剛開始時前端工程師開發(fā)的流程是這樣的：div+css進(jìn)行網(wǎng)頁頁面的布局搭建，使用ajax獲取后端數(shù)據(jù)，使用javascript實現(xiàn)邏輯功能交互，掌握了這些基礎(chǔ)的技術(shù)便能勝任前端的工作。不過，網(wǎng)頁布局(html+css)依然是很麻煩的事，便出現(xiàn)了一系列類似于bootstrap這樣的UI框架，能夠快速完成網(wǎng)頁布局，讓開發(fā)者將更多的精力放在業(yè)務(wù)邏輯上。各大瀏覽器對css與js的兼容性不同，我們常常不得不寫多套來兼容不同的瀏覽器，這也是及其痛苦的事，這一時期不得不提jQuery庫，它不僅消除了瀏覽器之間的差異，還提供了更為優(yōu)雅簡潔的選擇器，簡化了DOM、樣式和屬性操作以及綁定事件、事件委托等操作，極大影響了前端開發(fā)風(fēng)格，深受前端程序猿的喜愛，帶給前端的影響是空前的，不過jQuery只是簡化了前端的很多繁瑣的操作，并沒有給前端帶來質(zhì)的改變，這種流程式的開發(fā)模式依然有明顯的弊端，jQuery的各種優(yōu)點也漸漸有了更好的替代品，jQuery便由此走向沒落，但并不是意味著其過時了，現(xiàn)在大部分網(wǎng)站依然使用著jQuery。

模塊化與組件化

最初前端的開發(fā)模式：html+css搭建布局，使用ajax獲取數(shù)據(jù)，js的進(jìn)行DOM操作，局部頁面發(fā)生更新，這樣的操作反反復(fù)復(fù)，這種開發(fā)模式不僅效率低下、團(tuán)隊分工合作也常出現(xiàn)各種問題(常見的變量污染)、代碼復(fù)用性低而耦合度高使得項目迭代推進(jìn)難度較高，組件化、模塊化開發(fā)的方式便應(yīng)運而生，模塊化和組件化能夠讓我們有序的對項目、功能進(jìn)行拆分、設(shè)計、組織，便于開發(fā)、維護(hù)和團(tuán)隊的分工，提高工作效率。

模塊化

最開始開發(fā)時，我們會針對每一個業(yè)務(wù)編寫腳本，當(dāng)遇到了功能一樣的業(yè)務(wù)，復(fù)制粘貼是常有的事，這種流程式的開發(fā)使得代碼的耦合度很高，代碼維護(hù)、更新難度很大，模塊化，見字知意，便是化整為零，將整體分成許多零散的卻相互關(guān)聯(lián)模塊，舉個例子，一輛汽車由很多零件組合而成，制造零件的過程便是模塊化開發(fā)的過程，而每一個零件相互獨立卻又相互依賴，我們希望的是每一個子零件能夠獨立的完成特定的功能，只負(fù)責(zé)一項任務(wù)(高內(nèi)聚)，每個子零件之間的聯(lián)系盡可能的少(低耦合)，我們不希望車燈壞了，而使得整個車的其他功能都癱瘓，這便是降低代碼耦合度的意義。模塊化是一種思想，每個人對其理解都不一樣。模塊化之前(制造零件之前)，我們要將大整體抽離成一個個模塊，在做零件之前，我們至少得知道零件應(yīng)該有的樣子，而抽離的方式視人而定，只要是秉著低耦合高內(nèi)聚復(fù)用性高對提升開發(fā)效率有裨益的便是好的，我們常常按業(yè)務(wù)功能劃分，將每一個獨立功能封裝成獨立的模塊(降低耦合)，給模塊之間的通信聯(lián)系留以適當(dāng)?shù)慕涌?盡可能少)，這種方式便能一定程度上降低耦合，且封裝本身就是為了提高代碼的復(fù)用性。

簡單的說模塊化就是對特定功能進(jìn)行封裝的代碼，能夠在需要的地方引用加載進(jìn)來直接使用，其最大的意義就在于降低代碼耦合提高復(fù)用。瀏覽器在進(jìn)行js腳本下載時會停止對文檔的解析，那么如果腳本過多、過重，瀏覽器則可能失去響應(yīng)，且一個項目的中我們往往會引入很多js腳本文件，腳本之間往往是有依賴關(guān)系的，這便要求我們進(jìn)行模塊化開發(fā)必須要遵循一定的規(guī)范，js有三大的模塊化開發(fā)規(guī)范：AMD、CMD以及node服務(wù)端使用的CommonJs，此外，ES6中推出的(export、import)方法是我們實際開發(fā)中常用的模塊化方法。AMD與CMD之間最大的差別便是對依賴的執(zhí)行時間，AMD提倡依賴前置，先加載依賴再執(zhí)行本模塊代碼，CMD則是就近原則，在需要時再執(zhí)行依賴。不過，無論AMD還是CMD，已經(jīng)過時了。在實際開發(fā)中，我們都不可能再引入require.js或sea.js進(jìn)行開發(fā)，我們常用ES6提供的export與import來進(jìn)行模塊的導(dǎo)入和導(dǎo)出。

組件化

個人而言，組件也是對模塊化的一種實現(xiàn)，且其比之前定義的模塊化做了更多的事，組件將視圖UI與邏輯集合起來作為模塊，除此之外，組件擁有自己的生命周期，能夠在其初始化、狀態(tài)更新(運行中)以及銷毀階段做相應(yīng)操作，還擁有自身維護(hù)的數(shù)據(jù)狀態(tài)，是一種很好的模塊的抽離封裝的實現(xiàn)，組件化的開發(fā)方式也是現(xiàn)在前端開發(fā)的主流趨勢。而之前提及的模塊化規(guī)范AMD與CMD最初的目的主要是解決js依賴加載順序的問題，且其所謂的模塊化只是針對業(yè)務(wù)邏輯而言，將業(yè)務(wù)邏輯進(jìn)行拆分，分開管理，相對簡單，每一模塊只是對某一特定邏輯的封裝，直接引入使用即可。不過，無論是模塊化還是組件化，都是工程師們?yōu)榱颂岣唛_發(fā)效率、降低項目維護(hù)成本做的一次次嘗試。

Vue與React

目前對組件化開發(fā)實現(xiàn)的很好的框架也是現(xiàn)在前端主流的框架有React、Vue以及Angular，Angular作為三大框架中最早的框架，卻由于太過笨重，已被越來越多的前端工程師舍棄，React以及Vue則是越來越火熱。他們不僅僅實現(xiàn)了組件化的開發(fā)模式，更是給前端開發(fā)模式帶來質(zhì)的飛越，很多新的概念被提出，虛擬Dom、生命周期、數(shù)據(jù)雙向綁定、單向數(shù)據(jù)流，不僅如此，圍繞Vue以及React產(chǎn)出了更多的優(yōu)秀框架、技術(shù)，vuex、redux、mobx等專門進(jìn)行數(shù)據(jù)狀態(tài)管理，以及針對vue的element-UI與React的antd等優(yōu)秀組件庫，Vue與React的社區(qū)生態(tài)也在越來越完善。Vue與react為前端做出的貢獻(xiàn)讓前端開發(fā)更有系統(tǒng)性、組織性。除此之外，React-Native與Weex框架的出現(xiàn)，讓前端擁有了開發(fā)原生應(yīng)用的能力，使得前端不得不重新定義。

Node.js

NodeJs已經(jīng)成為提高一個前端工程師競爭力最有力的殺手锏，是前端轉(zhuǎn)為全棧工程師的捷徑。node是基于谷歌瀏覽器V8引擎開發(fā)，能夠運行javascript的服務(wù)端，node最初是為了解決服務(wù)端高并發(fā)的問題而出現(xiàn)的，而對于前端人員，我們則常使用node作為前后端之間的中間層來提高瀏覽器性能。我們知道瀏覽器的性能是很有限的，如果瀏覽器運行的任務(wù)過多，網(wǎng)頁則會出現(xiàn)卡頓或者卡死的現(xiàn)象，為了提高網(wǎng)頁運行的性能，我們在很多方面都做了很多的嘗試，雪碧圖整合、靜態(tài)資源cdn托管、盡可能的減少重繪回流操作(與瀏覽器渲染機制有關(guān))、減少高頻次dom操作(像函數(shù)節(jié)流與防抖)、壓縮js和css文件等等，無非是圍繞減少http請求次數(shù)和時間以及減少dom有關(guān)的操作(提一句，瀏覽器的性能極大的受到dom操作次數(shù)的影響，不過vue與react用虛擬dom解決了這一問題)。服務(wù)端的性能是遠(yuǎn)高于瀏覽器的，所以我們盡可能多的將復(fù)雜的任務(wù)放在服務(wù)端運行，減輕瀏覽器運行的任務(wù)的復(fù)雜度。而node作為前后端的中間層，我們常利用它做這些操作：node將瀏覽器需要發(fā)送的請求進(jìn)行合并，代替瀏覽器將請求發(fā)送給后端，再將后端返回的復(fù)雜數(shù)據(jù)進(jìn)行整合，渲染進(jìn)html模板，最后將渲染完整的html結(jié)構(gòu)模板返回給瀏覽器(利于SEO優(yōu)化)，這種node直接輸出給瀏覽器以html結(jié)構(gòu)渲染頁面的方式，極大減少了瀏覽器的http請求數(shù)量和請求時間且不需要瀏覽器再去拼湊頁面，對于大型網(wǎng)站的性能提升是很大的，現(xiàn)在有不少公司招聘node工程師，專程做前后端中間層。

npm與webpack/gulp

前端現(xiàn)在開發(fā)離不開的最火熱的工具無疑是npm(node提供的包管理工具)與webpack打包工具了，我們現(xiàn)在日常開發(fā)離不開這兩個工具來進(jìn)行項目搭建和打包。