赞
踩
javascript框架库
似乎有比开发人员更多JavaScript框架,库和工具。 在2018年底, 在GitHub上的快速搜索显示230万个JavaScript项目。 npm
已成为全球最大的模块系统 , 在npmjs.com上有700,000个可用软件包,每月都有数十亿的下载量。
2018.12.06:文章已更新以反映JavaScript生态系统的当前状态。 今年的更新由Sencha赞助。 感谢您对使SitePoint成为可能的合作伙伴的支持!
本文致力于解释最流行的客户端JavaScript框架,库和工具之间的基础知识和基本差异。 它们对您来说是否“最佳”是另一个问题。 选择一些并坚持一段时间。 请注意,无论您选择什么,您最喜欢的选项都会被“更好”的东西所取代!
在阅读本文之前,请接受以下条款和条件!…
根据上下文,术语“框架”,“库”和“工具”在不同的时间对不同的人意味着不同的事物。 此处使用的一般定义:
库是有用功能的有组织的集合。 典型的库可能包含处理字符串,日期,HTML DOM元素,事件,Cookie,动画,网络请求等的函数。 每个函数都将值返回到调用应用程序,可以根据需要选择实现该功能。 可以将其看作是汽车部件的选择:您可以随意使用任何部件来构造可行驶的车辆,但必须自己制造发动机。
库通常提供更高级别的抽象,可以平滑实现细节和不一致之处。 例如,可以使用XMLHttpRequest API实现Ajax,但这需要几行代码,并且各浏览器之间存在细微的差异。 库可以提供更简单的ajax()
函数,因此您可以自由地专注于更高级别的业务逻辑。
库可以将开发时间减少20%,因为您不必担心更好的细节。 缺点:
框架是应用程序框架。 它要求您以特定的方式进行软件设计,并在某些点插入自己的逻辑。 通常为您提供事件,存储和数据绑定等功能。 使用汽车的类比,框架提供了工作底盘,车身和发动机。 您可以添加,删除或修补某些组件,以使车辆保持运行状态。
框架通常提供比库更高的抽象级别,并且可以帮助您快速构建项目的前80%。 缺点:
工具有助于开发,但不是项目的组成部分。 工具包括构建系统,编译器,编译器,代码压缩器,图像压缩器,部署机制等。
工具应提供更轻松的开发过程。 例如,与CSS相比,许多编码器更喜欢Sass ,因为它提供了代码分离,嵌套,渲染时变量,循环和函数。 浏览器不了解Sass / SCSS语法,因此在测试和部署之前,必须使用适当的工具将代码编译为CSS。
库,框架和工具之间的区别很少清楚。 一个框架可以包括一个库。 库可以实现类似框架的方法。 工具可能是必不可少的。 我尝试标记每个项目,但范围可能会有所不同。
如果这听起来太复杂,则可以考虑对原始JavaScript进行编码。 很好,但是您将不可避免地编写必须维护的自己的库和/或框架代码。 JavaScript本身是浏览器和操作系统抽象塔上的抽象!
按使用/受欢迎程度/炒作的大致顺序进行项目…
jQuery的 | 描述 |
---|---|
类型 | 图书馆 |
网站 | jquery.com |
资料库 | github.com/jquery/jquery |
GitHub明星 | 50,000+ |
当前版本 | 3.3.1 |
开发商 | jQuery团队 |
发射日期 | 2006年8月 |
典型尺寸 | 30kb分钟 |
典型用途 | 一般用途 |
用法 | 所有网站的73.5% |
jQuery仍然是有史以来使用最广泛JavaScript库,并与WordPress,ASP.NET和其他几个框架一起分发。 通过将CSS选择器引入DOM节点检索以及应用事件处理程序,动画和Ajax调用的链接,它彻底改变了客户端开发。
近年来,jQuery已不受开发人员青睐,但使用率仍然很高。 对于需要大量JavaScript功能的项目,它仍然是可行的选择。
优点:
缺点:
React | 描述 |
---|---|
类型 | 图书馆 |
网站 | facebook.github.io/react/ |
资料库 | github.com/facebook/react |
GitHub明星 | 115,000+ |
当前版本 | 16.6.3 |
开发商 | Facebook和贡献者 |
发射日期 | 2013年3月 |
典型尺寸 | 21kb分钟 |
典型用途 | 单页应用 |
用法 | 低 |
React可能是最近几年最受关注的库,它声称是用于构建用户界面JavaScript库。 它着重于模型-视图-控制器(MVC)开发的“视图”部分,并易于创建保留状态的UI组件。 它是最早实现虚拟DOM的库之一。 内存结构可计算差异并有效地更新页面。
在统计数据中,React的使用率似乎较低,可能是因为它用于应用程序而非网站。 几乎70%的开发人员声称有使用该库的经验 。
优点:
缺点:
AngularJS | 描述 |
---|---|
类型 | 构架 |
网站 | angularjs.org |
资料库 | github.com/angular/angular.js |
GitHub明星 | 60,000+ |
当前版本 | 1.7.5 |
开发商 | 谷歌 |
发射日期 | 2010年10月 |
典型尺寸 | 144kb |
典型用途 | 单页应用 |
用法 | 低 |
Angular是第一个出现在该列表中的框架(或MVC应用程序框架) 。 最受欢迎的版本是1.x版,该版本使用双向数据绑定扩展了HTML,同时将DOM操作与应用程序逻辑分离。
尽管发布了第2版(现在是第4版!),但Angular 1.x仍在开发中。 见下文…
优点:
缺点:
角度的 | 描述 |
---|---|
类型 | 构架 |
网站 | 角度 |
资料库 | github.com/angular/angular |
GitHub明星 | 43,000+ |
当前版本 | 7.1 |
开发商 | 谷歌 |
发射日期 | 2016年9月 |
典型尺寸 | 450kb分钟 |
典型用途 | 单页应用 |
用法 | 低 |
Angular 2.0于2016年9月发布。它是一次完整的重写,引入了使用TypeScript创建的基于模块化组件的模型(已编译为JavaScript)。 更令人困惑的是,2017年3月发布了4.0版本(为了避免语义版本问题,跳过了v3版本)。
角度2+与v1根本不同。 两者都不兼容- 也许Google应该给该项目取一个不同的名字?
优点:
缺点:
Vue.js | 描述 |
---|---|
类型 | 构架 |
网站 | vuejs.org |
资料库 | github.com/vuejs/vue |
GitHub明星 | 120,000+ |
当前版本 | 2.5.17 |
开发商 | 埃文·尤 |
发射日期 | 2014年2月 |
典型尺寸 | 19kb分钟 |
典型用途 | 组件和单页应用程序 |
用法 | 低 |
Vue.js是用于构建用户界面的轻量级渐进框架。 该内核提供了一个类似于React的虚拟DOM驱动的视图层,该视图层可以与其他库集成,但也能够为单页应用程序提供支持。 该框架是由Evan You创建的,他曾使用过AngularJS,但想提取他喜欢的部分。
Vue.js使用HTML模板语法将DOM绑定到实例数据。 模型是普通JavaScript对象,可在更改数据时更新视图。 其他工具提供了用于脚手架,路由,状态管理,动画等的功能。
优点:
缺点:
扩展JS | 描述 |
---|---|
类型 | 框架和组件库 |
网站 | sencha.com/products/extjs/ |
当前版本 | 6.6.0 |
开发商 | 煎茶 |
发射日期 | 2007年12月 |
典型尺寸 | 取决于要求:85 – 500kb |
典型用途 | 组件和单页应用程序 |
用法 | 低 |
Ext JS是从YUI-Ext演变而来的,并且是此列表中使用时间最长的历史之一。 尽管以其广泛的可配置,可访问的跨浏览器UI组件和数据可视化工具而闻名,但Ext JS还提供了用于构建完整应用程序的框架。 另外,您可以将组件库与React或Angular一起使用。
Ext JS是这里唯一提供商业培训和支持的框架。 还可以选择让Sencha团队帮助您检查代码,自动化测试并迁移到其他平台。
优点:
缺点:
Lodash | 描述 |
---|---|
类型 | 图书馆 |
网站 | lodash.com/ |
资料库 | github.com/lodash/lodash/ |
GitHub明星 | 35,000+ |
当前版本 | 4.17.11 |
开发商 | 约翰·戴维·道尔顿 |
发射日期 | 2012年4月 |
典型尺寸 | 4kb – 24kb分钟 |
典型用途 | 一般用途 |
用法 | 低 |
下划线 | 描述 |
---|---|
类型 | 图书馆 |
网站 | underscorejs.org/ |
资料库 | github.com/jashkenas/underscore |
GitHub明星 | 24,000+ |
当前版本 | 1.8.3 |
开发商 | 杰里米·阿什肯纳斯(Jeremy Ashkenas) |
发射日期 | 2009年10月 |
典型尺寸 | 6kb分钟 |
典型用途 | 一般用途 |
用法 | 低 |
Lodash和Underscore在本节中进行了组合,因为它们提供了数百个功能性JavaScript实用程序来补充本机字符串,数字,数组和其他原始对象方法。 有一些重叠,因此您不太可能在单个项目中同时需要两个库。
客户端使用率很低,但是服务器端Node.js应用程序都可以采用这两个库。
优点:
缺点:
Backbone.js | 描述 |
---|---|
类型 | 构架 |
网站 | 骨架js.org |
资料库 | github.com/jashkenas/backbone/ |
GitHub明星 | 37,000+ |
当前版本 | 1.3.3 |
开发商 | 杰里米·阿什肯纳斯(Jeremy Ashkenas) |
发射日期 | 2010年10月 |
典型尺寸 | 8kb分钟 |
典型用途 | 单页应用 |
用法 | 低 |
Backbone.js是提供服务器端框架中常见的MVC结构的最早的客户端选项之一。 它唯一的依赖性是由同一开发人员创建的Underscore.js 。
Backbone.js声称是一个库,因为它可以与其他项目集成。 我怀疑大多数开发人员都认为它是一个框架,尽管没有其他人那么自以为是。
优点:
缺点:
Ember.js | 描述 |
---|---|
类型 | 构架 |
网站 | emberjs.com |
资料库 | github.com/emberjs/ember.js |
GitHub明星 | 20,000+ |
当前版本 | 3.6.0 |
开发商 | 灰烬团队 |
发射日期 | 2011年12月 |
典型尺寸 | 95kb分钟 |
典型用途 | 单页应用 |
用法 | 低 |
Ember.js是基于Model-View-ViewModel(MVVM)模式的较大型框架之一。 它在单个程序包中实现模板,数据绑定和库。 具有Ruby on Rails经验的人会立即熟悉约定配置的概念。
优点:
缺点:
Knockout.js | 描述 |
---|---|
类型 | 构架 |
网站 | kickoutjs.com |
资料库 | github.com/knockout/knockout |
GitHub明星 | 9,000+ |
当前版本 | 3.5.0 |
开发商 | 史蒂夫·桑德森 |
发射日期 | 2010年7月 |
典型尺寸 | 59kb分钟 |
典型用途 | 单页应用 |
用法 | 低 |
Knockout.js是较早的MVVM框架之一,它使用观察器来确保UI与基础数据保持同步。 它具有模板和依赖性跟踪功能。
优点:
缺点:
渴望更多? 以下项目不太受欢迎,但值得
考虑:
构建工具可自动执行各种Web开发任务,例如预处理,编译,模块捆绑,图像优化,代码最小化,整理和运行测试。 任务通常在单个可执行程序包中一起管理。 最受欢迎的选项:
Webpack | 描述 |
---|---|
网站 | webpack.js.org |
资料库 | github.com/webpack/webpack |
GitHub明星 | 45,000+ |
当前版本 | 4.25.1 |
每周下载 | 400万 |
Webpack支持所有流行的模块选项,并已成为React开发的代名词。 尽管自称是模块捆绑器,但Webpack可以用作通用任务运行程序。 基于JavaScript对象的配置可能有点尴尬。 可以使用生成器,但是一些Webpack用户已经迁移到Parcel ,以简化配置并缩短编译时间。
Gulp.js | 描述 |
---|---|
网站 | gulpjs.com |
资料库 | github.com/gulpjs/gulp |
GitHub明星 | 30,000+ |
当前版本 | 4.0.0(3.9.1仍处于活动状态) |
每周下载 | 750,000+ |
尽管Gulp不是第一个任务执行者,但他很快成为最受欢迎的人之一,并且是我个人的最爱 。 Gulp使用易于阅读JavaScript代码将源文件加载到流中,并在将各种数据输出到构建文件夹之前通过各种插件通过管道传输数据。 它简单,快速且有趣,但是开发人员已迁移到Webpack。
npm | 描述 |
---|---|
网站 | npmjs.com |
资料库 | github.com/npm/npm |
GitHub明星 | 17,000+ |
当前版本 | 6.4.1 |
每周下载 | 百万 |
npm是Node.js包管理器,但其脚本工具可用于运行通用任务 。 对于没有依赖性的简单项目,这是一个有吸引力的选择。 但是,更复杂的任务可能很快变得不切实际。
咕unt声 | 描述 |
---|---|
网站 | gruntjs.com |
资料库 | github.com/gruntjs/grunt |
GitHub明星 | 17,000+ |
当前版本 | 1.0.3 |
每周下载 | 425,000 |
Grunt是最早获得大规模采用JavaScript任务执行者之一,但是速度和复杂的JSON配置导致Gulp的兴起。 最糟糕的问题已经解决,Grunt仍然是受欢迎的选择。
管理多个JavaScript文件可能会变得很繁琐。 除非您可以本地采用相对较新的ES6模块导入语法 ,否则必须以适当的顺序加载或连接浏览器中JavaScript依赖项。 如果您需要支持旧版浏览器(2018年之前发布的任何版本),则可以使用模块捆绑器,但是随着时间的流逝,使用这些工具的需求将会减少。
浏览器 | 描述 |
---|---|
网站 | browserify.org |
资料库 | github.com/browserify/browserify |
GitHub明星 | 12,000+ |
当前版本 | 16.2.3 |
每周下载 | 480,000 |
Browserify支持Node.js使用的CommonJS模块,以将所有模块编译成一个与浏览器兼容的文件。
需求JS | 描述 |
---|---|
网站 | requirejs.org |
资料库 | github.com/requirejs/r.js |
GitHub明星 | 2,500+ |
当前版本 | 2.3.6 |
每周下载 | 230,000 |
RequireJS从浏览器内部模块加载器开始,尽管它也可以在Node.js中使用。 它支持AMD语法。
Linting分析您的代码中是否存在潜在的错误或与语法标准的偏离。 您再也不会错过右括号或未声明的变量了!
ESLint | 描述 |
---|---|
网站 | eslint.org |
资料库 | github.com/eslint/eslint |
GitHub明星 | 12,000+ |
当前版本 | 5.9.0 |
每周下载 | 400万 |
ESLint是大多数IDE,编辑器,捆绑器和任务运行器支持的最流行的整理工具。 每个规则都是一个插件,因此您可以根据自己的喜好对其进行配置。
捷迅 | 描述 |
---|---|
网站 | jshint.com |
资料库 | github.com/jshint/jshint |
GitHub明星 | 8,000+ |
当前版本 | 2.9.6 |
每周下载 | 390,000 |
灵活JavaScript语言,比ESLint的可配置性差,但在真正的错误和学究的语法要求之间取得了很好的平衡。
杰林特 | 描述 |
---|---|
网站 | jslint.com |
资料库 | github.com/reid/node-jslint |
GitHub明星 | 8,000+ |
当前版本 | 0.12.0 |
每周下载 | 11,500 |
第一个Linter中的一个,它实现了一组严格的默认规则。 开发速度放慢了,对于某些开发人员来说可能毫不妥协。
测试驱动开发要求您在开始编写代码之前先编写代码以对其进行测试。 也欢迎您编写代码来测试您的测试代码!
有很多选项,包括Ava , Tape和Jasmine,但是目前三个最受欢迎的选项是…
笑话 | 描述 |
---|---|
网站 | https://jestjs.io/ |
资料库 | github.com/kof/node-qunit |
GitHub明星 | 21,000+ |
当前版本 | 23.6.0 |
每周下载 | 200万 |
来自Facebook的测试框架,由于其与React和Webpack的紧密联系而日益流行。
摩卡咖啡 | 描述 |
---|---|
网站 | mochajs.org |
资料库 | github.com/mochajs/mocha |
GitHub明星 | 16,500+ |
当前版本 | 5.2.0 |
每周下载 | 180万 |
Mocha可以在Node.js和浏览器中运行测试。 它支持异步测试,并且通常与Chai配对使用,以使测试代码能够以可读的方式表示。 这是多年来最受欢迎的选项。
茉莉花 | 描述 |
---|---|
网站 | jasmine.github.io |
资料库 | github.com/jasmine/jasmine-npm |
GitHub明星 | 300+ |
当前版本 | 3.3.0 |
每周下载 | 750,000 |
Jasmine是一个行为驱动的测试套件,可以自动测试您的UI和浏览器中的交互。
尽管我尽了最大的努力,但我接受的并不是每个人都喜欢JavaScript! 诸如TypeScript , LiveScript和CoffeeScript之类的编译器可以使您的开发生活更加愉快。 或者,考虑将Babel转换为简洁的现代ES2015源代码, 使其成为跨浏览器兼容的ES5代码。
有数十种基于JavaScriptHTML模板引擎,包括Mustache , Handlebars , Pug(Jade)和EJS 。 我更喜欢保留JavaScript语法(例如EJS和doT)的轻量级选项。
最后,为什么要在可以自动化时编写自己的文档? 与ES2015兼容的文档生成器包括ESDoc , JSDoc , YUIdoc , documentation.js和Transcription 。
如果您遵循人群的智慧, React目前正处于势头之下,其他库也在朝着相似的技术方向发展。 这是一个安全的职业选择,但您还应该考虑使用Vue.js或React-compatible-but-smaller Preact 。
整体框架已不再受欢迎,但是,如果您需要用于大型项目的严格结构, AngularJS仍然是受欢迎的选择。 大多数开发人员都坚持使用1.0版,但这可能是不必要的选择。 从长远来看,版本2+可能是一个更安全的选择,但是您将需要学习TypeScript。
Sencha的Ext JS是企业(小型企业到企业)寻求包含框架以及预先构建的集成组件和工具(包括获得商业支持)的选择的绝佳选择。 Ext JS还轻松地将其强大的组件库与React和Angular集成在一起,以供寻求实现预构建组件而不是自己构建组件的开发人员使用。
不要打折jQuery 。 它不是新潮,并且在技术媒体中很少提及,但是它是经过积极开发的,并且对于网站和应用程序具有强大的功能。 jQuery的学习曲线很浅,并且被全世界许多开发人员所理解。
如果您喜欢冒险,可以使用Svelte和Rawact等新的编译器选项将框架代码转换为原始 JavaScript。 删除了框架依赖关系,代码显着减小,并且运行速度更快。
工具的选择不太重要,并且可能因项目而异。 大多数WebPack , Gulp或npm脚本。 使用ESLint和Jest进行测试不会出错,但是可以尝试许多替代方法。
也就是说,每个项目,团队和技能都不同。 您进行评估的时间有限,因此很容易使用您所知道的信息。 本文将收到建议使用FrameworkX的评论,但是当您用锤子敲打时,一切看起来都像钉子。
最后,永远不要忘记,库,框架和工具是可选的! 在过去的十年中,JavaScript开发发生了翻天覆地的变化。 我们已经从一些基本的帮助程序库变成了压倒性的选择。 很容易陷入不断增加的陷阱,或者每隔几个月就会切换到最新的热门框架。 始终考虑使用原始JavaScript,尤其是对于较小的个人用户。 您获得的知识不会过时,并且在评估其他项目的框架时将变得无价。
我是否错过,不满意或称赞您最喜欢JavaScript库,框架和工具的好处? 我当然有! 欢迎评论...
翻译自: https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/
javascript框架库
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。