JavaScript框架,库和工具

jQuery

jQuery
类型 library
官网 jquery.com
中文文档 jQuery API 中文文档v3.2.1
代码仓库 github.com/jquery/jquery
当前版本 3.2.1
开发者 jQuery team
发布日期 August 2006
文件尺寸 30kb min
用途 通用
使用率 72.4% of all websites

jQuery 仍然是最常用的JavaScript 库,WordPress,ASP.NET和其他几个框架的创建和分发都依赖于它。它彻底改变了客户端的开发,将CSS 选择器引入到DOM 节点检索加链接来应用事件处理程序、动画和Ajax调用。

虽然jQuery 最近几年失宠,但对于需要少量JavaScript 功能的项目来说,它仍然是一个可行的选择。

优点:

  • 分布规模小
  • 学习曲线平缓,在线帮助多
  • 语法简洁
  • 容易延伸

缺点:

  • 增加了本机API的速度开销
  • 浏览器兼容性的改善降低了它的性能
  • 用法扁平
  • 有些开发人员抵制使用

React

React
类型 library
官网 facebook.github.io/react/
中文文档 React 中文文档v15.5.4
代码仓库 github.com/facebook/react
当前版本 15.5.4
开发者 Facebook 与贡献者
发布日期 March 2013
文件尺寸 21kb min
用途 单页面应用
使用率 low

React 也许是过去一年里最受关注的库了吧。React 是一个用于构建用户界面的JavaScript 库,它专注于MVC 模式(Model-View-Controller) 的“View” 部分,并且可以轻松创建保留状态的UI 组件。它是实现虚拟DOM 的第一个库, 内存结构计算差异,有效地更新页面。

从统计数据中看,反应的使用似乎很低,可能是因为它更多的在应用程序中使用,而不是网站上使用。38%的程序员表示他们正在使用该库(愚人码头注:译文)

优点:

  • 小巧,高效,快捷灵活
  • 简单的组件模型
  • 良好的文档和在线资源
  • 适用于服务器端渲染
  • 处于高速发展期

缺点:

  • 需要学习新的概念和语法
  • 构建工具必不可少
  • 要求其他库或框架提供Model 和Control
  • 与修改DOM 的代码和其他库不兼容

Lodash 和Underscore

Lodash
类型 library
官网 lodash.com/
中文文档 Lodash 中文文档v4.16.1
代码仓库 github.com/lodash/lodash/
当前版本 4.17.4
开发者 John-David Dalton
发布时间 April 2012
文件尺寸 4kb – 24kb min
用途 通用
使用率 low
Underscore
类型 library
官网 underscorejs.org/
中文文档 Underscore.js 中文文档v1.8.3
代码仓库 github.com/jashkenas/underscore
当前版本 1.8.3
开发者 Jeremy Ashkenas
发布日期 October 2009
文件尺寸 6kb min
用途 通用
使用率 low

本节将Lodash 和Underscore 放在一起,因为它们提供了数百个功能性的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 操作与应用程序逻辑分离。

尽管版本2(现在是版本4!)已经发布,Angular 1.x仍在开发中。见下文…

优点:

  • 众多大公司采用
  • 以单一的解决方案来生产现代Web 应用程序
  • “标准” MEAN 堆栈(MongoDB,Express.JS,AngularJS,NodeJS) 的一部分,有众多文档和教程可用来参考

缺点:

  • 学习曲线更加陡峭
  • 代码库很大
  • 不能升级到Angular 2.x

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

Angular
类型 框架
官网 angular.io
仓库地址 github.com/angular/angular.js
最新版本 4.1
开发者 Google
发布日期 2016年9月
文件尺寸 450kb min
用途 单页应用
使用率

Angular 2.0 于2016 年9 月发布。这是一次完全的重写,它引入了基于模块化组件的模型,使用TypeScript(被编译为JavaScript )创建。让人困惑的是,版本4.0 于2017 年3 月发布( v3 被跳过以避免语义版本的问题)。

