二〇一七年前端框架、类库、工具大比拼

比较于JavaScript开发人员的多少,近年来JavaScript框架、类库和工具的多寡就好像越多一些。为止前年五月,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于二〇一六年十月发布。那是一个全体的重写,它引入了应用TypeScript创造的基于模块化组件的模型。Angular
4.0于前年三月宣布。

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工作过的伊娃n
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  – 一种相持较新的,轻量级的跨平台框架

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

相关文章