十五个名特优新 JS 前端框架、库、工具及其应用时机

  那篇小说首要讲述距今盛行的一些 Javascript web
前端框架,库以及它们的适用场景。

  新的 Javascript 库习以为常,从而Web
社区愈发活跃、多样、在多地点神速升高。详细去描述每个主流的 Javascript
框架和库近乎不容许,所以在那篇小说中第②介绍部分对前者发展最具影响力的前端框架。接下来让我们来一块研商一些主流前端框架、库和工具,并商量它们的适
用场景。

  同时:

  如若该篇文章没有包蕴你欢乐的 Javascript 框架,勿喷

  在接纳前端框架举办开发时,提出维持版本更新。最新版本的貌似都会提必要更好的跨浏览器,跨平台成效。
需检测某些框架的旧版本是还是不是对各类浏览器以及配备的相当,请使用
类似这些扫描器 的工具

  准备好了吧,那么接下去每种探讨它们。

  AngularJS

  Angular 是一款流行的公司级
框架,很多程序员都用它来打造和护卫复杂的网页应用。Angular
拥有巨大的人气,使用它的小卖部跟 Domino 的 Pizza 系列雷同多,如 Ryanair,
iTunes Connect, PayPal Checkout, 谷歌(Google)。Angular 是三个由 谷歌援救的开源框架。Angular 称本人为创设复杂网页应用而对 HTML
的增添。假设你也对 TypeScript 很熟稔,那么可以看看 如何写 Angular 2 .

  Angular 选用 MVC 架构。它提供了 Model 层和 View
层之间双重数据绑定。那种数量绑定格局的利益是不管如何数据变动,都会自行的翻新两边的多少。那促进你创设可服用的
View
组件。它还提供了三个左右端服务易于交互的服务框架。最要害的是,它是粗略的
JavaScript。

  哪一天利用 AngularJS?
当你打造1个复杂的网页前端拔取并索要贰个单独的模块框架去处理整个时。

  GitHub: https://github.com/angular/angular.js

  Current Version:1.4.7/1.2.29

  Website: angularjs.org

  二:React 是15年最受欢迎的 JavaScript 项目!大概人人都在议论
ReactJS。二〇一八年,作者参预的每三个会差了一点都会有一几个话题切磋 React
和千篇一律种类下的其余库( Flux , Redux ) 。React 是三个开源项目,几乎是由
Fackbook 和别的主要的技能公司进献开发的。React
称本身为为打造用户接口而提供的 JavaScript 库。

  React 基本上用来作为 MVC 中的 V。它完全专注于 MVC 中的 V
部分,而忽略了应用中的别的一些架构。它提供了1个组件层,那让大家易于制作UI成分并将那个UI成分组合在共同。它抽象出了DOM,因而而优化了渲染,
并允许你利用 node.js 渲染
React。其余,它达成了单向数据交互流,那使它比任何的框架更易于精通和采取。

  七个品种例如 Angular ,Ember 绑定使用 React 成为 MVC 中的 V。

  曾几何时使用 React?当您想要有1个无敌的 View
层,而拔取中的别的一些缺不需求3个错综复杂的框架时,或当你想要一个 View
层和你的 Angular, Backbone,或许Ember应用一起利用。当你试着打造3个同构的网页框架。

  GitHub: https://github.com/facebook/react

  近日版本:v0.14.0

  网址: Facebook.github.io/react/

  Backbone

  Backbone 是
贰个成名的简洁的框架,全数情节都可以放置多少个纯粹的文本里。Backbone
已经风靡了一段时间,其小编是 杰里米 Ashkenas,曾经由于开发了
CoffeeScript 和 Underscore 而为大家所知。Backbone 尤其适用于须求支出的
web 程序不大的那三个社团,他们期望能动用小巧的框架,而不是像 Angular 大概Ember 那样的巨型框架。

  Backbone 提供了专职能的 MVC 框架和路由。它的 Model 可以完成key-value 绑定和数据更新的事件处理。Model(及 Collection)可以与 RESTful
