美文网首页我爱编程
2017年最佳 JavaScript 框架、库及工具

2017年最佳 JavaScript 框架、库及工具

作者: 前端那些事情 | 来源:发表于2017-07-06 16:33 被阅读135次

下列项目按照流行程度排序……

jQuery

jQuery
类型 库
网站 jquery.com
代码库 github.com/jquery/jquery
当前版本 3.2.1
开发者 jQuery 团队
发布日期 2006年8月
体积 压缩后 30kb
用于 通用于各种项目
使用率 72.4%的网站
jQuery一直是有史以来使用最多的 JavaScript 库,它还被包含在 WordPress、ASP.NET 和几个其它框架中一同分发。jQuery 引入了 CSS 选择器进行 DOM 节点的获取,并可以通过链式调用挂载事件处理器、执行动画以及 Ajax 操作,这些都对客户端开发产生了革命性的影响。

近几年喜爱 jQuery 的人已经有所减少,但它对于一些并不需要太多 JavaScript 功能的项目来说仍是一个切实可行的选项。

优点:

分发包的体积较小
学习难度不高,网上可找到大量的帮助信息
语法简洁
容易扩展
缺点:

与使用原生 API 相比有性能损失
现在浏览器的兼容性问题已经得到了改善,所以它在这方面的价值显得不那么重要了
使用率不再增长了
业界已经出现了一些反对滥用 jQuery 的意见
React

React
类型 库
网站 facebook.github.io/react/
代码库 github.com/facebook/react
当前版本 15.5.4
开发者 Facebook 及其他贡献者
发布日期 2013年3月
体积 压缩后 21kb
用于 单页应用
使用率 低
这可能是过去一年中被讨论最多的库了。React 宣称自己是一个用于创建用户界面的 JavaScript 库。它主要关注模型-视图-控制器(MVC)开发中的“视图”部分,使用 React 可以更为容易地创建具有状态的用户界面组件。它首创性地实现了虚拟 DOM,这是一种内存中的数据结构可以通过比较结构的变化来更有效率地更新页面。

React 的使用率统计数据较低可能是因为它主要被用在应用程序而不是网站中。大约有38%的开发者宣称他们正在使用 React.

优点:

体积小,效率高,快速,灵活
简单的组件模型
良好的文档和线上资源
可以在服务器端渲染
当前非常受欢迎,正处于快速上升阶段
缺点:

需要学习新的概念和语法
必须依赖于构建工具才能使用
可能需要其它的库或框架来提供模型和控制器部分
可能与其它会改变 DOM 的代码和库不能兼容
Lodash 和 Underscore

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 实用函数作来弥补原生的字符串、数、数组以及其他 JavaScript 基本对象在方法上的的不足。它们在功能上有一些重叠,因此你不会在同一个项目中同时使用这两个库。

它们在客户端上的使用率并不是太高,但它们也都可以用在 Node.js 应用中,从而工作在服务器端。

优点:

小而简单
文档良好,易于学习
与大多数其它库与框架兼容
没有改变或扩展内建对象
在客户端和服务器端均可使用
缺点:

库中包含的一些功能已经在在 ES2015 及后续的 JavaScript 版本中引入,因此有一定程度的冗余
AngularJS 1.x

AngularJS
类型 框架
网站 angularjs.org
代码库 github.com/angular/angular.js
当前版本 1.6.4
开发者 Google
发布日期 2010年10月
体积 144kb
用于 单页应用
使用率 低
Angular 是这份列表中出现的第一个框架(或者说MVC 应用框架)。其最流行的的版本是1.x,它扩展了 HTML 使之具备双向绑定能力,从而将 DOM 操作与应用程序逻辑解耦。

Angular 1.x仍然在持续开发中,但它也同时发布了 Angular 2(现在已经是 Angular 4!)。被搞糊涂了?请往下看……

优点:

得到了几个大公司的采用
它为构建现代 web 应用提供了一套单一而完整的解决方案
它是“标准”的 MEAN 技术栈(MongoDB、Express JS、AngularJS 和 NodeJS)中的一个组成部分
缺点:

与其它竞争者相比学习曲线更为陡峭
庞大的代码体积
无法升级到 Angular 2.x
尽管由 Google 开发,但 Google 并不在自己的产品中使用它?
Angular 2.x(现在是4.x)

