14个美丽 JS 前端框架、库、工具及其应用时机

  那篇文章首要讲述现今盛行的一对 Javascript web
前端框架,库以及它们的适用场景。

  新的 Javascript 库习以为常,从而Web
社区愈发活跃、多种、在多地点很快升高。详细去讲述每一种主流的 Javascript
框架和库近乎不能,所以在那篇小说中最主要介绍部分对前者发展最具影响力的前端框架。接下来让咱们来一块探究一些主流前端框架、库和工具,并啄磨它们的适
用场景。

  同时:

  若是该篇小说没有包罗你喜爱的 Javascript 框架,勿喷

  在行使前端框架举行付出时,提议维持版本更新。最新版本的一般都会提需要更好的跨浏览器,跨平台成效。
需检测某个框架的旧版本是或不是对各样浏览器以及配备的相当,请使用
类似这些扫描器 的工具

  准备好了吧,那么接下去逐个钻探它们。

  AngularJS

  Angular 是一款流行的信用社级
框架,很多程序员都用它来创设和尊崇复杂的网页应用。Angular
拥有巨大的人气,使用它的合作社跟 Domino 的 Pizza 序列雷同多,如 Ryanair,
iTunes Connect, PayPal Checkout, 谷歌(Google)。Angular 是一个由 Google匡助的开源框架。Angular 称自己为创设复杂网页应用而对 HTML
的增添。假诺你也对 TypeScript 很熟识,那么可以看看 怎么样写 Angular 2 .

  Angular 采纳 MVC 架构。它提供了 Model 层和 View
层之间双重数据绑定。那种数据绑定格局的便宜是无论怎么样数据变动,都会活动的更新两边的数据。那有助于你创设可服用的
View
组件。它还提供了一个左右端服务易于交互的服务框架。最器重的是,它是粗略的
JavaScript。

  几时使用 AngularJS?
当你营造一个犬牙相错的网页前端选拔并索要一个独门的模块框架去处理整个时。

  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
部分,而忽略了利用中的其余一些架构。它提供了一个组件层,那让我们易于制作UI元素并将那几个UI元素组合在一起。它抽象出了DOM,由此而优化了渲染,
并允许你接纳 node.js 渲染
React。其它,它落成了单向数据交互流,那使它比其余的框架更便于领会和应用。

  多少个门类例如 Angular ,Ember 绑定使用 React 成为 MVC 中的 V。

  什么日期利用 React?当您想要有一个强劲的 View
层,而接纳中的其余一些缺不须要一个错综复杂的框架时,或当您想要一个 View
层和你的 Angular, Backbone,或者
Ember应用一起行使。当您试着打造一个同构的网页框架。

  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 在 URL
处理和气象管理方面做的很好。对于开发一个单页面应用,所有需要的法力都能够匡助,不须要万分引入不须求的繁杂。

  何时使用 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
对于让程序员真正的有生产力还远远不够。总是会缺了一个工具函数,又或者是一个能简化代码的函数。Underscore
(还有 lodash) 就是那般的一个 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?当您想要一个模块化的,品质更理想一点的,并附带有对于 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 效果渲染成一个 HTML5 的 canvas,
SVG, 和 WebGL。这是一个详单简单的库,在 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
是一个用来接济您在区其余浏览器中机动运行你的测试的工具。它将会扶助您在现阶段所有的浏览器上运行你的
Mocha 和 Chai 测试。

  并不是种种浏览器都会运作于每个平台之上,但是幸运的是有许多免费的工具可供你用来测试其余的浏览器,可以在
浏览器截屏 上看一看。即使您是在 OS X 上运行以来,并且要测试的是 Edge
或者 IE 的话,你就可以 免费 使用这么些工具。

  哪一天使用
Karma?当你想要拥有一个功能完善的测试套件,并像确保测试能在拥有的浏览器上通过时。

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

  当前版本: v0.13

  网站: karma-runner.github.io

  PhantomJS

  运行总体的浏览器来测试你的代码是要凝聚消耗内存和 CPU 的。PhantomJS
让您可以运行一个纯粹的 WebKit —— Safari 和 从前版本的 Chrome
中的渲染引擎(现在是 Blink)。它能让您通过一个 JavaScript API
来运作测试、截屏、模拟网络以及自行的浏览页面。

  何时利用 PhantomJS
?当您要求开展越多的测试、操作网页和模拟网络请求的操作时。

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

  当前版本: v2.0

  网站: phantomjs.org

  Grunt 和 Gulp

  打造用于生产条件的网站一般还论及到部分升格品质这方面的义务,像
JavaScript 和 CSS 的最小化,CoffeeScript/TypeScript
的编译,单元测试,代码精简。也许你早已有了一个工具链,用于准备你生产版本上的网站,而一旦你还没有的话,就会想要拥有一个像
Grunt 或者 Gulp
那样的任务运行器。它们都游人如织的插件,能为您的网站开展任何的更换,以使其能投入生产条件。

  什么日期利用
Grunt?当您更乐于编写配置文件,而对于你的任务运行器会生成什么中间文件并不关切时。

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

  Grunt 当前版本: v0.4.5

  Grunt 网站: gruntjs.com

  何时使用 Gulp?当你更乐于编写配置代码,并且想利用 node.js
的流处理能力已毕更快的天职执行时。

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

  Gulp 当前版本: v3.9.0

  Gulp 网站: gulpjs.com

  Babel

  JavaScript 作为一门语言发展很便捷。ECMAScript 2015
在二〇一八年夏季公布,而它的无数新特色正在许多最新的浏览器中被完毕。假如您想要了然有关浏览器对
ECMAScript 2015 包容消息,能够看看那么些来自于 @kangax 的 表格
。你会专注到最新版本的 Edge,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 Edge
浏览器和新的 EdgeHTML 渲染引擎 。

  我们鼓励你在拥有的浏览器和配备,包含作为 Windows 10 默许浏览器的
Microsoft Edge 上展开测试 —— 使用 dev.microsoftedge.com 上的免费工具:

  扫描你的站点上的不合时宜的库,布局难题以及可访问性

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

  在所有的浏览器,蕴含在 Microsoft Edge 上检查 Web 平台的状态

  在你协调的装置上远程测试 Microsoft Edge

  更尖锐摸底大家的工程师和传道者:

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

  Microsoft Edge Web 大会 2015 (来自于我们的工程团队和 JS 社区)

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

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

  能让 Web 立刻起效果的 Edge 渲染引擎 (来自于 Jacob Rossi)

  使用 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 编写代码

相关文章