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

標籤：java   reactjs   nodejs   expressjs   seajs   

【突然領悟】

今天看了一遍reactjs，突然發現和自己一直用的freemarker的宏十分相似，

突然領悟了很多前端吊炸天的概念，架構，特寫此文，歡迎批評指正。

【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架構】

相關架構：架構太多，詳見下面兩篇文章

http://www.csdn.net/article/2014-02-24/2818519-node-js-mvc-frameworks-for-javascript-developers

http://www.csdn.net/article/2014-03-25/2818964-web-application-frameworks-for-node-js

類比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。

但是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架構，特點是可以封裝大量代碼。

更多

npm vs maven

angularjs vs freemarker（v）

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

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