【前端神秘的面紗】對后端開發(fā)來說，前端是神秘的， 眼花繚亂的技術(shù)，繁多的框架， 如果你還停留在前端等于只用jquery做開發(fā)，那么你out了， 本文從Java的角度簡述下目前前端流行的一些框架。 水平有限，歡迎指正。 【nodejs】官網(wǎng)：簡介：對前端來說極其重要的一個“框架”，簡直可以說是開天辟地 類比Java中：JVM詳述：就前端來說nodejs具有劃時代的意義， 做前端的沒用過nodejs都不好意思說自己是前端， 做后端的沒聽過nodejs， 或者說不出nodejs和java的優(yōu)缺點，也不是一個合格的后端。 nodejs不是一個js框架，千萬不要認(rèn)為是類似jquery的框架， nodejs是js運行時，運行環(huán)境，類比java中jvm， java的開端是什么，無疑是jvm，自從有了jvm，java才能吹牛說自己是“一次編寫處處運行”， 不管你是windows還是linux，只要安裝了對應(yīng)版本的jvm都可以運行.class文件。 同樣nodejs的作用和jvm的一樣一樣的，也是js的運行環(huán)境，不管是你是什么操作系統(tǒng)， 只要安裝對應(yīng)版本的nodejs，那你就可以用js來開發(fā)后臺程序。 這具有劃時代的意義，意味著一直以來只能在瀏覽器上玩來玩去的js，可以做后端開發(fā)了， 從有了nodejs后就催生出一大批用js做后臺開發(fā)的前端人員，這部分人員就是偏前端的“全棧程序員”。 記住，nodejs是和jvm同等地位的js運行環(huán)境，打開了前端人員走向后端的道路。
【js mvc框架】相關(guān)框架：框架太多，詳見下面兩篇文章 類比Java中的：ssh1（struts1+spring+hibernate），ssh2（struts2+spring+hibernate），ssm（springmvc+spring+mybatis） 詳述：上面說到nodejs打開了前端開發(fā)人員開發(fā)后端的大門，而且nodejs類比jvm， 那么學(xué)習(xí)java的人都知道，學(xué)習(xí)完jvm（基礎(chǔ)）后該學(xué)什么了？ 對，框架， java中有哪些框架，正如上面所說，ssh1，ssh2，ssm等等， 這些框架都mvc框架。 既然nodej都有了，jvm出現(xiàn)了，那接下來就是js大神開始封裝mvc框架，正如java大神開始封裝mvc框架一樣， 相對java流行了幾種框架，nodejs對應(yīng)的mvc框架就多的多了， 詳見上面兩篇文章，足夠讓你看的眼花繚亂。 其中比較有名的是expressjs。 記住，當(dāng)你看到這些js框架的時候，微微一笑，原來就是寫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 類比Java中的：import，對就是import。。 詳述：如上所說，當(dāng)有了nodejs（jvm），有了mvcjs（ssh）之后， 可想而知，每個mvcjs中會有多少js文件，這個時候js模塊化就派上用處了， 當(dāng)有人和你說js模塊化如何如何，感覺自己很吊的時候，甩他一句，不就是java中的import嗎？ 對，雖然在前端看來js模塊化如何牛x，如何吊，但是就java來說就是import。 看看下面兩張圖片就明白了，對比requirejs（amd）和java導(dǎo)包：
但是js中的模塊化，還有很多規(guī)范，比如commonjs，amd，cmd，umd，感覺頭大了吧， 其實簡單的來說，就是commonjs是運行在nodejs端，amd，cmd，umd是運行在瀏覽器， 其作用就是import各種js文件，把js模塊化管理，可以理解為java中的包管理， 詳見這篇文章：http://coolie./introduction/commonjs-amd-cmd-umd.html
同樣，一個mvc，js能做出來10+種框架，可想而知模塊化，js也對應(yīng)很多框架， 例如commonjs，requirejs，seajs等等。 記住，commonjs，requirejs，seajs等js模塊化框架，遵循各種規(guī)范（amd，cmd，umd，commonjs），類比java中的import
【reactjs】官網(wǎng)：簡介：facebook前不久出的一款框架，眾前端膜拜之。 類比Java中的：freemarker的宏。 詳述：facebook前不久出了一款js框架，reactjs， 一時間，凡是用過reactjs，或者聽過reactjs的前端開發(fā)就高人一等， 那么，這個框架到底是干嘛的，我們來看看官網(wǎng)的一個例子：
好的，看不懂沒關(guān)系，我來說說， 左邊是一段代碼，右邊是這段代碼在網(wǎng)頁中的效果， 左邊代碼中上面一大段是定義，最后一句話是使用， 左邊代碼jsx是reactjs的格式，旁邊有個compiled js是jsx編譯后的js，原生js。 也就是說，你通過寫jsx文件，編譯后生成一段js文件，這段js文件運行后是右邊的效果， 那么好處是什么？ 是封裝，一大段js定義，最后只需要一句話輸出，也就是一行js代碼對應(yīng)右邊一個ui組件。 對了reactjs最大的作用就是用來開發(fā)ui組件，例如這個：http:///#/components/dropdown-menu 很酷的效果，material ui風(fēng)格的webui組件，基于reactjs開發(fā)的。 做java的不知道用過freemarker沒，用過freemarker的不知道用過宏沒，看段代碼：
---------------------------------------------- -----------------------------------------------
------------------------------------ ------------------------------------
第一個圖片中是freemarker用宏封裝了bootstrap的button組件， 第二個圖片是在代碼用使用封裝后的bsbutton， 第三個圖片是效果 有沒有發(fā)現(xiàn)和reactjs很相似啊，只不過reactjs是在前端實現(xiàn)， 而freemarker是在后端實現(xiàn)，兩者的共同點是封裝，且可以傳參。 記住，facebook出品的reactjs是用來開發(fā)ui庫的js框架，特點是可以封裝大量代碼。
更多精彩內(nèi)容：http:/// |
|
|
