【前端神秘的面紗】

對(duì)后端開(kāi)發(fā)來(lái)說(shuō)，前端是神秘的，

眼花繚亂的技術(shù)，繁多的框架，

如果你還停留在前端等于只用jquery做開(kāi)發(fā)，那么你out了，

本文從Java的角度簡(jiǎn)述下目前前端流行的一些框架。

水平有限，歡迎指正。

【nodejs】

官網(wǎng)：

https://nodejs.org/

簡(jiǎn)介：

對(duì)前端來(lái)說(shuō)極其重要的一個(gè)“框架”，簡(jiǎn)直可以說(shuō)是開(kāi)天辟地

類(lèi)比Java中：JVM

詳述：

就前端來(lái)說(shuō)nodejs具有劃時(shí)代的意義，

做前端的沒(méi)用過(guò)nodejs都不好意思說(shuō)自己是前端，

做后端的沒(méi)聽(tīng)過(guò)nodejs，

或者說(shuō)不出nodejs和java的優(yōu)缺點(diǎn)，也不是一個(gè)合格的后端。

nodejs不是一個(gè)js框架，千萬(wàn)不要認(rèn)為是類(lèi)似jquery的框架，

nodejs是js運(yùn)行時(shí)，運(yùn)行環(huán)境，類(lèi)比java中jvm，

java的開(kāi)端是什么，無(wú)疑是jvm，自從有了jvm，java才能吹牛說(shuō)自己是“一次編寫(xiě)處處運(yùn)行”，

不管你是windows還是linux，只要安裝了對(duì)應(yīng)版本的jvm都可以運(yùn)行.class文件。

同樣nodejs的作用和jvm的一樣一樣的，也是js的運(yùn)行環(huán)境，不管是你是什么操作系統(tǒng)，

只要安裝對(duì)應(yīng)版本的nodejs，那你就可以用js來(lái)開(kāi)發(fā)后臺(tái)程序。

這具有劃時(shí)代的意義，意味著一直以來(lái)只能在瀏覽器上玩來(lái)玩去的js，可以做后端開(kāi)發(fā)了，

從有了nodejs后就催生出一大批用js做后臺(tái)開(kāi)發(fā)的前端人員，這部分人員就是偏前端的“全棧程序員”。

記住，nodejs是和jvm同等地位的js運(yùn)行環(huán)境，打開(kāi)了前端人員走向后端的道路。

【js mvc框架】

相關(guān)框架：

框架太多，詳見(jiàn)下面兩篇文章

私人定制，十款最佳Node.js MVC框架

基于NodeJS的14款Web框架

類(lèi)比Java中的：

ssh1（struts1+spring+hibernate），ssh2（struts2+spring+hibernate），ssm（springmvc+spring+mybatis）

詳述：

上面說(shuō)到nodejs打開(kāi)了前端開(kāi)發(fā)人員開(kāi)發(fā)后端的大門(mén)，而且nodejs類(lèi)比jvm，

那么學(xué)習(xí)java的人都知道，學(xué)習(xí)完jvm（基礎(chǔ)）后該學(xué)什么了？

對(duì)，框架，

java中有哪些框架，正如上面所說(shuō)，ssh1，ssh2，ssm等等，

這些框架都mvc框架。

既然nodej都有了，jvm出現(xiàn)了，那接下來(lái)就是js大神開(kāi)始封裝mvc框架，正如java大神開(kāi)始封裝mvc框架一樣，

相對(duì)java流行了幾種框架，nodejs對(duì)應(yīng)的mvc框架就多的多了，

詳見(jiàn)上面兩篇文章，足夠讓你看的眼花繚亂。

其中比較有名的是expressjs。

記住，當(dāng)你看到這些js框架的時(shí)候，微微一笑，原來(lái)就是寫(xiě)mvc框架，基于nodejs：

Sails. js，Total.js，Partial.js，Koa. js，Locomotive. js，Express. js,Flatiron. js

【js模塊化】

相關(guān)概念：

commonjs，amd，cmd，umd

相關(guān)框架：

commonjs，seajs，requirejs，coolie

