AngularJS2017年前端框架、类库、工具十分比并

对待于JavaScript开发人员的数量,目前JavaScript框架、类库和工具的数目似乎还多有。截至2017年5月,GitHub上的飞快搜索显示,有超越110万只JavaScript项目。npmjs.org有50万独可用之软件包,每月下载量近100亿次于。

正文将会晤讨论即最好流行的客户端JavaScript框架、类库和工具和它中的主导差异。也许本文无法告诉你谁是最好之,但是绝契合自己种之,就是绝好的。

类库

类库是一个发团体的功力集聚。典型的类库包括字符串处理、日期、HTML
DOM元素、事件、Cookie、动画、网络要等职能。你可友善实现一个函数,以便选择该函数被调用时是否用回到一个价值。

类库通常提供相同栽胜似级别之抽象方法,能够拉顺利落实种之细节部分。例如,Ajax通常依赖让XMLHttpRequest
API,只需要几行代码就落实效益,只是浏览器中存在细微之出入。类库提供了再简短的ajax()函数,因此开发者可以小心让复强级别之事情逻辑上。

类库能够使将支付时间缩短20%,开发者不必顾虑细节实现。

但呢发弱点:

  • 类库中的不当难以稳定与修复

  • 付出集团不能够管高速发布补丁

  • 补丁程序可能会见还改API,导致大量代码必须反

  • 上过程遭到碰到什么问题要么想博得学习资源的说话,欢迎加入学习交流群
    343599877,我们一同学前端!

框架

框架是应用程序的架。它要求为一定的措施来进展软件设计,在好几节点上贯彻团结之逻辑。框架通常提供了事件、存储和数目绑定等功效。

框架通常提供了比类库更胜层次之架空,帮助快速构建项目之前头80%。

框架的弱项:

  • 而你的应用程序超出了框架的限制,最后20%或许会见十分不便

  • 框架更新非常拮据

  • 核心框架代码和定义特别少更新

工具

工具会帮助开发工作,但也不是种的一对。工具包括构建系统、编译器、转译器、代码分割器、图像压缩器、部署机制等。

工具协助实现一个还易的付出过程。例如,对比为CSS,许多编码者更欣赏Sass,因为她提供了代码分离、嵌套、渲染时变量、循环和函数。浏览器不了解Sass
/ SCSS语法,因此在测试与配置之前,必须采用合适的家伙将代码编译为CSS。

类库、框架和工具的分别

类库、框架和工具里的界别很有点。框架可以概括一个类库,类库可以兑现类似框架的办法,项目蒙其他一样种工具还是必备的。所以未需要鲜明的区分类库、框架和工具。

JavaScript框架和类库

以下是比照流行水平进行的排序:

jQuery

AngularJS 1

jQuery  
类型 类库
网站 jquery.com
知识库 github.com/jquery/jquery
当前版本 3.2.1
开发人员 jQuery团队
发布日期 2006年8月
大小 最小30kb
用途 通用
使用度 72.4%的网站

趁WordPress、ASP.NET和有些其它框架的发表,jQuery仍然是绝常用之JavaScript类库。它通过以CSS选择器引入到DOM节点检索加链来使事件处理程序、动画与Ajax调用,这彻底改变了客户端的支出。

jQuery近年来备受青睐,对于要少量JavaScript功能的项目以来,仍然是一个吓选。

优点:

  • 遍布范围小

  • 上曲线和,丰富的在线帮助

  • 精简的语法

  • 好开展

缺点:

  • 追加了原生API的进度开销

  • 浏览器兼容性不好,但已经取得改善

  • 所以法扁平

  • 有的行业反对用

Lodash 和 Underscore

AngularJS 2

Lodash  
类型 类库
网站 lodash.com/
知识库 github.com/lodash/lodash/
当前版本 4.17.4
开发人员 John-David Dalton
发布日期 2012年4月
大小 最小4kb – 24kb
用途 通用
使用度
Underscore  
类型 类库
网站 underscorejs.org/
知识库 github.com/jashkenas/underscore
当前版本 1.8.3
开发人员 Jeremy Ashkenas
发布日期 2009年10月
大小 最小6kb
用途 通用
使用度

Lodash和Underscore在本节一起讨论。它们提供了数百只功能性的JavaScript实用程序来上原生字符串、数字、数组和另外旧对象方法。虽然简单只类库之间发生部分重合,但是不太可能在一个门类被并且使用这半单类库。