Angular
类型 框架
网站 angular.io
代码库 github.com/angular/angular.js
当前版本 4.1
开发者 Google
发布日期 2016年9月
体积 压缩后 450kb
用于 单页应用
使用率 低
Angular 2.0 发布于2016年9月。它名为2.0,其实是一个完全重写的版本。项目引入一个模块化的基于组件的模型,并用 TypeScript(再编译为 JavaScript)写成。2017年3月4.0版本发布(由于一些语义化版本上的问题,3.0版本被直接跳过了),这更增加了在版本上的混乱。

Angurlar 2 及其后续版本与其1.x版本是完全不同的两个项目,它们也互不兼容 —— 如果当时 Google 能给 Angular 2 另取一个不同的名字可能就不会这么令人费解了吧!

优点:

它也是一个用于构建现代 web 应用程序的单一而完整的解决方案
也仍是所谓 MEAN 技术栈的组成部分,尽管 Angular 2+ 的教程要比1.x版本少得多
对于那些熟悉 C# 和 Java 这种静态类型语言的人来说,用 TypeScript 作为开发语言也意味着是一种优点
缺点:

与其它竞争者相比学习曲线更为陡峭
庞大的代码体积
无法从 Angular 1.x 升级
与其 1.x 版本相比,人们对 Angular 2.x 的接受和使用程度要低得多
同样,尽管作为一个 Google 项目,但 Google 自己并没有使用它?
Vue.js

Vue.js
类型 框架
网站 vuejs.org
代码库 github.com/vuejs/vue
当前版本 2.0
开发者 Evan You
发布日期 2014年2月
体积 压缩后 19kb
用于 单页应用
使用率 低
Vue.js 是一个用于构建用户界面的轻量级渐进式的框架。其核心部分提供类似 React 的虚拟 DOM 来驱动视图层,同时它可以与其它库进行整合,也完全可以独立搭建一个完整的单页应用程序。Evan You 创造了 Vue.js,他原本是 AngularJS 的使用者,但他从 AngularJS 中抽取了他喜欢的部分进而创建了 Vue.js。

Vue.js 使用 HTML 模板语法来绑定 DOM 和数据。其模型则是普通的 JavaScript 对象,当数据发生变化时,模型会去更新视图。它也提供了一些辅助性的工具,提供诸如脚手架、路由、状态管理及动画等功能。

优点:

人们接受它很快,并且受欢迎程度一直在增加
容易上手,开发者满意度高
依赖少,性能好
缺点:

还是一个比较新的项目 —— 这可能意味着较大的风险
依赖于作者一个人维护这个项目
与其它竞争者相比,资源较少
Backbone.js

Backbone.js
类型 框架
网站 backbonejs.org
代码库 github.com/jashkenas/backbone/
当前版本 1.3.3
开发者 Jeremy Ashkenas
发布日期 2010年10月
体积 压缩后 8kb
用于 单页应用
使用率 低
MVC 结构一般都出现在服务器端框架中,Backbone.js 则是最早提供客户端 MVC 的框架之一。它唯一的依赖就是其作者的另一个项目 Underscore.js。

Backbone.js 宣称自己是一个库,理由是它可以与其它项目整合。尽管我不像一些人那么武断,但我猜测大多数开发者都会认为它是一个框架。

优点:

体积小,轻量级,不那么复杂
不会向 HTML 中添加逻辑
文档非常好
被许多应用程序采用,例如 Trello、WordPress.com、LinkedIn 和 Groupon。
缺点:

与其它竞争者像 AngularJS 相比,抽象的层次较低(尽管这可能也是个优点)
需要由额外的组件来实现像数据绑定这样的功能
现在越来越多的框架已经不再使用 MVC 架构
Ember.js

Ember.js
类型 框架
网站 emberjs.com
代码库 github.com/emberjs/ember.js
当前版本 2.15.0
开发者 Ember team
发布日期 2011年12月
体积 压缩后 95kb
用于 单页应用
使用率 低
Ember.js 是基于模型—视图—视图模型(MVVM)模式的大型框架之一。它在一个单一包内实现了模板、数据绑定以及其它库的功能。具有 Ruby on Rails 经验的人会对它所倡导的约定优于配置的概念感到很熟悉。

优点:

为客户端应用开发提供了单一解决方案
由于它使用了 jQuery,开发者会很快上手
良好的向后兼容性和升级选项
采用了现代 web 开发的标准
缺点:

