從Java的角度理解前端框架，nodejs，reactjs，angularjs，requirejs，seajs

【前端神祕的面紗】

對後端開發來講，前端是神祕的，

眼花繚亂的技術，繁多的框架，

若是你還停留在前端等於只用jquery作開發，那麼你out了，

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

水平有限，歡迎指正。

 

【nodejs】

官網：

https://nodejs.org/

簡介：

對前端來講極其重要的一個「框架」，簡直能夠說是開天闢地

類比Java中：JVM

詳述：

就前端來講nodejs具備劃時代的意義，

作前端的沒用過nodejs都很差意思說本身是前端，

作後端的沒聽過nodejs，

或者說不出nodejs和java的優缺點，也不是一個合格的後端。

 

nodejs不是一個js框架，千萬不要認爲是相似jquery的框架，

nodejs是js運行時，運行環境，類比java中jvm，

java的開端是什麼，無疑是jvm，自從有了jvm，java才能吹牛說本身是「一次編寫到處運行」，

無論你是windows仍是linux，只要安裝了對應版本的jvm均可以運行.class文件。

 

一樣nodejs的做用和jvm的同樣同樣的，也是js的運行環境，無論是你是什麼操做系統，

只要安裝對應版本的nodejs，那你就能夠用js來開發後臺程序。

 

這具備劃時代的意義，意味着一直以來只能在瀏覽器上玩來玩去的js，能夠作後端開發了，

從有了nodejs後就催生出一大批用js作後臺開發的前端人員，這部分人員就是偏前端的「全棧程序員」。

 

記住，nodejs是和jvm同等地位的js運行環境，打開了前端人員走向後端的道路。

 

【js mvc框架】

相關框架：

框架太多，詳見下面兩篇文章

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

基於NodeJS的14款Web框架

類比Java中的：

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

詳述：

上面說到nodejs打開了前端開發人員開發後端的大門，並且nodejs類比jvm，

那麼學習java的人都知道，學習完jvm（基礎）後該學什麼了？

對，框架，

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

這些框架都mvc框架。

 

既然nodej都有了，jvm出現了，那接下來就是js大神開始封裝mvc框架，正如java大神開始封裝mvc框架同樣，

相對java流行了幾種框架，nodejs對應的mvc框架就多的多了，

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

 

其中比較有名的是expressjs。

 

記住，當你看到這些js框架的時候，微微一笑，原來就是寫mvc框架，基於nodejs：

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

【js模塊化】

相關概念：

commonjs，amd，cmd，umd

相關框架：

commonjs，seajs，requirejs，coolie

類比Java中的：

import，對就是import。。

詳述：

如上所說，當有了nodejs（jvm），有了mvcjs（ssh）以後，

可想而知，每一個mvcjs中會有多少js文件，這個時候js模塊化就派上用處了，

 

當有人和你說js模塊化如何如何，感受本身很吊的時候，甩他一句，不就是java中的import嗎？

對，雖然在前端看來js模塊化如何牛x，如何吊，可是就java來講就是import。

看看下面兩張圖片就明白了，對比requirejs（amd）和java導包：

 

可是js中的模塊化，還有不少規範，好比commonjs，amd，cmd，umd，感受頭大了吧，

其實簡單的來講，就是commonjs是運行在nodejs端，amd，cmd，umd是運行在瀏覽器，

其做用就是import各類js文件，把js模塊化管理，能夠理解爲java中的包管理，

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

 

一樣，一個mvc，js能作出來10+種框架，可想而知模塊化，js也對應不少框架，

例如commonjs，requirejs，seajs等等。

 

記住，commonjs，requirejs，seajs等js模塊化框架，遵循各類規範（amd，cmd，umd，commonjs），

類比java中的import

 

 

【reactjs】

官網：

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

簡介：

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

類比Java中的：freemarker的宏。

詳述：

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

一時間，凡是用過reactjs，或者聽過reactjs的前端開發就高人一等，

 

那麼，這個框架究竟是幹嗎的，咱們來看看官網的一個例子：

好的，看不懂不要緊，我來講說，

左邊是一段代碼，右邊是這段代碼在網頁中的效果，

左邊代碼中上面一大段是定義，最後一句話是使用，

左邊代碼jsx是reactjs的格式，旁邊有個compiled js是jsx編譯後的js，原生js。

 

也就是說，你經過寫jsx文件，編譯後生成一段js文件，這段js文件運行後是右邊的效果，

那麼好處是什麼？

是封裝，一大段js定義，最後只須要一句話輸出，也就是一行js代碼對應右邊一個ui組件。

對了reactjs最大的做用就是用來開發ui組件，例如這個：http://material-ui.com/#/components/dropdown-menu

很酷的效果，material ui風格的webui組件，基於reactjs開發的。

 

作java的不知道用過freemarker沒，用過freemarker的不知道用過宏沒，看段代碼：

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

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

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

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

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

第二個圖片是在代碼用使用封裝後的bsbutton，

第三個圖片是效果

 

有沒有發現和reactjs很類似啊，只不過reactjs是在前端實現，

而freemarker是在後端實現，二者的共同點是封裝，且能夠傳參。

 

記住，facebook出品的reactjs是用來開發ui庫的js框架，特色是能夠封裝大量代碼。

 

更多精彩內容：http://uikoo9.com/