趙商 重慶工程學(xué)院移動互聯(lián)工程研究中心

Web前端開發(fā)從曾經(jīng)的美工到現(xiàn)在的獨(dú)立熱門行業(yè)，短短的幾年時間，隨著JS或者叫ES的熱門而興起，作為一個高校在職老師，很多同學(xué)都問過我類似的問題，前端是什么，前端比后端如何，前端好學(xué)么，前端就業(yè)如何，如今我就用我對web前端開發(fā)的理解和體會，淺淺談?wù)劇?/p>

首先我們來看看整個Web前端的開發(fā)狀況，Web前端應(yīng)用發(fā)展的歷史大概經(jīng)歷了四個階段：第一個階段使用的是簡單的靜態(tài)頁面；第二個階段使用得是JSP、ASP、PHP等動態(tài)腳本語言；第三個階段是Web2.0階段，其核心技術(shù)是AJAX和JQUERY；第四個階段是基于ES6的各種框架的SPA應(yīng)用。

整個前端開發(fā)技術(shù)棧我們可以分為前端語言，前端MVC框架，UI框架，模塊化和打包，自動化構(gòu)建，包管理，測試工具共七個部分。

1. 前端語言

從ES6或者說ES2015開始，JavaScript語言本身的標(biāo)準(zhǔn)化和發(fā)展進(jìn)入劃時代的階段。除了一些新的語法糖，如胖箭頭、class關(guān)鍵字等，讓JS代碼更加清爽外，新的extend繼承方式、let，const變量等特性的引入則讓JS更加像一門“正?！钡恼Z言。

異步操作似乎是JavaScript規(guī)范一直在孜孜解決的問題，從最早的回調(diào)函數(shù)，到Promise，到Generator函數(shù)，再到async，這些新特性一方面解決了回調(diào)地獄問題，另外一方面也讓代碼更加符合人類的串行思維方式。如果覺得Promise這種異步處理方式滿足不了復(fù)雜的應(yīng)用場景，可以采用RxJS。RxJS是響應(yīng)式編程的庫，基于流式編程使得編寫異步代碼更加容易。

當(dāng)然有些瀏覽器始終落后于時代，如IE，不支持ES5以后的JavaScript新特性，但好在我們有Babel在，盡管放手使用最新的ES特性。將Babel串到你的構(gòu)建流程中，它會將新的特性轉(zhuǎn)化為瀏覽器支持更好的ES5代碼。

2.前端MVC框架

通常前端技術(shù)選型最核心的決策點(diǎn)就是所謂的前端MVC框架，目前熱度最高的三大前端框架是Angular（2.0+）、React和Vue。三者都采用了組件化的思想，組件化的將html、js、css組織在一起。

Angular是由Google推出的基于TypeScript的MVVM框架，視圖和模型雙向綁定，通過指令增強(qiáng)模板的表達(dá)能力，同時可以自定義組件化的指令，支持依賴注入、注解。由于策略上的問題，Angular2.0與AngularJS 1.0不同，因此，近兩年Angular的活躍度有所下降，但毫無疑問它是一個重量級的企業(yè)級框架。

React由Facebook主推，最顯著的特點(diǎn)是一切以JS為中心，HTML和CSS都由JS代碼生成，因而還出現(xiàn)了一種新的語法：JSX。React實(shí)現(xiàn)了Virtual DOM，在DOM變化的場景下，有不錯的表現(xiàn)。另外，React本身并不是一個大而全的框架，有自己獨(dú)有的狀態(tài)管理方式Redux。

Vue是三者之中最新、最輕量的一個框架，由原google程序員尤雨溪發(fā)起，也是主要關(guān)注視圖部分，既支持雙向綁定也可以單向綁定。Vue既有Angular的模板，又有React的Virtual Dom，性能表現(xiàn)在三者中最好。Vue提供了自己的Vuex做狀態(tài)管理。

值得一提的是，上面三個主流框架都有對應(yīng)的移動端方案，比如Angular對應(yīng)的Ionic，React的React Native以及Vue對應(yīng)的Weex。

3.UI框架

UI框架可以分為CSS框架、CSS預(yù)處理工具、UI控件庫、數(shù)據(jù)可視化庫等等。

所謂CSS框架其實(shí)也就是提前寫好的一些CSS，只要在你的HTML中加上對應(yīng)的類，就能展現(xiàn)出CSS應(yīng)用的效果。CSS框架雖然也很多，但是影響力比較大的仍舊是老牌的Bootstrap、Semantic-ui等，從CSS發(fā)展的趨勢看，移動優(yōu)先，響應(yīng)式布局，支持網(wǎng)格布局和Flexbox技術(shù)，這些是最新CSS框架著力發(fā)展的方向。