的 API 协同工作。View 可以评释事件处理,Router 在 UCR-VL
处理和景观管理方面做的很好。对于开发壹个单页面应用,全数必要的效应都得以支撑,不需求额外引入不需求的错综复杂。

  曾几何时使用 Backbone?对于小型的 web 程序,Backbone 是本身必选的框架。

  GitHub: https://github.com/jashkenas/backbone/

  当前版本:1.2.3

  官方网站: backbonejs.org

  Ember 作为三个 web应用框架,卓殊注意于程序员的频率上。Ember
相对相比较盛行,焦点团队有很多很掌握的积极分子,包含 Yehuda Katz,他是 Ruby on
Rails 和 jQuery 的基本团队的分子。Ember
对协调的向来是“三个用来成立震撼的 web
应用的框架”,它也确实不会浪费你的时间。它在那方面拾壹分上心,为你提供多如牛毛的抉择。

  Ember 同样也是三个 MVC
的框架。它富含贰个模板和视图引擎,在数量更新时方可自动更新,这上面与Angular,
Backbone, 和 React 类似。它还有多少个 web 组件
的定义,允许你用自身的价签增加HTML,(如Angular)。它还有一个路由及 model
引擎,可以与 RESTful API 一起坐班的很好。

  哪天使用
Ember?适用于你要求二个框架登时就能动用。对灵活性须要不高的时候能够挑选
Ember,因为你日常是预算紧张恐怕工期紧张。

  GitHub: https://github.com/emberjs/ember.js

  当前版本:2.1.0

  官方网站: emberjs.com

  JQuery
那个库就不用多做牵线了。它独自承担了让跨浏览器网站成为实际的职责,是它使得整个
web 成为后天这么些样子。Web
标准的制定以及浏览器厂家对标准的承受地方,jQuery 功不可没。jQuery
基金会的对象是”通过开源软件的费用和支撑,以及社区的搭档,增加开放的互连网,让每种人都能访问”

  JQuery 是世界上应用最广的 JavaScript
库,没有使用可以相差它,除非您对开发成效不感兴趣。它使得 DOM
遍历、事件处理、动画和 AJAX 在具有浏览器上都变得这么的简约易用。

  曾几何时使用 jQuery?任什么日期候,除非你打算利用更轻量级的本子,例如 Zepto

  GitHub: https://github.com/jquery/jquery

  当前版本:v1.11.3 或 v2.1.4

  官方网站: jquery.com

  Underscore 和 lodash

  有时内置的 JavaScript
对于让程序员真正的有生产力还远远不够。总是会缺了一个工具函数,又只怕是3个能简化代码的函数。Underscore
(还有 lodash) 就是那般的1个 JavaScript
库,它提供了一整套工具函数,无需经验不足的程序员再去给停放的 JavaScript
对象打补丁。多个库都提供了跨越 100
个帮扶函数,还有其余特别的好东西;包罗了像 map, filter, invoke, reduce,
template, throttle, bind, extend, pick, clone 等等那个函数。

  曾几何时使用 Underscore?当您想要拥有三个当即能增强程序员功用的
JavaScript 文件时。

  Underscore GitHub : https://github.com/jashkenas/underscore

  Underscore 当前版本:1.8.3

  Underscore 网站: underscorejs.org

  哪一天使用
lodash?当您想要3个模块化的,品质更尽善尽美一点的,并附带有对于 AMD和社区插件帮忙的 Underscore 版本时。

  Lodash GitHub: https://github.com/lodash/lodash

  Lodash 当前的版本:v3.10.1

  Lodash 网站: lodash.com

  D3.js

  数据可视化和图表是web应用程序的一种不奇怪必要。当提到到其余数据操作和可视化时,D3.js
就是实际的科班。它是 GitHub
上最受欢迎的品种之一,并被数百个集体机关所运用。多量的图形、图标和可视化库都以构件于
D3 之上的。

  D3 让您可以操作任何来源的多寡文档,并将数据开展转换后采用到 DOM、SVG
和 CSS上。D3 专注于现代的 web 标准,以及保障您可以不受到其余像 Flash
或然 Silverlight 那样的专有格式的限量。

  几时利用 D3.js?当你需求其余类型的视觉效果的时候。

  GitHub: https://github.com/mbostock/d3

  当前版本:3.5.6

  网站: d3js.org

   Babylon.js

  想要营造一个通通运行于现代浏览器上,并且能跨浏览器运营的视频游戏吧?那就看看
