今天看到一篇不错的文章:

从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/

从Java的角度看前端JS各种框架的更多相关文章

  1. 站在Java的角度看LinkedList

    站在Java的角度看,玩队列不就是玩对象引用对象嘛! public class LinkedList<E> implements List<E>, Deque<E> ...

  2. 从源码的角度看 React JS 中批量更新 State 的策略(下)

    这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源 ...

  3. 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs

    [前端神秘的面纱] 对后端开发来说,前端是神秘的, 眼花缭乱的技术,繁多的框架, 如果你还停留在前端等于只用jquery做开发,那么你out了, 本文从Java的角度简述下目前前端流行的一些框架. 水 ...

  4. 从源码的角度看 React JS 中批量更新 State 的策略(上)

    在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中,我们分别看到了 React JS 中 setState 的异步 ...

  5. java前端js和框架内容知识和面试

    关于数据库知识和面试 关于JAVA知识和面试 一.多个ajax请求执行顺序问题 若点击一个操作内,发送两个ajax请求,其中一个请求会不会等待另一个请求执行完毕之后再执行? 不会,这两个异步请求会同时 ...

  6. 从JVM的角度看JAVA代码--代码优化

    从JVM的角度看JAVA代码–代码优化 从JVM的角度看JAVA代码代码优化 片段一反复计算 片段二反复比較 在JVM载入优化为class文件,运行class文件时,会有JIT(Just-In-Tim ...

  7. java 访问 太平洋网ip接口,解决前端js 跨域访问失败问题

    前端 js访问太平洋网IP接口地址,返回结果是403 服务器拒绝处理异常, 于是,想到了使用 服务器端访问,然后再将查询结果返回的前端 这是Java的测试源码,[具体的contronller端源码懒得 ...

  8. json处理总结(前端js和后端java)

    前端(js): json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键,下面将介绍两者之间的相互转换. json字符串:var st ...

  9. 从JDK源码角度看java并发线程的中断

    线程的定义给我们提供了并发执行多个任务的方式,大多数情况下我们会让每个任务都自行执行结束,这样能保证事务的一致性,但是有时我们希望在任务执行中取消任务,使线程停止.在java中要让线程安全.快速.可靠 ...

随机推荐

  1. ref:CodeIgniter框架内核设计缺陷可能导致任意代码执行

    ref:https://www.seebug.org/vuldb/ssvid-96217 简要描述: 为准备乌云深圳沙龙,准备几个0day做案例. 官方承认这个问题,说明会发布补丁,但不愿承认这是个『 ...

  2. 《Android源码设计模式》--模板方法模式

    No1: 模板方法模式包括:抽象类(其中定义了一系列顺序方法).具体实现类A.具体实现类B 如果子类有实现不一样的细节,重写父类的某个方法即可 No2: AsyncTask对象调用execute方法后 ...

  3. 【知了堂学习笔记】java 接口与抽象类

    本次主角:抽象类 .接口. 对于皮皮潇这样一类的Java初学者来说,接口和抽象类如果不去花大量的精力与时间是很难弄清楚的,而我也是在最近这周的项目学习中感觉到了我对这两个概念不熟悉,所以导致对一些问题 ...

  4. 关于页面Meta属性

    meta标签的组成 meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能. 1.name属性 name属性主要 ...

  5. Java反射机制demo(六)—获得并操作一个类的属性

    Java反射机制demo(六)—获得并操作一个类的属性 获得并操作一个类的属性?! 不可思议啊,一个类的属性一般都是私有成员变量啊,private修饰符啊! 但是毫无疑问,这些东西在Java的反射机制 ...

  6. mysql正则表达式,实现多个字段匹配多个like模糊查询

    现在有这么一个需求 一个questions表,字段有题目(TestSubject),选项(AnswerA,AnswerB,AnswerC,AnswerD,AnswerE) 要求字段不包含png,jpg ...

  7. 阿里云无法远程连接数据库MySQL错误码10060解决办法

    使用图形界面管理工具Navicat for MySQL连接Mysql数据库时提示错误:Can't connect to MySQL server (10060) 导致些问题可能有以下几个原因: 1.网 ...

  8. LCT维护子树信息

    有些题目,在要求支持link-cut之外,还会在线询问某个子树的信息.LCT可以通过维护虚边信息完成这个操作. 对于LCT上每个节点,维护两个两sz和si,后者维护该点所有虚儿子的信息,前者维护该点的 ...

  9. bzoj 5055: 膜法师 -- 树状数组

    5055: 膜法师 Time Limit: 10 Sec  Memory Limit: 128 MB Description 在经历过1e9次大型战争后的宇宙中现在还剩下n个完美维度, 现在来自多元宇 ...

  10. oracle开发学习篇之集合函数

    集合函数; declare type list_nested ) not null; v_all list_nested := list_nested('changan','hubei','shang ...