CSS預(yù)處理工具的主要目的是彌補(bǔ)CSS語法不夠強(qiáng)大，解決書寫啰嗦等問題。目前最主流的三個預(yù)處理器是SASS/SCSS、LESS和Stylus，主要特性是提供了變量、函數(shù)和mixin、import以及一些邏輯控制語法等。

UI控件庫提供諸如 Grid、Calendar、Panel等Web控件，常見的如Ext JS、jQuery UI、EasyUI等。除了基礎(chǔ)控件庫，還有動畫庫如Popmotion，圖標(biāo)庫如Font Awesome等。

數(shù)據(jù)可視化庫提供各種統(tǒng)計圖表，如餅狀圖，折線圖等，比較常用是Highcharts、Echarts和C3。如果現(xiàn)有庫還不夠用，可以考慮基于D3自己畫。

4.模塊化和打包

一開始，Web應(yīng)用還沒有這么復(fù)雜，JavaScript根本沒有模塊化的概念，算得上封裝的只是function和object，立即執(zhí)行函數(shù)（IIFE）達(dá)到了封裝私有變量的目的，避免了全局變量受到文件內(nèi)變量的污染。隨著前端應(yīng)用的發(fā)展迫使人們開始考慮模塊化的問題。模塊系統(tǒng)將互相依賴的多個文件和目錄拆分，所有代碼都可以按需加載并彼此訪問。

最早，伴隨著node.js的崛起，CommonJS規(guī)范成了JS模塊化的規(guī)范。但是由于其采用同步加載的方式，所以并不適合Web應(yīng)用的模塊化。后來，AMD（異步模塊定義）成為瀏覽器端模塊加載的規(guī)范，比較流行的庫是RequireJS。ES6出現(xiàn)之后，JavaScript語言本身終于支持模塊化了。不需要將所有代碼都放在一個IIFE或回調(diào)中，只需要在模塊中聲明需要的內(nèi)容，所有的聲明都被限定在模塊的作用域中，對所有腳本和模塊全局不可見，然后將需要暴露的模塊資源使用export關(guān)鍵字導(dǎo)出，當(dāng)其它模塊依賴此模塊時再通過import關(guān)鍵字導(dǎo)入。在不遠(yuǎn)的將來，ES內(nèi)置的模塊化將取代第三方庫。

5. 自動化構(gòu)建

寫完代碼，在發(fā)布前，還需要進(jìn)行構(gòu)建，比如使用了TypeScript等方言，需要用Babel transpile到標(biāo)準(zhǔn)的ES5，如果用到CSS預(yù)處理工具如SASS，需要從.scss文件生成.css文件，進(jìn)一步，為了提高前端加載效率，可能需要將js、css等文件打包壓縮，生成雪碧圖等等。grunt和gulp都是前端的自動化構(gòu)建工具，grunt通過配置驅(qū)動，gulp是代碼流式的處理方式，兩者都有大量的插件支持各種任務(wù)。比較而言，gulp更加簡單易用，上手更快，要優(yōu)于grunt。然而，由于webpack等同樣具備自動化構(gòu)建功能的打包工具的興起，其他自動化構(gòu)建工具現(xiàn)在的作用不如以前了。

6.包管理

曾經(jīng)，NPM是Node模塊的管理器，而Bower是前端模塊管理器，前后端包管理分工明確。但是經(jīng)過幾年的發(fā)展，NPM逐漸有一統(tǒng)JavaScript包管理的趨勢，大多數(shù)前端模塊都能在NPM上找到。

7. 測試工具（用于單元測試和E2E測試）

根據(jù)功能和作用進(jìn)行分類：

提供測試環(huán)境（Mocha，Jasmine，Jest，Karma）

提供測試結(jié)構(gòu)（Mocha，Jasmine，Jest，Cucumber）

提供斷言功能（Chai，Jasmine，Jest，Unexpected）

生成和比較組件和數(shù)據(jù)結(jié)構(gòu)的快照，以確保以前運(yùn)行的更改（Jest，Ava）

提 供 mocks，spies 和 stubs（Sinon，Jasmine，enzyme，Jest，testdouble）

生成代碼覆蓋率報告（Istanbul，Jest）

提供一個瀏覽器或類似瀏覽器的環(huán)境，控制他們的場景執(zhí)行（Protractor，Nightwatch，Phantom，Casper）

最后通過從以上這些點(diǎn)，我個人做下對于前端開發(fā)的特性總結(jié)：

1.雜而難，難度甚至超過了一般的后臺開發(fā)，更新變化快。

2.web前端開發(fā)正在向響應(yīng)式和移動端方向大步邁進(jìn)。

3.做前端開發(fā)其實(shí)就是做編程，不光要有后端開發(fā)的特性，同時還要有設(shè)計師的特性。

所以對于勵志于從事前端開發(fā)的朋友或者同學(xué)來講，如果打定決心想在這條線上走的更遠(yuǎn)，那么就要抱著啃透它的決心，砥礪前行。