OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

移动端开发框架哪个好?jQuery/Vue/AngularJS有哪些区别和优缺点?


分享到


分类 JS学习   关键字 分享   发布 ourjs  1513344701701
注意 转载须保留原文链接,译文链接,作者译者等信息。  

JS框架,我认为大体上可以分为两种。一种是类似jQuery/ d3那样的,通过修改html的DOM结构来渲染UI的库。

还有一种则是类似于AngularJS/ReactJS 那样的,采用MVC分层的,通过Model来渲染View UI框架。


性能比较

jQuery基本都是浏览器原生操作,实计上h5的很多api都借鉴了jQuery,比如说在兼容IE6~IE7的蛮荒时代,HTML是没有按元素类选择器查找元素这类接口的,只有  document.getElementById 这一个常用的按ID取元素方法。

var wrapper = document.getElementById('wrapper')

jQuery 实现了一系列的按类/ID/元素名查找元素的引擎。

//按ID名
var $wrapper = $('#wrapper')
//按类名
var $wrapper = $('.article-title')

不过随着浏览器的发展,浏览器本身也已经支持类选择器了:

//查找单个元素
var wrapper = document.querySelector('#wrapper')
//查找多个元素 
var articleTitles = document.querySelectorAll('.article-title')

所以后来的jQuery版本就开始直接使用这些接口,所以基本上元素选择和更新都是使用浏览器原生的接口,这些操作几乎都没有性能损耗。所以说jQuery 操作DOM的性能还是比较好的。

开发效率比较

jQuery更新HTML虽然性能比较好,但是效率比较低,而且也不太符合目前浏览器的分层的前后端分离实践。因此出来后来的Backbone/ Angular 这样将JSON Data数据渲染成Html View的MVC/MVVM框架。极大地提高了开发效率。

注意这里也有些区别,jQuery类似于库,而Angular类似于框架,这也意味着使用Angular要严格按照框架规定来写。但Vue虽然也是MVC渲染,但更像一个库,所以明显要比Angular上手要容易,比如说下面的这个,直接绑定即可:

<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})


总结:jQuery从后台返回的数据要渲染到前端上需要通过手动更新DOM,但是手动改DOM一般比MVC渲染的性能好。但开发效率和代码规范不如NG/ReactJS。

目前总体来说基于jQuery的前端组件库最多,而Angular/React的还比较少。


下面列举几个比较知名的前端UI库:


Bootstrap

这个基本上就不用说明了,一个前端CSS框架,基于jQuery,但是很多复杂的控件没有,像 datagrid/ dialog/ tree/ charts之类的,不过基于bootstrap的组件库也比较多,可以自己去找找。


Foundation

类似Bootstrap https://foundation.zurb.com/


Semantic UI

前端框架,不过组件也比较少https://github.com/Semantic-Org/Semantic-UI


Kendo UI

kendoui.com 传统的各种datagrid/charts/dialog库,分开源和商业两种版本,使用比较复杂的控件要购买商业版。


Materialize

另一个前端响应式Web框架 https://github.com/Dogfalo/materialize


jQuery Mobile

http://demos.jquerymobile.com/1.4.5/slider/jQuery Mobile一些组件库(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,


Sencha Touch

以前叫Ext,注意它不是基于jQuery的,是基于另外一种元素选择器构建起来的前端组件库。


另外还有一些 Amazeui/ jQuery EasyUI/ materialize/ weex 之类的,有兴趣也可以研究一下。

社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. redis、memcache和mongodb各自的优缺点是什么,怎么选择呢?
  2. 垄断"开源硬件"树莓派芯片的供应商博通要收购高通了
  3. Node.JS 8.x和9.x新特性:N-API,NPM5,ERROR CODE
  4. GitHub2017年度开发者报告 JavaScript依然遥遥领先Python突飞猛进
  5. 40行JavaScript代码实现的3D旋转魔方动画效果
  6. NodeJS动态传参特性:不定个数参数的省略,默认值与解构
  7. 红衣教主周鸿祎会不会成为中国首富
  8. Node.JS与USB接口通信:检测U盘/移动硬盘插拔事件和发送接数据
  9. OnceAir顽石企业私有云网盘使用介绍
  10. Node.JS读取中文TXT编码文件显示乱码问题解决方案
  11. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - JS学习
  1. Node.JS 8.x和9.x新特性:N-API,NPM5,ERROR CODE
  2. Node.JS读取中文TXT编码文件显示乱码问题解决方案
  3. Node.JS与USB接口通信:检测U盘/移动硬盘插拔事件和发送接数据
  4. NodeJS动态传参特性:不定个数参数的省略,默认值与解构
  5. 从 Node 到 Go:一个粗略的比较—GO平均性能比JavaScript快十几倍
  6. Node.JS中如何快速扫描端口并发现局域网内的Web服务器地址(80)
  7. Node.JS循环递归复制文件夹目录及其子文件夹下的所有文件
  8. 正则中test、exec、match的简单区别,以及括号的用法
  9. node.js使用unzip解压zip包指定文件,提取 word/excel (docx/pptx/xlsx) 文本内容
  10. Linux下用node.js提取Word(doc/docx)/PDF文本内容

 关键字 - 分享
  1. 对于现代开发来说,JavaScript就是一种垃圾语言
  2. 我为什么不再用Compass写CSS(缺点分析)
  3. Redis/Python被要求更改Master/Slave程序接口名称和描述
  4. IE、Chrome、Firefox浏览器默认首页被改成360导航解决办法(删除daohang88.com)跳转
  5. 程序员疑似将MySQL用户名密码上传至Github,导致华柱1.3亿条开房数据泄漏
  6. 从 Node 到 Go:一个粗略的比较—GO平均性能比JavaScript快十几倍
  7. Linux上为git无交互添加最低权限的使用用户
  8. 为jquery的ajax请求添加超时timeout时间
  9. 上海行业工资排名:产品经理一骑绝尘,前端排名第二?
  10. 使用简单的JavaScript,我们为什么应该抵制ES6的一些特性

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号