NodeJS和ReactJS,VUEJS的关系_react和nodejs的关系_myKurt的博客-程序员宅基地

技术标签：前端

【前端神秘的面纱】

对后端开发来说，前端是神秘的，

眼花缭乱的技术，繁多的框架，

如果你还停留在前端等于只用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框架】

类比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模块化】

类比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框架，特点是可以封装大量代码。

本文链接：https://blog.csdn.net/mykurt/article/details/79914078

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Nagios实战全解（一）：Nagios服务器的自我监控实现_nagios发短信是花钱的_chenxiqiudie的博客-程序员宅基地

俗话说:工欲善其事，必先利其器.要做好系统管理，使自己的工作更轻松更有效的话，一个好的监控工具是必不可少的了.在这里我向大家推荐一款我使用了4年多的、功能强大、可灵活定制的开源监控利器——Nagios。　　首先，我们来看实际工作中需要监控的对象有哪些？在这里我总结出2种类型的监控对象：网络服务监控及主机资源监控。网络服务监控可包括主机存活检查、web服务监控、ftp服务监控、数据库服务监控_nagios发短信是花钱的

蓝牙基本概念以及Android中蓝牙enable/discover流程分析_android bt discovery_li_liuliu的博客-程序员宅基地

蓝牙基本概念两种蓝牙技术：Basic Rate (BR)和Low Energy(LE)这两种技术是不能互通的，也就是不能相互兼容。如果要确保和所有的蓝牙设备互通，只能同时实现这两种技术。BRBasic Rage是正宗的蓝牙技术，包括可选的（optional）的EDR（Enhanced Data Rate）技术，以及Alternate（交替使用的）MAC层和PHY层扩展(简称AMP)。LE..._android bt discovery

古月居《ROS入门21讲》课件及源码_ros教程百度网盘_轻松仁——极简生活的博客-程序员宅基地

《ROS入门21讲》课件及源码下载：方式一：百度网盘链接：https://pan.baidu.com/s/1ILsroPpUmnH_kd1piQ-W9w提取码：yj4s方式二：Github：https://github.com/guyuehome/ros_21_tutorials码云：https://gitee.com/guyuehome/ros_21_tutorials————————————————版权声明：本文为CSDN博主「qq_36059278」的原创文章，遵循CC 4.0_ros教程百度网盘

python数据处理中的日期转换处理中的to_datetime()函数（一）_红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈哈的博客-程序员宅基地

python使用的是 jupyter notebook话不多说，直接说说主要内容吧！一、函数简介我们可以通过输入 import pandas as pd help(pd.to_datetime)可以得到to_datetime函数的相关作用以及参数的使用，部分截图如下：来查看python中强大的pandas中的to_datetime() 函数。很明显其作用为 Convert argument to datetime.也就是该函数可以将字符型的时间数据转换为时间型数据不过实际上一般只使用to_to_datetime

python高阶函数心得体会_Python高阶函数使用总结_喵鱼酱的博客-程序员宅基地

Datawhale干货作者：皮钱超，厦门大学，Datawhale原创作者本文约2000字，建议阅读6分钟审稿人：耿远昊，Datawhale成员，华东师范大学，开源教程《Joyful-Pandas》核心贡献者。本文结合各种实际的例子详细讲解了Python5个内建高阶函数的使用，能够帮助理解Python的数据结构和提高数据处理的效率，这5个函数分别是：mapreducefiltersorted/..._python高阶函数心得

java机票编程_基于java的网上飞机票预订系统_半诗意的博客-程序员宅基地

【实例简介】使用java和sql server 设计的网上飞机票预订系统的详细代码设计。。【实例截图】【核心代码】kys└── kys├── src│ ├── action│ │ ├── BorrowAction.java│ │ ├── FileAction.java│ │ ├── FileUpAction.java│ │ ├── LogAction.java│..._基于java和sql server的机票预订系统代码

随便推点

labview生成exe_labview软件如何转出软件_在路上@Amos的博客-程序员宅基地

在LabVIEW专业版开发系统中，NI公司提供了一个友好的LabVIEW应用程序生成工具LabVIEW Application Builder，该工具集成在项目浏览器中，在程序生成规范中点击右键，可以看到在LabVIEW中VI程序有多种发布方法，不仅可以发布应用程序或安装程序，也可以发布为.NET互操作程序集、打包库、共享库、源代码发布、Web服务、Zip文件等，如下图所示：参考：LabV..._labview软件如何转出软件

VSCode代码选择高亮_search.actionsposition_太空里没有鱼的博客-程序员宅基地

VSCode代码选择高亮步骤：在preference里选择settings下拉到rule那里，选择“settings.json编辑器”"search.actionsPosition": "right", "search.enableSearchEditorPreview": false, "workbench.colorCustomizations": { "editor.selectionBackground": "#f8f7f7", "editor.selectionHighlightBack_search.actionsposition

NodeJS和ReactJS,VUEJS的关系_react和nodejs的关系_myKurt的博客-程序员宅基地

【前端神秘的面纱】

【nodejs】

官网：

简介：

类比Java中：JVM

详述：

记住，nodejs是和jvm同等地位的js运行环境，打开了前端人员走向后端的道路。

【js mvc框架】

相关框架：

类比Java中的：

详述：

记住，当你看到这些js框架的时候，微微一笑，原来就是写mvc框架，基于nodejs：

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

【js模块化】

相关概念：

相关框架：

类比Java中的：

详述：

记住，commonjs，requirejs，seajs等js模块化框架，遵循各种规范（amd，cmd，umd，commonjs），

类比java中的import

【reactjs】

官网：

简介：

详述：

记住，facebook出品的reactjs是用来开发ui库的js框架，特点是可以封装大量代码。

智能推荐

随便推点

推荐文章

热门文章

相关标签