从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,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/

时间: 2024-10-14 04:23:36

从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs的相关文章

从Java的角度看前端JS各种框架

今天看到一篇不错的文章: 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs http://blog.csdn.net/uikoo9/article/details/45999745 (PS:还有另一篇文章也可以看看:http://uikoo9.com/blog/detail/fe web前端漫谈-uikoo9.com) 文章内容如下: [前端神秘的面纱] 对后端开发来说,前端是神秘的, 眼花缭乱的技术,繁多的框架, 如果你还停留在前端

前端框架与前端类库的理解

前端框架的理解误区 网站的价值在于它能为用户提供什么价值,在于网站能做什么,而不在于它是怎么做的,所以在网站还很小的时候就去追求网站的架构框架是舍本逐末,得不偿失的.前端框架同理,如果是一个简单的页面型产品,应用只是依赖服务器来生成Web页面和视图,并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性,那么一个JQuery前端类库就可以了,真的没必要用上一些高大上的框架. 当然,框架的确是很有用的,重点是我们要知道什么时候该用什么框架.大公司大项目的经验和成功模式固

Web前端框架与类库的思考

说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道.就好像一个日均pv只有几百的小型电商网站,却要大喊“某宝就是这么搞的”,然后搭建应用服务器集群,使用分布式文件系统和分布式数据库系统...等巴拉巴拉的一堆用来处理高并发,海量数据访问的手段.我

第八章 前端框架

源代码GitHub:https://github.com/ZhaoRd/Zrd_0001_AuthorityManagement 一.介绍 本Demo主要使用的前端框架有 bootstrap.angularjs.angle.bootstrap是推特公司的开源css框架,提供优美的界面元素;angularjs是google推出的前端js框架,最为核心的是:MVVM.模块化.双向数据绑定.依赖注入等等;angle是一个前端admin的管理框架,包括了诸多组件的使用方式,具有Angular/html/

为什么要学习Vue——前端框架角度

什么是框架 框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架.前者是从应用方面而后者是从目的方面给出的定义. 可以说,一个框架是一个可复用的设计构件,它规定了应用的体系结构,阐明了整个设计.协作构件之间的依赖关系.责任分配和控制流程,表现为一组抽象类以及其实例之间协作的方法,它为构件复用提供了上下文(Context)关系.因此构件库的大规模重用也需要框架. 构件领域框架方法在很大程度上借鉴了硬件技

一,前端框架的理解

提到框架普遍都会想到是后端使用的,尤其java的SSH框架更是非常流行,这些框架都是以MVC的思想架构的.我理解这是从最高层次的解耦,将数据,业务,视图分开,无论是从理解还是从实际工作流程上都是非常合理的. 对于后端业务组成:数据库(DB).服务(Sevice).接口(Action).视图(View). 数据层->数据库 控制层->将请求指定到响应类,然后在响应类中调用业务服务类,业务服务类从数据库中获得数据进行业务处理返回到响应类,完成后响应类在将数据返回. 视图层->前端,发出一个请

前端框架MVVM和VUE的理解和应用

市面上很多开源的程序里面用的前端框架以前大多用的MVVM的框架,后面逐渐的都被VUE的框架代替了,像一些比较活跃的开源程序更新轨迹上就可以看到一开始用的是MVVM模式,后期更新为VUE的框架,类似开源商城DSMall3.0之前手机端用的是MVVM模式,在3.0之后便更换成VUE的框架了,那MVVM和VUE个有什么不同呢?一.对于MVVM的理解??MVVM?是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View?代表

nodejs中weex前端框架小项目的搭建。

最近想要在学习nodejs,前端框架想要使用weex然后就想要安装一个weex框架. 首先我们要先安装好自己的nodejs, 判断自己的nodejs是否安装成功,自己可以打开自己的dos窗口,然后自己进行验证,在窗口中输入node -v查看自己的版本号.如图: 然后自己可以直接进行安装weex这个框架,但是自己试了一下几次都没有安装成功,然后自己就只好转变自己的安装方法.成功的一次是自己通过淘宝镜像的cnpm安装成功了. 当我们安装好了nodejs之后,通过配置自己的环境变量,自己可以配置好自己

闲话js前端框架(4)——组件化?有没有后端的事?

闲话js前端框架 前端人员=美工+设计+代码+测试 --题记 专题文章: 一.从avalonjs的模板说起 二.庞大的angularjs 三.再也不想碰DOM 四.组件化?有没有后端的事? 五.再看自己一年前设计的微型渲染引擎 六.在浏览器标准上做文章 七.抛开浏览器,构建应用容器 八.为何Flash.银光和Java都在网页端一蹶不振 本文属 西风逍遥游 原创, 转载请注明出处: 西风世界 http://blog.csdn.net/xfxyy_sxfancy 四.组件化?有没有后端的事? 提到组