今天看到一篇不錯的文章:
從Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs
http://blog.csdn.net/uikoo9/article/details/45999745
(PS:還有另一篇文章也可以看看:http://uikoo9.com/blog/detail/fe web前端漫談-uikoo9.com)
文章內容如下:
【前端神秘的面紗】 對后端開發來說,前端是神秘的, 眼花繚亂的技術,繁多的框架, 如果你還停留在前端等於只用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運行環境,打開了前端人員走向后端的道路。 1.png 【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 2.png 【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導包: 1.png 2.png 但是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 3.png 【reactjs】 官網: http://facebook.github.io/react/ 簡介: facebook前不久出的一款框架,眾前端膜拜之。 類比Java中的:freemarker的宏。 詳述: facebook前不久出了一款js框架,reactjs, 一時間,凡是用過reactjs,或者聽過reactjs的前端開發就高人一等, 那么,這個框架到底是干嘛的,我們來看看官網的一個例子: 5.png 好的,看不懂沒關系,我來說說, 左邊是一段代碼,右邊是這段代碼在網頁中的效果, 左邊代碼中上面一大段是定義,最后一句話是使用, 左邊代碼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的不知道用過宏沒,看段代碼: 10.png ---------------------------------------------- ----------------------------------------------- 8.png ------------------------------------ ------------------------------------ 7.png 第一個圖片中是freemarker用宏封裝了bootstrap的button組件, 第二個圖片是在代碼用使用封裝后的bsbutton, 第三個圖片是效果 有沒有發現和reactjs很相似啊,只不過reactjs是在前端實現, 而freemarker是在后端實現,兩者的共同點是封裝,且可以傳參。 記住,facebook出品的reactjs是用來開發ui庫的js框架,特點是可以封裝大量代碼。 11.png 更多精彩內容:http://uikoo9.com/