nodejs，reactjs，angularjs

 

 ===如下转载===

 【转】从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框架，特色是能够封装大量代码。

————————————————版权声明：本文为CSDN博主「uikoo9」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处连接及本声明。原文连接：https://blog.csdn.net/uikoo9/article/details/45999745