主流前端技术对比

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)。

猜你喜欢

转载自blog.csdn.net/wzh0316/article/details/78598775
今日推荐