尽管个别个类库在客户端使用率挺没有,但是可得以于服务器端的Node.js应用程序中动用即时有限个类库。

优点:

  • 微如略

  • 妙的文档易于学习

  • 暨大部分类库和框架兼容

  • 切莫扩大内置对象

  • 足当客户端或服务器上采取

缺点:

  • 些微措施才于ES2015暨重新强版本的JavaScript中可用。

AngularJS 1.x

AngularJS 3

AngularJS  
类型 框架
网站 angularjs.org
知识库 github.com/angular/angular.js
当前版本 1.6.4
开发人员 Google
发布日期 2010年10月
大小 144KB
用途 单页应用程序
使用度

Angular是框架(或MVC应用程序框架)类列表中的第一单。目前极其盛行的Angular版本是1.x,它使双向数据绑定扩展HTML,同时解耦了DOM操作与应用程序逻辑。

尽管版本2(现在凡是本4!)已经发布了,但是Angular 1.x依于出被。

优点:

  • 有可怜企业方使用的盛行框架

  • 开发现代Web应用程序的化解方案

  • 举凡业内MEAN栈(MongoDB,Express.JS,AngularJS,NodeJS)的均等片,有为数不少篇和课程可用

缺点:

  • 念曲线陡峭

  • 好的代码库

  • 没辙晋升至Angular 2.x

Angular 2.x(现在是Angular 4.x)

AngularJS 4

Angular  
类型 框架
网站 angular.io
知识库 github.com/angular/angular.js
当前版本 4.1
开发人员 Google
发布日期 2016年9月
大小 最小450kb
用途 单页面应用
使用度

Angular
2.0受2016年9月揭晓。这是一个整机的重写,它引入了下TypeScript创建的依据模块化组件的范。Angular
4.0为2017年3月公布。

Angular 2.x及v1版本截然不同,也未与其他版本兼容
– 也许Google应该于项目从一个两样之名!