類(lèi)比Java中的：

import，對(duì)就是import。。

詳述：

如上所說(shuō)，當(dāng)有了nodejs（jvm），有了mvcjs（ssh）之后，

可想而知，每個(gè)mvcjs中會(huì)有多少js文件，這個(gè)時(shí)候js模塊化就派上用處了，

當(dāng)有人和你說(shuō)js模塊化如何如何，感覺(jué)自己很吊的時(shí)候，甩他一句，不就是java中的import嗎？

對(duì)，雖然在前端看來(lái)js模塊化如何牛x，如何吊，但是就java來(lái)說(shuō)就是import。

看看下面兩張圖片就明白了，對(duì)比requirejs（amd）和java導(dǎo)包：

但是js中的模塊化，還有很多規(guī)范，比如commonjs，amd，cmd，umd，感覺(jué)頭大了吧，

其實(shí)簡(jiǎn)單的來(lái)說(shuō)，就是commonjs是運(yùn)行在nodejs端，amd，cmd，umd是運(yùn)行在瀏覽器，

其作用就是import各種js文件，把js模塊化管理，可以理解為java中的包管理，

詳見(jiàn)這篇文章：http://coolie.ydr.me/introduction/commonjs-amd-cmd-umd.html

同樣，一個(gè)mvc，js能做出來(lái)10+種框架，可想而知模塊化，js也對(duì)應(yīng)很多框架，

例如commonjs，requirejs，seajs等等。

記住，commonjs，requirejs，seajs等js模塊化框架，遵循各種規(guī)范（amd，cmd，umd，commonjs），

類(lèi)比java中的import

【reactjs】

官網(wǎng)：

http://facebook.github.io/react/

簡(jiǎn)介：

facebook前不久出的一款框架，眾前端膜拜之。

類(lèi)比Java中的：freemarker的宏。

詳述：

facebook前不久出了一款js框架，reactjs，

一時(shí)間，凡是用過(guò)reactjs，或者聽(tīng)過(guò)reactjs的前端開(kāi)發(fā)就高人一等，

那么，這個(gè)框架到底是干嘛的，我們來(lái)看看官網(wǎng)的一個(gè)例子：

好的，看不懂沒(méi)關(guān)系，我來(lái)說(shuō)說(shuō)，

左邊是一段代碼，右邊是這段代碼在網(wǎng)頁(yè)中的效果，

左邊代碼中上面一大段是定義，最后一句話(huà)是使用，

左邊代碼jsx是reactjs的格式，旁邊有個(gè)compiled js是jsx編譯后的js，原生js。

也就是說(shuō)，你通過(guò)寫(xiě)jsx文件，編譯后生成一段js文件，這段js文件運(yùn)行后是右邊的效果，

那么好處是什么？

是封裝，一大段js定義，最后只需要一句話(huà)輸出，也就是一行js代碼對(duì)應(yīng)右邊一個(gè)ui組件。

對(duì)了reactjs最大的作用就是用來(lái)開(kāi)發(fā)ui組件，例如這個(gè)：http://material-ui.com/#/components/dropdown-menu

很酷的效果，material ui風(fēng)格的webui組件，基于reactjs開(kāi)發(fā)的。

做java的不知道用過(guò)freemarker沒(méi)，用過(guò)freemarker的不知道用過(guò)宏沒(méi)，看段代碼：

----------------------------------------------

-----------------------------------------------

------------------------------------

------------------------------------

第一個(gè)圖片中是freemarker用宏封裝了bootstrap的button組件，

第二個(gè)圖片是在代碼用使用封裝后的bsbutton，

第三個(gè)圖片是效果

有沒(méi)有發(fā)現(xiàn)和reactjs很相似啊，只不過(guò)reactjs是在前端實(shí)現(xiàn)，

而freemarker是在后端實(shí)現(xiàn)，兩者的共同點(diǎn)是封裝，且可以傳參。

記住，facebook出品的reactjs是用來(lái)開(kāi)發(fā)ui庫(kù)的js框架，特點(diǎn)是可以封裝大量代碼。

更多精彩內(nèi)容：http://uikoo9.com/