Babylon.js 吧,它是二个 3D 游戏引擎,基于 WebGL 和
JavaScript。你可以动用其大体、音频和粒子系统创建出超乎预期的高质量游戏来。

  哪一天使用 Babylon.js?当您正在打造壹个视频游戏可能三个某系列型的
3D 场景时。

  GitHub: https://github.com/BabylonJS/Babylon.js

  当前版本: 2.2

  网站: babylonjs.com

  Three.js

  想要打造一个 3D 视觉特效,可是又不必要三个功用一体化的游戏?Three.js
提供了三个轻量级的 3D 库,让您可以将 3D 效果渲染成3个 HTML5 的 canvas,
SVG, 和 WebGL。这是2个详单简单的库,在 three.js
陈列站点上可以旁观数百个杰出的以身作则。

  何时利用 Three.js?当您需求二个总结的能出口为 Canvas 的 3D
视觉效果时。

  GitHub: https://github.com/mrdoob/three.js/

  当前版本: r73

  网站: threejs.org

  Mocha 和 Chai

  长久以来测试 JavaScript
一贯都令人不甚反感。说起来,测试任何代码都是让人反感的,但又却是各种开发者应该做的事体。每种开发者如同总是对此不屑,忽视掉针对它们的代码的测试工
作。 将来有了康复这种反感的章程了,那就是 Mocha 和
Chai。而七个库都以美味的热饮命名,都能支援你测试代码,可是格局各异而已。

  Mocha 是二个 JavaScript
测试框架,它使得针对你的node模块恐怕浏览器采纳中的异步代码的测试变得简单起来。Mocha
测试可以串起来运转,并且对于针对合适的测试案例开展尤其跟踪的质量不错。

  Chai 是一个作为使得开发和测试驱动开发的断言库,可与 Mocha
比肩。它以一种可读性好的作风来讲述您所要测试的事物,用起来差不离。

  曾几何时使用 Mocha 和 Chai?用他们就对了!
请测试你的代码,让这一个世界变得更好。

  Mocha GitHub: https://github.com/mochajs/mocha

  Mocha 当前版本: 2.3.3

  Mocha 网站: mochajs.org

  Chai GitHub: https://github.com/chaijs/chai

  Chai 当前版本: v3.4.1

  Chai 网站: chaijs.com

  大家早就在那份清单中归纳了 Mocha 和 Chai
,若是不去把可以运作这几个测试大概大概可以设定持续集成测试的测试运维器拉进来的话,那么那份清单就不会是总体的。Karma
是2个用来救助你在差其余浏览器中机动运营你的测试的工具。它将会支持您在脚下全体的浏览器上运转你的
Mocha 和 Chai 测试。

  并不是每种浏览器都会运转于种种平台之上,不过幸运的是有许多免费的工具可供你用来测试其余的浏览器,能够在
浏览器截屏 上看一看。倘使你是在 OS X 上运维以来,并且要测试的是 艾德ge
或许 IE 的话,你就足以 免费 使用那一个工具。

  曾几何时使用
Karma?当您想要拥有2个作用完善的测试套件,并像确保测试能在拥有的浏览器上经过时。

  GitHub: https://github.com/karma-runner/karma

  当前版本: v0.13

  网站: karma-runner.github.io

  PhantomJS

  运营总体的浏览器来测试你的代码是要凝聚消耗内存和 CPU 的。PhantomJS
让你可以运转多个彻头彻尾的 WebKit —— Safari 和 以前版本的 Chrome
中的渲染引擎(将来是 Blink)。它能让您通过3个 JavaScript API
来运作测试、截屏、模拟网络以及活动的浏览页面。

  曾几何时利用 PhantomJS
?当你必要展开更加多的测试、操作网页和模仿网络请求的操作时。

  GitHub: https://github.com/ariya/phantomjs

  当前版本: v2.0

  网站: phantomjs.org

  Grunt 和 Gulp

  营造用于生产环境的网站一般还关系到一些升任性能那方面的天职,像