优点:

  • 付出现代Web应用程序的解决方案

  • 是标准MEAN栈的等同有,尽管只有为数不多之学科可用

  • 于熟悉静态类型语言(如C#和Java)的开发人员,TypeScript提供了部分优势。

缺点:

  • 修曲线陡峭

  • 深的代码库

  • 不能从Angular 1.x升级

  • 跟1.x相比,Angular 2.x比较麻烦掌握

  • 读过程被相遇什么问题还是想获得学习资源的言辞,欢迎加入学习交流群
    343599877,我们共学前端!

React

AngularJS 5

React  
类型 框架
网站 facebook.github.io/react/
知识库 github.com/facebook/react
当前版本 15.5.4
开发人员 Facebook和贡献者
发布日期 2013年3月
大小 21kb分钟
用途 单页应用程序
使用度

React是一个用以构建用户界面的JavaScript类库,也是去年极受关注之类库。它小心让Model-View-Controller(MVC)开发之“View”部分,使用其可轻松创建保留状态的UI组件。它是贯彻虚拟DOM的首选类库之一, 它的内存结构能使得地测算差异,页面更新为尤为实用。

统计显示React的使用度似乎好没有,因为它们是以应用程序中使用如非是于网站。

优点:

  • 精美,高效,快捷灵活

  • 简而言之的机件模型

  • 理想的文档和在线资源

  • 只是实现服务器端渲染

  • 即吃欢迎,经历了快速增长

缺点:

  • 急需学习新的定义与语法

  • 构建工具十分要紧

  • 需要外类库或框架提供model和Controller部分

  • 与改DOM的代码和外类库不般配

打探又多关于React the ES6 Way

Vue.js

AngularJS 6

Vue.js  
类型 框架
网站 vuejs.org
知识库 github.com/vuejs/vue
当前版本 2.0
开发人员 Evan You
发布日期 2014年2月
大小 最小19kb
用途 单页面应用
使用度

Vue.js是一个用来构建用户界面的轻量级渐进框架。它提供了一个接近React的杜撰DOM驱动来看图层,可以跟其余类库集成,用于构建强大的单页面应用。该框架是由于事先以AngularJS工作了的Evan
You创建的,他领了AngularJS中温馨爱的一对。

Vue.js使用HTML模板语法将DOM绑定到实例数据。Model是当数额变动时更新view的纯JavaScript对象。

优点:

  • 得快速使,并且逐步普及

  • 挺轻提高高品位开发人员的满意度

  • 借助小,性能好

缺点:

  • 一个较新的花色 – 风险或者会见另行特别

  • 有些因开发人员进行翻新

  • 相比叫任何框架,资源比较少

Backbone.js

AngularJS 7

Backbone.js  
类型 框架
网站 backbonejs.org
知识库 github.com/jashkenas/backbone/
当前版本 1.3.3
开发人员 Jeremy Ashkenas
发布日期 2010年10月
大小 最小8kb
用途 单页面应用
使用度

Backbone.js是供劳务器端框架中广泛的MVC结构的极端早客户端选项之一。它唯一的因是Underscore.js。

Backbone.js声称是一个类库,因为它好同其他品类并入,但是我以为大多数开发人员都看它们是一个框架。

优点:

  • 体积小,重量轻,复杂度低

  • 不添加HTML逻辑

  • 文本丰富

  • 使用了无数以,包括Trello、WordPress.com、LinkedIn和Groupon

缺点:

  • 跟AngularJS等任何框架相比,抽象度较逊色

  • 需格外的组件来实现数量绑定等作用

  • 新颖的框架都休下MVC架构了

Ember.js

AngularJS 8

Ember.js  
类型 框架
网站 emberjs.com
知识库 github.com/emberjs/ember.js
当前版本 2.15.0
开发人员 Ember team
发布日期 2011年12月
大小 最小95kb
用途 单页面应用
使用度

Ember.js是根据Model-View-ViewModel(MVVM)模式之框架之一。它当么包中实现模板化、数据绑定和类库。

优点:

  • 呢客户端应用程序提供了十足解决方案

  • 开发人员可以立刻提高开发效率 – 它用jQuery

  • 好的朝后兼容性及晋升选项

  • 应用了现代Web开发规范

缺点:

  • 特大型分配式

  • 以及任何正在为于小组件结构向上之框架相比,它那个底庞

  • 念曲线陡峭

Knockout.js

AngularJS 9

Knockout.js  
类型 框架
网站 knockoutjs.com
知识库 github.com/knockout/knockout
当前版本 3.4.2
开发人员 Steve Sanderson
发布日期 2010年7月
大小 最小59kb
用途 单页面应用
使用度

Knockout.js是不过早的MVVM框架之一,它确保了UI与底层数据保持并,具有模板与依赖性关系跟踪。

优点:

  • 稍微如方便,无依

  • 帅的浏览器支持,可以支撑到IE6

  • 大好的文档资源

缺点:

  • 正如生的品种可能移得不可开交复杂

  • 腾飞已款款

  • 动情况似乎在削弱

复多的框架和类库

以下项目虽然非是专门流行,但值得考虑:

  • Polymer – 可以过浏览器支持HTML5网页组件的类库

  • Meteor – 一个用以Web应用程序的全栈平台

  • Aurelia  – 一栽相对比新的,轻量级的跨平台框架

  • Svelte – 一个用框架源代码转换为干净JavaScript的初类型

  • Conditioner.js  – 一个基于状态自动加载与卸载模块的类库

工具:执行通用任务

构建工具自动执行各种Web开发任务,例如预处理、编译、优化图像、缩小代码、代码分析与运行测试相当。任务可以一个而尽保证被集合保管。

时极度被欢迎之工具如下:

Gulp.js

AngularJS 10

Gulp.js  
网站 gulpjs.com
知识库 github.com/gulpjs/gulp
当前版本 3.9.1
每月下载 300万

尽管Gulp不是第一独任务执行工具,它也飞变成了极其给欢迎之。Gulp使用容易阅读之JavaScript代码,将自文件加载到流中,并在以数据输出及构建文件夹之前,通过各种插件管理数据。在另其它选项之前检查Gulp.js是简单、快速与风趣之。

NPM

AngularJS 11

NPM  
网站 npmjs.com
知识库 github.com/npm/npm
当前版本 4.5.0
每月下载 300万

npm是Node.js包管理器,但其脚本工具而用于周转通用任务。对于有所少量因关系之简约项目来说,这是一个深好之挑三拣四。然而,更扑朔迷离的任务或会见换得不太适用。

Grunt

AngularJS 12

Grunt  
网站 gruntjs.com
知识库 github.com/gruntjs/grunt
当前版本 1.0.1
每月下载 200万

Grunt是率先批判深受普遍利用的JavaScript任务执行工具有,但该速以及错综复杂的JSON配置也招了Gulp的起来。现在这些题材已经取得了化解,Grunt仍然是一个为欢迎之选择。

工具:模块绑定

大抵个JavaScript文件的治本都改成了同等件繁琐的作业。默认情况下,浏览器文件不会见为编译,因此其据关系必须坐适龄的依次进行加载或连。虽然有像ES6模块和CommonJS这样的挑项,但是浏览器支持是少的,因此模块绑定变得异常第一。

WebPack

AngularJS 13

WebPack  
网站 webpack.js.org
知识库 github.com/webpack/webpack
当前版本 2.5.1
每月下载 600万

Webpack支持具备流行的模块选项,并一度化作React开发之代名词。虽然Webpack声称是一个模块捆绑程序,但是已经可以看做通用任务运行程序了。

Browserify

AngularJS 14

Browserify  
网站 browserify.org
知识库 github.com/substack/node-browserify
当前版本 14.3.0
每月下载 260万

Browserify支持Node.js正在使的CommonJS模块,它以有模块编译成单个浏览器兼容的公文。

RequireJS

AngularJS 15

RequireJS  
网站 requirejs.org
知识库 github.com/jrburke/r.js
当前版本 2.3.3
每月下载 百万

RequireJS是如出一辙种植浏览器中的模块加载器,它呢堪当Node.js中采用。

工具:代码分析

代码分析工具用于分析代码中潜在错或离开语法的正规化。一个未闭合括号还是无声明的变量一定会被检测出。

ESLint

AngularJS 16

ESLint  
网站 eslint.org
知识库 github.com/eslint/eslint
当前版本 3.19.0
每月下载 600万

ESLint是一致栽而插拔的代码分析工具。每个规则都是一个插件,因此好因个体喜欢进行部署。

JSHint

AngularJS 17

JSHint  
网站 jshint.com
知识库 github.com/jshint/jshint
当前版本 2.9.4
每月下载 200万

JSHint是一个活的JavaScript代码分析工具,它好好之平衡了真正的一无是处与老旧的语法。

JSLint

AngularJS 18

JSLint  
网站 jslint.com
知识库 github.com/reid/node-jslint
当前版本 0.10.3
每月下载 50000

JSLint是绝早的代码分析工具之一,它实现了平等套严格的默认规则。

工具:单元测试

测试驱动开发之职责要求需要编制代码来测试好之代码。目前发生众多摘,包括Ava, Tape 和Jest ,但时极其盛行的老三独器是:

Mocha

AngularJS 19

Mocha  
网站 mochajs.org
知识库 github.com/mochajs/mocha
当前版本 3.3.0
每月下载 500万

Mocha是一个JavaScript测试框架,可以于Node.js或浏览器被运作测试。它支持异步测试,并且不时与Chai配合使用,这样好要测试代码以可读取的艺术发挥。

Jasmine

AngularJS 20

Jasmine  
网站 jasmine.github.io
知识库 github.com/jasmine/jasmine-npm
当前版本 2.6.0
每月下载 200万

Jasmine是一个作为令之测试工具,可以在浏览器中自动测试UI和互动。

QUnit

AngularJS 21

QUnit  
网站 https://qunitjs.com/
知识库 github.com/kof/node-qunit
当前版本 1.0.0
每月下载 25000

QUnit是一个单元测试框架,可以以输入特定参数时,检查函数结果。它还反映测试结果,确保无错过特定的代码分支。

总与建议

时太流程的框架是React,同时另外的框架为在向着流行的自由化发展。

设欲一个有惊无险的、通用的Web应用程序,可以考虑动用Vue.js。

一体化框架已经不再让欢迎了,如果你要对一个比大型项目进展严厉的组织管理,AngularJS是一个不错的精选。目前大部分人坚持运用Angular
1.0版,但是长期来讲,如果你愿意上TypeScript,Angular
4.x版本是只再次好的挑选。

jQuery虽然现在连无死流行,在术情报备受吗死少会给波及,但不可否认它是积极开发之,同时为是网站及应用程序的劲工具。jQuery具有中和的学曲线,全球多开发人员能够挺好地理解。

一旦你想只要冒险,可以尝试Svelte这是一个幽默的客户端/服务器框架,它可于构建时事先呈现JavaScript,并且可变更我们付出之计。

工具的选项以项目而异。虽然手上应用Gulp的开发者占大部分,但WebPack却愈发受欢迎。同时您呢非可知错过ESLint和Mocha等测试工具。

相关文章