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等测试工具。

相关文章