Angular 2+ 与v1 截然不同。与其他也不兼容– 也许Google 应该给该项目另外起一个名字。

优点:

  • 单一的解决方案来生产现代Web应用程序;
  • 尽管Angular 2+教程较少,但它仍是MEAN堆栈的一部分
  • 对于熟悉静态类型语言(如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 min
用途 单页应用
使用率

Vue.js 是一个用于构建用户界面的轻量级渐进式框架。core(核心) 提供了一个类似于React 的虚拟DOM 视图层,它可以与其他库集成,但它也能支持单页应用程序。该框架由以前在AngularJS 工作过的Evan You 创建,所以该框架提取了AngularJS 中作者喜欢的部分。

Vue.js 使用HTML 模板语法将DOM 绑定到实例数据。模型是在更改数据时更新视图的纯JavaScript 对象。附加工具提供了脚手架,路由,状态管理,动画等功能。

优点:

  • 易于上手,普及度高
  • 起点简单,但完成满意度高
  • 依赖性小,性能好

缺点:

  • 是一个新项目,所以风险可能会很大
  • 依赖开发人员来更新
  • 相对同类框架,资源较少;(愚人码头注:在国内似乎不存在这个缺点)

Backbone.js

Backbone.js
类型 框架
官网 backbonejs.org
中文文档 Backbone.js 中文文档v1.1.2
仓库地址 github.com/jashkenas/backbone/
最新版本 1.3.3
开发者 Jeremy Ashkenas
发布日期 2010年10月
文件大小 8kb min
用途 单页应用
使用率

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 min
用途 单页应用
使用率

Ember.js是基于Model-View-ViewModel(MVVM)模式的框架之一。它在单个包中实现模板化,数据绑定和库。如果Ruby on Rails体验的用户,能够迅速熟悉其配置概念。

优点:

  • 为客户端应用程序提供单一解决方案
  • 程序员可以快速开发—其使用jQuery
  • 良好的向后兼容性和升级选项
  • 采用了现代Web 开发标准

缺点:

  • 大分配large distributable
  • 与其他正在向较小组件结构移动的框架相比,被认为是单一的
  • 陡峭的学习曲线

Knockout.js

Knockout.js
类型 框架
官网 knockoutjs.com
仓库地址 github.com/knockout/knockout
最新版本 3.4.2
开发者 Steve Sanderson
发布日期 2010年7月
文件大小 59kb min
用途 单页应用
使用率

较早的MVVM框架之一,Knockout.js 使用观察者来确保UI 与底层数据保持同步。它具有模板和依赖关系跟踪。

优点:

  • 小而轻便,无依赖
  • 支持回溯到IE6
  • 优质文档

缺点:

  • 较大的项目可能变得复杂
  • 发展速度已经放缓
  • 使用情况正在下降

值得注意的项目

如果你希望了解更多项目?以下项目不太受欢迎,但值得考虑:

  • Polymer –一个可以跨浏览器支持HTML5 Web组件的库。
  • Meteor –一个用于Web应用程序的全栈平台。
  • Aurelia –一个相对较新,轻量级的跨平台框架。
  • Svelte –一个非常新的项目,它将框架源代码转换为干净的JavaScript。
  • Conditioner.js –一个基于状态自动加载和卸载模块的库。

Tools(工具):通用的任务执行工具

构建工具可自动执行各种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包管理器,但是它的scripts功能可以用于通用的任务执行。对于那些没有多少依赖性的简单项目来说,这是一个很不错的选择。然而,对于复杂的任务来说,它可能就有些力不从心。

Grunt

Grunt
官网 gruntjs.com
仓库地址 github.com/gruntjs/grunt
最新版本 1.0.1
月下载量 200万

Grunt 是第一个实现批量执行的JavaScript 任务执行器,但速度和复杂的JSON配置导致了Gulp 的崛起。现在,最糟糕的问题已经解决,Grunt 仍然是一个不错的选择。

Tools(工具):模块打包工具

管理多个JavaScript文件是一件繁琐的事情。在默认情况下,浏览器文件未被编译,因此依赖关系必须以适当的顺序加载或连接。
虽然有很多选项,如ES6 ModulesCommonJS,但浏览器支持是有限的,因此模块打包工具变得至关重要。

Webpack

Webpack
官网 webpack.js.org
中文文档 webpack 中文文档v2.2
仓库地址 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中使用。

Tools(工具):代码检查工具(Linting)

愚人码头注:很多编辑器,IDE都集成了这类相关的工具,或许对你来说这些工具挺陌生,但是其实你一直在使用。

“Linting” 是分析你的代码中潜在错误或偏离语法标准的隐患。有了这种工具,你永远不会遗漏一个结束括号或未声明一个变量!

ESLint

ESLint
官网 eslint.org
仓库地址 github.com/eslint/eslint
最新版本 3.19.0
月下载量 600万

ESLint 是一种插件式的代码检查工具,每个规则都是一个插件,因此可以根据你的喜好进行配置。

JSHint

JSHint
官网 jshint.com
仓库地址 github.com/jshint/jshint
最新版本 2.9.4
月下载量 200万

一个灵活的JavaScript 代码检查工具,它能在真正的错误和看似错误的语法需求之间找到一个平衡点。JSHint是我个人最喜欢的。

JSLint

JSLint
官网 jslint.com
仓库地址 github.com/reid/node-jslint
最新版本 0.10.3
月下载量 5万

这是最先实现一套严格默认规则的代码校验工具之一,但是这对于我是使用场景貌似不太一致(我不喜欢使用这个工具)。

Tools(工具):测试套件

测试驱动开发(Test-Driven-Development) 需要求你在开始编写代码之前,首先编写测试代码来测试你的代码。也欢迎你编写代码来测试你的测试代码!

代码测试的工具有很多,如AvaTapeJest,但最流行的三个选项是:

Mocha

Mocha
官网 mochajs.org
仓库地址 github.com/mochajs/mocha
最新版本 3.3.0
月下载量 500万

Mocha是一个JavaScript测试框架,可以在Node.js或浏览器中运行测试。js或浏览器。它支持异步测试,经常与Chai搭配,以使测试代码以一种可读的方式表达。

Jasmine

Jasmine
官网 jasmine.github.io
仓库地址 github.com/jasmine/jasmine-npm
最新版本 2.6.0
月下载量 200万

Jasmine 是一个行为驱动的测试套件,可以在浏览器中自动测试你的UI和交互。

QUnit

QUnit
官网 https://qunitjs.com/
仓库地址 github.com/kof/node-qunit
最新版本 1.0.0
月下载量 2.5万

毫无疑问,QUnit是一个单元测试框架,它可以在传递特定参数时检查函数结果。它还将报告测试覆盖率,以确保您没有遗漏特定的代码分支。

Tools(工具):其他测试工具

尽管我尽了最大的努力,但我也不是每个人都喜欢JavaScript !诸如TypeScriptLiveScriptCoffeeScript等编译器可以使你的开发生活更加愉快。或者,考虑一下Babel转译工具,它可以将现代的、简洁的ES2015源代码转译为跨浏览器兼容的ES5代码。

有几十种JavaScript驱动的HTML模板引擎,包括MustacheHandlebarsPug (Jade)EJS。但就我而言,更喜欢保留JavaScript语法(如EJSdoT )的轻量级选项。

最后,当你可以自动化生成文档时,为什么要自己编写呢?与ES2015兼容的文档生成器包括ESDocJSDocJSDoc中文文档) ,YUIdocdocumentation.jsTranscription

发表评论

电子邮件地址不会被公开。 必填项已用*标注