JavaScript 和 CSS 的最小化,CoffeeScript/TypeScript
的编译,单元测试,代码精简。恐怕你早已有了三个工具链,用于准备你生产版本上的网站,而只要您还未曾的话,就会想要拥有二个像
Grunt 大概 居尔p
那样的职责局行器。它们都游人如织的插件,能为你的网站举行其余的变换,以使其能投入生产条件。

  哪天使用
Grunt?当您更乐于编写配置文件,而对于你的任务局行器会生成什么中间文件并不关心时。

  Grunt GitHub: https://github.com/gruntjs/grunt

  Grunt 当前版本: v0.4.5

  Grunt 网站: gruntjs.com

  曾几何时使用 居尔p?当你更愿意编写配置代码,并且想利用 node.js
的流处理能力完结更快的任务执行时。

  Gulp GitHub: https://github.com/gulpjs/gulp

  Gulp 当前版本: v3.9.0

  Gulp 网站: gulpjs.com

  Babel

  JavaScript 作为一门语言发展很高效。ECMAScript 二〇一五在2018年春季发布,而它的好多新特点正在许多最新的浏览器中被完结。即便你想要精通有关浏览器对
ECMAScript 二零一六 包容音讯,可以看看那个来自于 @kangax 的 表格
。你会注意到新型版本的 艾德ge,Firefox 和 Chrome 已经差不多是全然的分外了。

  大家并不是生存在二个完美的社会风气中。作为开发者,大家将会须求后续协理老版本的浏览器,它们不负有新颖和最棒的
JavaScript 功用特色。而我辈实在是想要发展大家的 web
并提高大家的代码库。Babel 就是一个 JavaScript 编译器,它可以将新型的
JavaScript 标准编译成包容 ES5 的JavaScript,让你能够在 IE9
那么老的浏览器上运维它们。它具备一些插件,让使用 React
开发尤其不难,设置会动用那个并不是正规 (例如 ES7) 的组成部分的作用特色。

  何时利用 Babel?当你想要使用新的 JavaScript
语言特色并且还要支撑老的浏览器时。

  GitHub: https://github.com/babel/babel

  当前版本: 6.1.2

  网站: babeljs.io

  更加多 Web 开发的执行

  那篇小说是 web 开发连串的一某些,来自于 Microsoft
技术的传道者和工程师,内容都是有关实用的 JavaScript
学习、开源项目,还有互操作性最佳实践那个地点,包涵了 Microsoft 艾德ge
浏览器和新的 艾德geHTML 渲染引擎 。

  大家鼓励你在全数的浏览器和配备,包含作为 Windows 10 默许浏览器的
Microsoft 艾德ge 上展开测试 —— 使用 dev.microsoftedge.com 上的免费工具:

  扫描你的站点上的老式的库,布局难题以及可访问性

  下载免费的 Mac, Linux, 和 Windows 的虚拟机

  在具备的浏览器,包含在 Microsoft 艾德ge 上检查 Web 平台的气象

  在您协调的装备上远程测试 Microsoft 艾德ge

  更深刻了然大家的工程师和传道者:

  GitHub 上的编码实验室:跨浏览器测试和特级实践

  Microsoft 艾德ge Web 大会 二〇一四 (来自于大家的工程团队和 JS 社区)

  哇哦,我能在 Mac 和 Linux 上测试 IE 和 Edge 了! (来自于 Rey Bango)

  没有破话 Web 的先进的 JavaScript (来自于)

  能让 Web 登时起作用的 艾德ge 渲染引擎 (来自于 Jacob 罗斯尔i)

  使用 WebGL 发挥 3D 渲染的潜能 (来自于 大卫 Catuhe)

  托 管web 应用和web平台方面的翻新 (来自于 凯文 希尔 和 Kiril
Seksenov)

  大家的社区开放源代码项目:

  vorlon.JS (多配备远程 JavaScript 测试)

  manifoldJS (安顿跨平台托管 Web 应用)

  babylonJS (让 3D 图形那些事物更温和)

  更多免费的工具和后端web开发的东西:

  Linux, MacOS, 和 Window s 上行使的 Visual Studio Code

  尝试在 Azure Cloud 上 使用 node.JS 编写代码