时间:2021-07-01 10:21:17 帮助过:48人阅读
本文将会讨论目前最为流行的客户端JavaScript框架、类库和工具以及它们之间的基本差异。也许本文无法告诉你哪个是最好的,但是最适合自己项目的,就是最好的。
类库是一个有组织的功能集合。典型的类库包括字符串处理、日期、HTML DOM元素、事件、Cookie、动画、网络请求等功能。你可以自己实现一个函数,以便选择该函数被调用时是否需要返回一个值。
类库通常提供一种高级别的抽象方法,能够帮助顺利实现项目的细节部分。例如,Ajax通常依赖于XMLHttpRequest API,只需要几行代码就实现功能,只是浏览器之间存在细微的差异。类库提供了更简单的ajax()函数,因此开发者可以专注于更高级别的业务逻辑上。
类库能够使将开发时间缩短20%,开发者不必担心细节实现。
但是也有缺点:
类库中的错误难以定位和修复
开发团队不能保证快速发布补丁
补丁程序可能会更改API,导致大量代码必须更改
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!
框架是应用程序的骨架。它要求以特定的方式来进行软件设计,在某些节点上实现自己的逻辑。框架通常提供了事件、存储和数据绑定等功能。
框架通常提供了比类库更高层次的抽象,帮助快速构建项目的前80%。
框架的缺点:
如果你的应用程序超出了框架的范围,最后20%可能会很难
框架更新很困难
核心框架代码和概念很少更新
工具会帮助开发工作,但却不是项目的组成部分。工具包括构建系统、编译器、转译器、代码分割器、图像压缩器、部署机制等。
工具帮助实现一个更容易的开发过程。例如,对比于CSS,许多编码者更喜欢Sass,因为它提供了代码分离、嵌套、渲染时变量、循环和函数。浏览器不了解Sass / SCSS语法,因此在测试和部署之前,必须使用适当的工具将代码编译为CSS。
类库、框架和工具之间的区别很小。框架可以包括一个类库,类库可以实现类似框架的方法,项目中任何一种工具都是必不可少的。所以不需要明确的区分类库、框架和工具。
以下是按照流行程度进行的排序:
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 | |
类型 | 类库 |
网站 | 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 | |
类型 | 框架 |
网站 | angularjs.org |
知识库 | github.com/angular/angular.js |
当前版本 | 1.6.4 |
开发人员 | |
发布日期 | 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 | |
类型 | 框架 |
网站 | angular.io |
知识库 | github.com/angular/angular.js |
当前版本 | 4.1 |
开发人员 | |
发布日期 | 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 | |
类型 | 框架 |
网站 | 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 | |
类型 | 框架 |
网站 | 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 | |
类型 | 框架 |
网站 | 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 | |
类型 | 框架 |
网站 | 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 | |
类型 | 框架 |
网站 | 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 | |
网站 | gulpjs.com |
知识库 | github.com/gulpjs/gulp |
当前版本 | 3.9.1 |
每月下载 | 300万 |
虽然Gulp不是第一个任务执行工具,它却很快成为了最受欢迎的。Gulp使用易于阅读的JavaScript代码,将源文件加载到流中,并在将数据输出到构建文件夹之前,通过各种插件管理数据。在任何其它选项之前检查Gulp.js是简单、快速和有趣的。
NPM | |
网站 | npmjs.com |
知识库 | github.com/npm/npm |
当前版本 | 4.5.0 |
每月下载 | 300万 |
npm是Node.js包管理器,但其脚本工具可用于运行通用任务。对于具有少量依赖关系的简单项目来说,这是一个很好的选择。然而,更复杂的任务可能会变得不太适用。
Grunt | |
网站 | gruntjs.com |
知识库 | github.com/gruntjs/grunt |
当前版本 | 1.0.1 |
每月下载 | 200万 |
Grunt是第一批被大规模采用的JavaScript任务执行工具之一,但其速度和复杂的JSON配置却导致了Gulp的兴起。现在这些问题已经得到了解决,Grunt仍然是一个受欢迎的选择。
多个JavaScript文件的管理已经成为了一件繁琐的事情。默认情况下,浏览器文件不会被编译,因此其依赖关系必须以适当的顺序进行加载或连接。虽然有像ES6模块和CommonJS这样的选项,但是浏览器支持是有限的,因此模块绑定变得十分重要。
WebPack | |
网站 | webpack.js.org |
知识库 | github.com/webpack/webpack |
当前版本 | 2.5.1 |
每月下载 | 600万 |
Webpack支持所有流行的模块选项,并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序,但是已经可以用作通用任务运行程序了。
Browserify | |
网站 | browserify.org |
知识库 | github.com/substack/node-browserify |
当前版本 | 14.3.0 |
每月下载 | 260万 |
Browserify支持Node.js正在使用的CommonJS模块,它将所有模块编译成单个浏览器兼容的文件。
RequireJS | |
网站 | requirejs.org |
知识库 | github.com/jrburke/r.js |
当前版本 | 2.3.3 |
每月下载 | 百万 |
RequireJS是一种浏览器中的模块加载器,它也可以在Node.js中使用。
代码分析工具用于分析代码中潜在错误或偏离语法的标准。一个未闭合括号或未声明的变量一定会被检测出。
ESLint | |
网站 | eslint.org |
知识库 | github.com/eslint/eslint |
当前版本 | 3.19.0 |
每月下载 | 600万 |
ESLint是一种可插拔的代码分析工具。每个规则都是一个插件,因此可以根据个人喜好进行配置。
JSHint | |
网站 | jshint.com |
知识库 | github.com/jshint/jshint |
当前版本 | 2.9.4 |
每月下载 | 200万 |
JSHint是一个灵活的JavaScript代码分析工具,它很好的平衡了真正的错误和老旧的语法。
JSLint | |
网站 | jslint.com |
知识库 | github.com/reid/node-jslint |
当前版本 | 0.10.3 |
每月下载 | 50000 |
JSLint是最早的代码分析工具之一,它实现了一套严格的默认规则。
测试驱动开发的任务要求需要编写代码来测试自己的代码。目前有许多选择,包括Ava, Tape 和Jest ,但目前最流行的三个工具是:
Mocha | |
网站 | mochajs.org |
知识库 | github.com/mochajs/mocha |
当前版本 | 3.3.0 |
每月下载 | 500万 |
Mocha是一个JavaScript测试框架,可以在Node.js或浏览器中运行测试。它支持异步测试,并且经常与Chai配合使用,这样可以使测试代码以可读取的方式表达。
Jasmine | |
网站 | jasmine.github.io |
知识库 | github.com/jasmine/jasmine-npm |
当前版本 | 2.6.0 |
每月下载 | 200万 |
Jasmine是一个行为驱动的测试工具,可以在浏览器中自动测试UI和交互。
QUnit | |
网站 | |
知识库 | 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等测试工具。
以上就是最新的前端框架、类库、工具比较的详细内容,更多请关注Gxl网其它相关文章!