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

比于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

图片 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

图片 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

图片 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)

图片 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

图片 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

图片 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

图片 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

图片 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

图片 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

图片 10

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

虽Gulp不是第一个任务履行工具,它却迅速成为了不过被欢迎之。Gulp使用好阅读之JavaScript代码,将自文件加载到流中,并以将数据输出及构建文件夹之前,通过各种插件管理数据。在另其它选项之前检查Gulp.js是大概、快速和有意思之。

NPM

图片 11

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

npm是Node.js包管理器,但那个脚本工具而用以运行通用任务。对于所有少量指关系的简便项目来说,这是一个百般好之选。然而,更复杂的职责或会见变换得无极端适用。

Grunt

图片 12

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

Grunt是率先批判为普遍使用的JavaScript任务尽工具有,但那个速度和错综复杂的JSON配置也招致了Gulp的勃兴。现在这些问题既获了解决,Grunt仍然是一个受欢迎的挑三拣四。

工具:模块绑定

差不多只JavaScript文件之军事管制都成为了千篇一律桩繁琐的作业。默认情况下,浏览器文件不见面被编译,因此该赖关系要以合适的顺序进行加载或连续。虽然发生像ES6模块和CommonJS这样的挑三拣四项,但是浏览器支持是片的,因此模块绑定变得深重点。

WebPack

图片 13

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

Webpack支持有流行的模块选项,并就改成React开发的代名词。虽然Webpack声称是一个模块捆绑程序,但是都可以当做通用任务运行程序了。

Browserify

图片 14

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

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

RequireJS

图片 15

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

RequireJS是一致种植浏览器被之模块加载器,它呢得以以Node.js中利用。

工具:代码分析

代码分析工具用于分析代码中潜在左或离开语法的专业。一个未闭合括号还是非声明的变量一定会让检测出。

ESLint

图片 16

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

ESLint是同样种而插拔的代码分析工具。每个规则都是一个插件,因此可因个人爱好进行布置。

JSHint

图片 17

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

JSHint是一个活的JavaScript代码分析工具,它很好之平衡了实在的缪与老旧的语法。

JSLint

图片 18

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

JSLint是极度早的代码分析工具有,它实现了一致仿照严格的默认规则。

工具:单元测试

测试驱动开发之职责要求用编制代码来测试好的代码。目前时有发生成千上万选项,包括Ava, Tape 和Jest ,但目前极盛行的老三只器是:

Mocha

图片 19

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

Mocha是一个JavaScript测试框架,可以在Node.js或浏览器中运作测试。它支持异步测试,并且每每跟Chai配合以,这样可使测试代码以可读取的道发挥。

Jasmine

图片 20

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

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

QUnit

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

相关文章