主流前端技术对比

1、jQuery

a）最流行的WEB前端JS库，但随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jQuery的使用率可能会变得越来越低，逐渐被其他JS库取代；

b）依靠丰富的dom操作去组合业务逻辑，当业务逻辑复杂的时候，代码可读性较差，业务逻辑和UI交互混在一起；

c）UI里参杂着交互逻辑，逻辑比较混乱，但UI交互逻辑能够更加灵活地嵌入到业务逻辑；

d）jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。

2、Vue.js

 

a）新兴起的WEB前端JS库，是一个精简的MVVM，用于构建用户界面的渐进式框架，采用自底向上增量开发的设计；

b）Vue.js专注于MVVM模型的ViewModel层，易学习，易与其它库或已有项目整合；

c）通过双向数据绑定把View层和Model层连接了起来，通过对数据的操作就可以完成对页面视图的渲染，可以直接在vue文件中使用html标签，数据绑定时类似angular，可以进行条件渲染；

d）通过Vue对象将数据和View完全分离开来了，对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定；

e）Vue.js的数据和方法都挂载在Vue上，数据挂载在Vue的data,方法挂载在Vue的methods，相比其他前端技术框架，代码风格更加优雅；

f）具有模块化、组件化和路由等特点，可以自由搭配使用需要的库插件，相比其他MVVM框架具有小巧、简单、快速、紧凑等优势。

3、Angular.js

 

a）MVVM（Model）（View）（View-Model）；

b）模块化（Module）控制器（Contoller）依赖注入；

c）双向数据绑定，界面的操作能实时反映到数据，数据的变更能实时展现到界面，渲染速度快；

d）Angular.js所有的数据和方法都是挂载在$scope上，其中双向数据绑定的实现使用了$scope变量的脏值检测，使用$scope.$watch（视图到模型）或$scope.$apply(模型到视图)检测，内部调用的都是digest，当然也可以直接调用$scope.$digest进行脏检查。当数据变化十分频繁时，脏检测对浏览器性能的消耗将会很大，官方注明的最大检测脏值为2000个数据；

e）框架比较复杂，比较笨重（相比Vue.js）。

4、Recat.js

 

a）React.js以组件的方式重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建；

b）代码量较大，既要管理UI逻辑，又要操心dom的渲染；

c）React.js采用了jsx语法，运用虚拟DOM的概念进行DOM对页面元素进行渲染，获取页面元素需要用ref来获取，似乎更加安全；

d）框架比较复杂，比较笨重（相比Vue.js）。