分发包的体积大
相对于其它框架正在朝着小型组件化结构的方向变化,人们认为 Ember.js 比较庞大且不可分割
学习曲线更为陡峭
Knockout.js

Knockout.js
类型 框架
网站 knockoutjs.com
代码库 github.com/knockout/knockout
当前版本 3.4.2
开发者 Steve Sanderson
发布日期 2010年7月
体积 压缩后 59kb
用于 单页应用
使用率 低
Knockout.js 是较老的 MVVM 框架之一。它使用观察者模式来保证用户界面与数据保持同步。它的特色在于其模板和依赖跟踪。

优点:

体积小,轻量级,无依赖
优异的浏览器兼容性,甚至支持 IE6
良好的文档
缺点:

在较大型项目中使用它可能会使项目变得比较复杂
框架本身的开发已经放慢了
使用率已经出现衰落
其它值得关注的项目

还想了解更多的项目吗?下面这些项目的流行程度可能不如上面提到的那些,但也是值得关注的:

Polymer :一个使浏览器支持 HTML5 web 组件的库,并且可以跨浏览器工作
Meteor :一个用于开发 web 应用程序的全栈式平台
Aurelia :一个非常新的、轻量级的、跨平台的框架
Svelte :一个非常新的项目,可以将框架代码转换成清晰的 JavaScript 代码
Conditioner.js :一个新的库,能够根据状态自动加载和卸载模块
工具:任务执行

构建工具可以自动运行 web 开发过程中各种不同的任务,例如预处理、编译、图片优化、代码压缩、代码检查以及运行测试。这些任务可以统一由一个单独的可执行包来管理。最受人欢迎的选项包括:

Gulp.js

Gulp.js
网站 gulpjs.com
代码库 github.com/gulpjs/gulp
当前版本 3.9.1
月下载量 300万
Gulp 尽管并非第一个任务执行工具,但它迅速成为了最受欢迎的选择并且我个人也非常喜欢它。Gulp 通过非常易读的 JavaScript 代码将源文件加载到流中,并将其通过管道在不同插件之间流转,然后输出。它很简单、快速而且有趣 —— 建议你在选择其它选项之前一定要试一试 Gulp.js。

npm

npm
网站 npmjs.com
代码库 github.com/npm/npm
当前版本 4.5.0
月下载量 300万
npm 是 Node.js 的包管理器,但它在脚本方面的能力可以被用于任务执行。npm 脚本对于依赖较少的简单项目非常有吸引力,但当面对复杂任务时它很快就会变成了一个不可行的选择了。

Grunt

Grunt
网站 gruntjs.com
代码库 github.com/gruntjs/grunt
当前版本 1.0.1
月下载量 200万
Grunt 是最早被大范围使用的 JavaScript 任务执行器之一,但是由于运行速度不佳和 JSON 配置复杂,导致被 Gulp 赶超。现在的 Grunt 已经解决了这些原本很糟糕的问题,所以它仍然是一个受欢迎的选择。

工具:模块打包

近年来管理大量 JavaScript 文件已经迅速成了每个项目中的例行任务。默认情况下,在浏览器中文件不会被编译,因此必须按照一定的顺序加载或者连接合并所有的依赖文件。对此现在有像 ES6 模块和 CommonJS 这样的解决方案,但浏览器对它们的支持并不好,所以一个模块打包工具就变得必不可少。

Webpack

Webpack
网站 webpack.js.org
代码库 github.com/webpack/webpack
当前版本 2.5.1
月下载量 600万
Webpack 支持所有流行的模块形式,已经变成了 React 开发过程的标配。Webpack 虽然宣称自己是一个模块打包工具,但它也可以被用作一般的任务执行工具。

Browserify

Browserify
网站 browserify.org
代码库 github.com/substack/node-browserify
当前版本 14.3.0
月下载量 260万
Browserify 支持 Node.js 所使用的 CommonJS 模块,它把所有模块编译成一个单独的可在浏览器中执行的文件。

RequireJS

RequireJS
网站 requirejs.org
代码库 github.com/jrburke/r.js
当前版本 2.3.3
月下载量 100万
RequireJS 是一个运行在浏览器中的模块加载工具,它也可以在 Node.js 中使用。

本人长期维护的前端公众号欢迎大家关注


前端那些事

相关文章

网友评论

    本文标题:2017年最佳 JavaScript 框架、库及工具

    本文链接:https://www.haomeiwen.com/subject/esohhxtx.html