您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net库和工具,工具及其使用

新葡亰496net库和工具,工具及其使用

发布时间:2019-10-22 02:38编辑:新葡亰官网浏览(190)

    最佳的 JavaScript 前端框架、库和工具

    2015/12/22 · JavaScript · 1 评论 · 工具, 库, 框架

    本文由 伯乐在线 - cucr 翻译,Heiye 校稿。未经许可,禁止转载!
    英文出处:Rami Sayar。欢迎加入翻译组。

    好像几乎每隔一周就有一个新的 JavaScript 库在网络社区引起风暴!网络社区越来越充满活力,多样化且在多个方面快速发展。调查每一个主流的 JavaScript 框架和库是不可能完成的壮举。因此,我将分享一些前端开发中最著名和最有影响力的框架和库。让我们看看最佳的 JavaScript web 前端框架,库和工具以及何时使用它们。

    另外:

    • 如果我没有包括你最喜欢的 JavaScript 框架,请不要生气。
    • 永远记住持续更新你的框架和库。最新版本的框架和库通常具有最好的跨浏览器和跨设备的支持。你可以使用工具, 比如scanner 来帮助判断一个旧版本是否兼容这一大批设备。

    好了,让我们进入列表!

      这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。

    本文来自于:葡萄城控件技术团队博客

    与开发者数量相比,可能有更多的JavaScript框架、库和工具。截止到2017年5月,在GitHub上快速搜索能搜到超过110万的JavaScript项目。 在npmjs上有50万的可用包,并且这些包每个月的下载量将近100亿次。

    AngularJS

    Angular 是流行的企业级框架,许多开发人员都在使用它来构建和维护复杂的 web 应用程序。Angular 的人气非常高,包括 Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企业都在使用它。Angular 是一个由谷歌支持的开源框架。Angular 自称是 HTML 的一个扩展,用来构建复杂的 web 应用程序。另外如果你熟悉 TypeScript, Angular 2就是用它构建的。

      新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎不可能,所以在这篇文章中主要介绍一些对前端发展最具影响力的前端框架。接下来让我们来共同研究一些主流前端框架、库和工具,并讨论它们的适 用场景。

    几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃、多样,并在多个领域快速成长。想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务。接下来,我会分享一些前端开发的最著名和最有影响力的框架和库。下面,就让我们一起来看看,顶级的 JavaScript web 前端框架、库和工具及其使用。

    2017.05.29: 更新了本文,旨在能正确的描述当前JavaScript生态的状态。

    这个作者的更多文章

    • 构建一个基于 Node.js 的聊天室 Web App:远程调试
    • 构建一个基于 Node.js 的聊天室 Web App:通过 WebSockets 连接

    Angular 是一个 MVC 类型的框架。它提供了模型和视图之间的双向数据绑定。该数据绑定允许每当数据改变时,两边自动更新。  它使你能够构建可复用的视图组件。它提供了一个服务框架,使得后端-前端服务通信更容易。最后,它只是普通的 JavaScript。

    何时使用 AngularJS?当你正在构建一个复杂的 web 前端应用程序,同时需要一个模块化的框架来处理一切时。

    GitHub: 
    当前版本: 1.4.7/1.2.29
    网址: angularjs.org

      同时:

    请注意:

    本文着重讲述目前最流行的客户端JavaScript框架、库和工具之间的基本差异和他们的基本介绍。至于是不是你要寻找的最佳实践那是另外一个问题。你可以选择一个,并坚持使用一段时间,你要明白你最喜欢的那一个有可能被“更好”的所取代,而不管你是否选择使用这个更好的。

    React

    React 是今年最受欢迎的 JavaScript 项目!每个人都似乎在谈论 ReactJS。去年我参加的每一个会议,至少有好几个议题是关于 React 和同家族的其他库(Flux, Redux)的。React 是开源软件,主要由 Facebook 开发,其他大型科技公司也有贡献。React 自称是一个用于构建用户界面的 JavaScript 库。

    React 主要是 MVC 中的 V。它的重点完全在 MVC 的 V 部分,忽视应用程序架构的其余部分。它提供了一个组件层,使得创建 UI 元素,组合元素变得更容易。它使用虚拟 DOM,因此优化了渲染,且允许从 node.js 渲染 React。此外,它实现了单向响应的数据流,因此比其他框架更容易理解和使用。

    作为 MVC 中的 V,很多项目将 React 结合 Angular 或 Ember 这样的框架使用。

    何时使用 React?当你想要一个强大的视图层,但不需要在应用程序的其余部分使用一个复杂的框架,或者你在 Angular、Backbone 或 Ember 应用上需要一个视图层时。当你正试图建立一个同构 web 框架时。

     

    GitHub: 
    当前版本: v0.14.0
    网址: Facebook.github.io/react/

      如果该篇文章没有包含你喜欢的 Javascript 框架,勿喷

    如果没有包括你最喜欢的 JavaScript 的框架和库,请多包涵。

    提纲目录

    • 复杂的术语

    • 框架

    • 工具

    • 不要给我贴标签

    • JavaScript 框架和库

    • jQuery

    • React

    • Lodash and Underscore

    • AngularJS 1.x

    • AngularJS 2.x (now 4.x)

    • Vue.js

    • Backbone.js

    • Ember.js

    • Knockout.js

    • 其他值得关注的

    • 工具:通用自动构建工具

    • Gulp.js

    • npm

    • Grunt

    • 工具:模块打包工具

    • Webpack

    • Browserify

    • RequireJS

    • 工具:代码校验工具

    • ESLint

    • JSHint

    • JSLint

    • 工具:测试框架工具

    • Mocha

    • Jasmine

    • QUnit

    • 工具:其他

    • 总结和推荐

    • 评论

    阅读本文章前,请接受下列条款和条件…!

    • 因为JavaScript的发展日新月异,所以本文发布后可能立刻就过时了。

    • 我所说的“最好”的意思是“最受欢迎和流行的项目”。我所列出的所有的免费/开源的项目可能没有你喜欢使用的那个。

    • 已经宣告死亡的项目,比如:YUI不在本文所列的列表中,即使它还有很多的使用者。

    • 本文只讨论客户端的项目。一些能在服务端工作的纯服务端框架,比如:Express.js 或者 Hapi不在本文的讨论列表中。

    • 关于每一个项目的信息,我都是故意简明扼要的概述,目的是为了敦促你自己做进一步的研究。

    • 每一个项目都我提供了一个“普及度指标”,但是众所周知统计数据往往都是不那么准确的,而且也有可能会误导别人,所以数据仅供参考。

    • 我可能存在偏见,你也可能存在偏见,每个人都有可能存在偏见。本文列举的所有工具我并不是都有使用过,但我会告诉你我最喜欢使用哪个,但是你应该根据自己的需求做出自己的评估和选择。

    • 在此声明,你的选择导致的不好的结果,我和SitePoint不负任何责任。

    Backbone

    Backbone 是一个著名的简易框架,适合单个 JavaScript 文件。Backbone 已经存在有一段时间了,是以 CoffeeScript 和 Underscore 闻名的 Jeremy Ashkenas 所开发的。对于一些为小型 web 应用寻找一个结构简单的框架,而不想引入如 Angular 或 Ember 这些大型框架的团队,Backbone 特别受欢迎。

    Backbone 提供一个完整的 MVC 框架以及路由。模型允许键-值绑定和数据变化的事件处理。模型(和集合)可以连接到RESTful API。视图具有声明式事件处理,路由在处理 URL 和状态管理上做的很出色。它包含你创建一个单页面应用程序所需要的一切,且没有提供太多东西,没有不必要的复杂度。

    何时使用 Backbone?Backbone 是我创建简单 web 应用程序的首选框架。

    GitHub: 

    当前版本: 1.2.3
    网站: backbonejs.org

      在使用前端框架进行开发时,建议保持版本更新。最新版本的一般都会提供给更好的跨浏览器,跨平台效果。 需检测某个框架的旧版本是否对各种浏览器以及设备的兼容,请使用 类似这个扫描器 的工具

    请实时更新你的框架和库,最新版本往往有更好的跨浏览器和跨设备支持。可以使用检测设备一样的工具,来帮助确定一个旧版本,是否可以和配置最好的设备兼容。

    复杂的术语

    “框架(framework)”、“库(library)”和“工具(tool)”这些词语,对于不同的人在不同时间不同的语境下会有不同的理解,但对于这些词语本文中使用的定义如下:

    Ember

    Ember 是一个固执的 web 应用程序框架,关注程序员的工作效率。Ember 比较流行,它的核心团队包括像曾是 Ruby on Rails 和 jQuery 核心团队成员的 Yehuda Katz 的聪明人。Ember 自称是“一个用于创建大规模 web 应用程序的框架”,且不浪费你的时间。它很固执,为你提供了很多选择。

    Ember 也是一个 MVC 框架。它包括一个模板和视图引擎,当数据变化时自动更新,就像 Angular,Backbone 和 React 一样。它包含 web组件 的思想,让你使用自己标签扩展 HTML(就像 Angular 一样)。它也有一个知道如何与你的 RESTful API 一起工作的路由和模型引擎。

    何时使用 Ember?当你只需要一个可以运行的框架时。当你因为预算紧张或工期很短而不需要灵活性时,请使用 Ember。

    GitHub: 
    当前版本: 2.1.0
    网站: emberjs.com

      准备好了吧,那么接下来逐个讨论它们。

    接下来,让我们看看下面的列表!

    一个库是一个有组织的功能的集合。一个典型的库应该包括字符串处理、日期处理、HTML DOM元素处理、事件处理、cookie处理、动画、网络请求处理等功能。每个封装好的API函数都能将值正确的返回给调用他的应用程序,该应用程序是根据您选择的功能去看情况实现的。这可以看成汽车零部件的选择:你可以随意的选择零件来组装一个可以工作的完整车辆,但是你必须自己去建造你自己的引擎。

    库通常提供的是一个更高的抽象级别,这对于实现细节和差异性会更加平滑和优雅。例如:Ajax通常会依赖XMLHttpRequest API,但是这需要几行代码就可以实现处理跨浏览器的细微的表现差别。库会提供一个ajax()函数,而你可以自由的专注的去实现你的更高级别的业务逻辑即可。

    开发中使用一个库,可以节约20%的开发时间,因为你不必去关注某一功能具体的实现细节。然而缺点是:

    • 如果你使用的库存在bug,往往难以定位和修复

    • 如果有bug,不能保证库的开发团队会很快的发布补丁

    • 一个补丁的更新可能会导致API的改变,进而会导致你的代码要做重大的改变来适应这个补丁的更新。

    jQuery

    jQuery 是一个无需介绍的库。它凭一己之力让跨浏览器网站使用成为现实,同时把 web 带到今天的位置。Web 标准已经被大多数浏览器制造商采纳并真正地尊重,jQuery 是其中的原因之一。jQuery 基金会的使命是“通过开源软件的开发和支持,以及开发社区的合作,改善开放的 web,让每一个人都可以访问它。”

    jQuery 是世界上最常用的 JavaScript 库,所有应用程序都应该使用它,除非你不在意程序员的工作效率。它使得 DOM 遍历、事件处理、动画、AJAX 在所有浏览器上变得更简单、更容易。

    何时使用 jQuery?一直使用,除非你想使用一个像 Zepto 的轻量级版本。

    GitHub: 
    当前版本: v1.11.3 or v2.1.4
    网站: jquery.com

      AngularJS

    AngularJS

    框架

    一个框架是一个应用程序的骨架。他要求你要以一种特殊的方式(约定好的方式)进行软件的设计,必须特定的点加入你自己的逻辑。一般框架都会提供事件处理、存储、数据绑定等功能。拿汽车类比的话,框架会提供汽车的底盘、车身和发动机。保证功能正常运行的情况下你可以添加、删除和修改某些组件。

    框架通常比库提供更高的抽象级别,框架能够快速帮你构建你项目的80%的工作。然而确定是:

    • 如果你的剩下的20%的工作超出了框架的范围限制,将会变得很难做下去。

    • 框架的更新是很困难的 - 如果是可更新的话

    • 框架的核心代码和概念很少是发展成熟的。处理同样的事情时开发者总是能找到更好的处理方式。

    Underscore &lodash

    有时候 JavaScript 内置的功能导致程序员的效率并不高。总是缺少一个工具函数或一个可以简化代码的函数。Underscore(和 lodash)是一个 JavaScript 库,它提供了一整套工具函数,不需要对内置 JavaScript 对象打补丁。两个库均提供超过 100 个功能助手和其他专用功能,包括 map,filter,invoke,reduce,template, throttle, bind, extend, pick, clone 等更多的函数。

    何时使用 Underscore?当你需要一个单独的 JavaScript 文件,来立即提升程序员的工作效率时。

    Underscore GitHub: 
    Underscore 当前版本: 1.8.3
    Underscore 网站: underscorejs.org

    何时使用 lodash?当你需要模块化和性能稍强版本的 Underscore,同时更容易地支持 AMD 和社区插件时。

    LodashGitHub: 

    Lodash 当前版本: v3.10.1

    Lodash 网站: lodash.com

      Angular 是一款流行的企业级 框架,很多程序员都用它来构建和维护复杂的网页应用。Angular 拥有巨大的人气,使用它的公司跟 Domino 的 Pizza 种类一样多,如 Ryanair, iTunes Connect, PayPal Checkout, Google。Angular 是一个由 Google 支持的开源框架。Angular 称自己为构建复杂网页应用而对 HTML 的扩展。如果你也对 TypeScript 很熟悉,那么可以看看 怎样写 Angular 2 .

    新葡亰496net 1

    工具

    一个简单的工具能够提高开发效率,但是这并不是项目中必不可少的一部分。一般工具都包含:构建系统、编译器、转换功能、代码压缩、图像压缩、部署机制等功能。

    工具应该提供一个更容易的开发流程。例如:很多开发者喜欢用Sass去开发CSS,因为Sass提供了代码分离、嵌套,渲染时变量、循环和函数。由于浏览器无法解析Sass/SCSS语法,所以在测试和部署之前代码必须经过适当的工具编译为CSS代码。

    D3.js

    数据可视化和图表是一种常见的 web 应用程序需求。D3.js 是任何数据操作和可视化的事实标准。它是 GitHub上最受欢迎的项目之一,被数以百计的组织使用。大量的图形,图表和可视化库在 D3 上构建。

    D3 允许你操作任何来源的数据文档,转换成 DOM 或/和 SVG 或/和 CSS。D3 关注现代 web 标准,确保你不受任何专有格式的约束,比如 Flash 和 Silverlight。

    何时使用 D3.js?在你需要任何形式的可视化的时候。

    GitHub: 
    当前版本: 3.5.6
    网站: d3js.org

      Angular 采用 MVC 架构。它提供了 Model 层和 View 层之间双重数据绑定。这种数据绑定方式的好处是不管哪边数据改变,都会自动的更新两边的数据。这有助于你构建可服用的 View 组件。它还提供了一个前后端服务易于交互的服务框架。最重要的是,它是简单的 JavaScript。

    AngularJS 是一种流行的企业框架,许多开发人员使用其构建和维护复杂的 Web 应用程序。AngularJS 是十分受欢迎的,许多公司都使用它,像达美乐披萨、瑞安航空、iTunes Connect,PayPal 支付,谷歌等。AngularJS 是由谷歌支持的开源框架。AngularJS 把自己描述为一个 HTML 的扩展,可用来构建复杂的 Web 应用程序。此外,如果你熟悉 TypeScript,将会很清楚 AngularJS 是如何编写的。

    不要给我贴标签

    库、框架和工具之间的区别往往是模糊的。框架可能会依赖于一个库。库也许能够实现类似于框架的方法。工具对于两者可能是必不可少的。我试着给每个项目加标签进行分类,但是范围可能会有所不同。

    如果你听起来觉得这太复杂的话,你可以考虑使用vanilla JavaScript进行编码。这听上去很好,但是你将不可避免地编写自己的库或着框架代码。JavaScript是浏览器和操作系统这两层抽象之上的又一层抽象。

    Babylon.js

    想要构建完全符合现代 web 标准且跨浏览器的视频游戏吗?看看 Babylon.js,它是基于 WebGL 和 JavaScript 的 3d 游戏引擎。你可以创建令人难以置信的包含物理、音频和粒子系统等等的高质量游戏。

    何时使用 Babylon.js?无论何时,只要你想做一个视频游戏或任何类型的复杂三维场景,都能用上。

    GitHub: 
    当前版本: 2.2
    网站: babylonjs.com

      什么时候使用 AngularJS? 当你构建一个复杂的网页前端应用并需要一个单独的模块框架去处理一切时。

    AngularJS 是一个 MVC 类型的框架,它提供了双向的数据模型和视图之间的绑定。这种数据绑定,允许在双方只要有一个数据变化时,自动进行更新。它使你可以构建可重用的 View 组件。同时,它也提供了一个服务框架,以便前后端服务的轻松通信。最后,它只是普通的 JavaScript。

    JavaScript 框架和库

    普及流行的项目…

    Three.js

    想要构建一个 3D 可视化场景,但不需要一个完整的游戏引擎?three.js 提供了一个轻量级的 3d 库,允许渲染 3d 为 HTML5 画布、SVG 和 WebGL。它是相当简单的库,在 three.js 的展示里有数百个优美的例子。

    何时使用Three.js?当你需要一个能输出为 Canvas 的简单的 3D 可视化场景时。

    GitHub: 
    当前版本: r73
    网站: threejs.org

      GitHub:

    什么时候使用 AngularJS?当你正在建立一个复杂的 web 前端应用程序,并且需要一个模块化的框架来处理一切时。

    jQuery

    jQuery

    key value
    类型
    官网 jquery.com
    仓库地址 github.com/jquery/jquery
    最新版本 3.2.1
    开发者 jQuery team
    发布日期 2006年8月
    文件大小 30kb min
    用途 通用
    使用率 全球72.4% 的网站在使用

    在WordPress、ASP.NET和其他几个框架中jQuery仍然是被使用最多的一个库。 他引入了CSS选择器的方式去选择页面DOM节点、链式的事件处理方式、动画和Ajax调用的封装在客户端是一种具有革命性的开发方式。

    jQuery近年来随着前端技术的不断发展变得有点落寞的迹象,但对于需要使用JavaScript功能的项目来说,它仍然是一个可行的选择。

    优点:

    • 文件尺寸很小

    • 入门简单(渐进的学习曲线),便捷的线上学习答疑社区环境

    • 简洁的语法

    • 易于扩展

    缺点:

    • 增加了个客户端的API速度开销

    • 浏览器兼容性的改善,使得它变的不是那么重要了

    • 用法扁平

    • 一些 行业 抵制 反对不必要的使用.

    Mocha& Chai

    JavaScript 在很长一段时间内是非常烦人的。测试任何代码通常都被认为是恼人的,但它却是每个开发人员都应该做的事情。每个开发人员似乎总是蔑视和忽略它,而不测试他们的代码。这个恼人的东西有一个解决办法,那就是 Mocha 和 Chai。两个库的名字都来自美味的热饮料,它们都能帮你测试代码,但方式不同。 

    Mocha 是一个 JavaScript 测试框架,使得你在 node 模块和浏览器 app 中测试异步代码变得更容易。Mocha 测试可以串联运行,可以为正确的测试用例添加异常跟踪的能力。

    Chai 是一个行为驱动开发/测试驱动开发的断言库,可以搭配 Mocha 使用。它可以把你需要测试的东西用可读的风格简单地表达出来。

    何时使用 Mocha & Chai?总是!请测试你的代码,让世界变得更美好。

    Mocha 当前版本: 2.3.3
    Mocha 网址: mochajs.org
    Chai GitHub: 
    Chai 当前版本: v3.4.1
    Chai 网址: chaijs.com

      Current Version:1.4.7/1.2.29

    React

    React

    React

    key value
    类型
    官网 facebook.github.io/react/
    仓库地址 github.com/facebook/react
    最新版本 15.5.4
    开发者 Facebook and contributors
    发布日期 2013年3月
    文件大小 21kb min
    用途 单页面应用
    使用率

    也许是过去一年中最受关注的JavaScript库,React声称是一个构建用户界面的JavaScript库。React侧重于MVC开发模式中的View的部分,并且可以更轻松的创建保留状态的UI组件。他是最先实现虚拟DOM的JavaScript库之一,它在内存中计算结构的差别然后高效的更新页面的显示。

    统计中显示React的使用率并不高, 可能是因为他被用于应用程序而不是网站。大约38%的开发者声称会使用React。

    优点:

    • 文件小, 高效, 性能高, 灵活

    • 组件模型简单

    • 丰富的文档和在线资源

    • 支持服务端渲染

    • 目前很流行,并且在告诉发展

    缺点:

    • 要学习新的概念和语法

    • 必须要依赖构建工具

    • 可能要求其他库或者框架来提供model和controller部分的功能

    • 可能与修改DOM的代码或者其他库不兼容

    可以通过我们的精品课程学习了解更多React,React the ES6 Way。

    Karma

    既然已经把 Mocha 和 Chai 包含在这个列表中了,如果不包含用来运行这些测试或设置持续集成测试的测试运行器,那将是不完整的。Karma 是一款旨在帮助你在不同的浏览器上自动运行测试的工具。它可以帮助你在所有浏览器上运行 Mocha 和 Chai 测试。

    不是每个浏览器都运行在所有平台,但幸运的是可以使用一些免费工具来测试其他浏览器,看看 Browser Screenshots。如果你正在 OS X 上运行代码,想测试 Edge 或 IE,可以 免费 使用这个工具。

    何时使用 Karma?当你的应用程序有一个完善的测试套件,并希望确保测试在所有浏览器上通过时。

    GitHub: 
    当前版本: v0.13
    网址: karma-runner.github.io

      Website: angularjs.org

    新葡亰496net 2

    Lodash and Underscore

    Lodash

    key value
    类型
    官网 lodash.com/
    仓库地址 github.com/lodash/lodash/
    最新版本 4.17.4
    开发者 John-David Dalton
    发布日期 2012年4月
    文件大小 4kb – 24kb min
    用途 通用
    使用率

    Underscore

    key value
    类型
    官网 underscorejs.org/
    仓库地址 github.com/jashkenas/underscore
    最新版本 1.8.3
    开发者 Jeremy Ashkenas
    发布日期 2009年10月
    文件大小 6kb min
    用途 通用
    使用率

    Lodash 和 Underscore 在本节中合在了一块,因为它们都提供了数百个功能性的JavaScript实用程序来扩充原生字符串,数字,数组和其他原始对象的方法,他们是同一类的库。他们之间的功能有一些重复,所以你不能也不必在同一个项目中同时使用这两个库。

    客户端使用率很低,但是可以在服务器端的Node.js应用程序中使用这两个库。

    优点:

    • 小 且 简单

    • 完善的文档方便学习

    • 和大部分的库、框架都是兼容的

    • 不扩展内置对象

    • 客户端和服务端都可以使用

    缺点:

    • 只有部分方法支持ES2015和更新的JavaScript版本

    PhantomJS

    运行完整的浏览器来测试你的代码比较耗内存和 CPU。PhantomJS 允许你运行一个轻量的 WebKit —— Safari 和Chrome(现在是 Blink)后台的渲染引擎。它允许你通过 JavaScript API 运行测试,捕捉截图,监控网络和自动浏览页面。

    何时使用 PhantomJS ?当你需要进行更多的测试,操作页面和监视网络请求时。

    GitHub: 
    当前版本: v2.0
    网址: phantomjs.org

      二:React 是15年最受欢迎的 JavaScript 项目!几乎人人都在谈论 ReactJS。去年,我参加的每一个会几乎都会有一两个话题探讨 React 和相同体系下的其它库( Flux , Redux ) 。React 是一个开源项目,几乎是由 Fackbook 和其它主要的技术公司贡献开发的。React 称自己为为构建用户接口而提供的 JavaScript 库。

    React 是今年最受喜爱的 JavaScript 的工程!每个人似乎都在谈论 ReactJS。每一个会议上,去年出席的会议,至少有两个人是在讨论 React。React 是开源的,主要是由 facebook 借助其它公司的主要技术开发出来的。React 描述自己是一个 JavaScript 库,用于构建用户界面。

    AngularJS 1.x

    AngularJS

    key value
    类型 框架
    官网 angularjs.org
    仓库地址 github.com/angular/angular.js
    最新版本 1.6.4
    开发者 Google
    发布日期 2010年10月
    文件大小 144kb
    用途 单页应用
    使用率

    Angular是第一个出现在本文列表中的MVC应用程序框架 。Angular的最流行的版本就是1.x版本,他支持HTML和数据的双向绑定,并从业务逻辑中解耦DOM的操作。

    Angular 1.x 版本仍在发展,尽管版本2(现在是版本4了)已经发布。不理解?往下看…

    优点:

    • 被几家大公司广泛使用的流行框架

    • 构建现代web应用程序的单一解决方案

    • MEAN (MongoDB, Express.JS, AngularJS, NodeJS)技术栈的一部分,有大量的文章和教程可供学习

    缺点:

    • 相比其他框架有着陡峭的学习曲线

    • 代码库文件很大

    • 无法直接升级到Angular 2.x版本

    • 尽管是谷歌项目,谷歌似乎没有使用它?

    Grunt & Gulp

    为生产环境构建网站,通常涉及到提高性能的任务,比如 JavaScript 和 CSS 的压缩, CoffeeScript/TypeScript 的编译,单元测试,语法检查。也许你已经有一个为网站发布到生产环境的工具链,如果没有,你可以使用任务运行器,比如 Grunt 或Gulp。两者都有大量关于网站的任何转换的插件,为发布到生产环境做好准备。

    何时使用 Grunt?当你喜欢写配置文件同时不介意你的任务运行器生成中间文件时。

    Grunt GitHub: 
    Grunt 当前版本: v0.4.5
    Grunt 网址: gruntjs.com

    何时使用 Gulp?当你喜欢在配置上写代码和利用 node.js 的流功能来加快任务执行时。

    Gulp GitHub: 
    Gulp 当前版本: v3.9.0
    Gulp 网址: gulpjs.com

      React 基本上用来作为 MVC 中的 V。它完全专注于 MVC 中的 V 部分,而忽略了应用中的其它部分架构。它提供了一个组件层,这让我们易于制作UI元素并将这些UI元素组合在一起。它抽象出了DOM,因此而优化了渲染, 并允许你使用 node.js 渲染 React。另外,它实现了单向数据交互流,这使它比其它的框架更易于理解和使用。

    React 在 MVC 中,主要是 View。它完全专注于 MVC 那部分,无视应用程序的其它部分。它提供了一个成分层,可以更容易使用UI元素,并将它们组合在一起。它抽象了 DOM,使其擅长于优化渲染,并允许使用 node.js 来表述 React ; 它实现了一个单向灵活的数据流,使得它更容易理解和使用其它框架。

    Angular 2.x (现在 4.x)

    Angular

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

    Angular 2.0 于2016年9月发布。相比较之前的版本是完全被重写了,2.x版本引入了使用TypeScript(需要被编译为JavaScript)创建的基于模块化组件的模型。更加混乱的是,在2017年的3月份发布了4.0的版本(版本3直接被跳过,为了避免版本语义的问题)。

    Angular 2 版本和v1版本之间有着根本的区别。 两者互不兼容—— 或者 Google 应该给2 版本另外取一个不同的名字!

    优点:

    • 构建现代web应用程序的单一解决方案

    • 仍然是 MEAN 技术栈的一部分,尽管Angular 2 教程 只有很少的一部分是可用的

    • TypeScript提供了一些类似于静态语言(例如:C#、Java)的新特性。

    缺点:

    • 相比其他框架有着陡峭的学习曲线

    • 代码库文件很大

    • 无法从Angular 1.x版本直接升级

    • 与1.x相比,Angular 2.x的使用率相对较低

    • 尽管是谷歌项目,谷歌似乎没有使用它?

    Babel

    JavaScript 语言正在迅速发展。ECMAScript2015 于去年夏天发布,它的许多新特性在最新的浏览器上实现了。如果你想看看 ECMAScript 2015 的兼容性,你可以看看来自 @kangax 的这个 表。你会注意到,最新版本的 Edge,Firefox 和 Chrome 已经几乎完全兼容了。

    我们并不是生活在一个完美的世界。作为开发人员,我们需要继续支持旧的浏览器,它们没有最新最好的 JavaScript 特性。我们要推进 web 和改善我们的代码库。Babel 是一个 JavaScript 编译器,用于把最新的 JavaScript 标准编译成可在 IE9 等老浏览器上运行的兼容ES5的 JavaScript。它有一些插件,使得 React 开发更容易,甚至可以使用一些不属于该规范的特性(例如ES7)。

    何时使用 Babel?当你想使用新的 JavaScript 语言特性,同时还要支持老版本浏览器时。

    GitHub: 
    当前版本: 6.1.2
    网址: babeljs.io

      多个项目例如 Angular ,Ember 绑定使用 React 成为 MVC 中的 V。

    作为在 MVC 中的 V,许多工程结合 React 和 AngularJS 或 Ember 一起使用。

    Vue.js

    Vue.js

    key value
    类型 框架
    官网 vuejs.org
    仓库地址 github.com/vuejs/vue
    最新版本 2.0
    开发者 Evan You
    发布日期 2014年2月
    文件大小 19kb min
    用途 单页应用
    使用率

    Vue.js是一个用于构建用户界面的轻量级渐进式框架。Vue.js的核心是提供一个类似于React的虚拟DOM服务于视图层,他不仅可以独立的构建一个完整的单页面应用,也可以与其他库集成使用。该框架是由之前在AngularJS工作过的尤雨溪创建的。

    Vue.js使用HTML模板的语法绑定DOM实例数据。模型就是普通的JavaScript对象,当数据被改变时,它会自动更新视图。另外还提供了Vue.js生态工具,其中包括:脚手架(scaffolding)、路由(routing)、状态管理(state management)、动画(animations)等。

    优点:

    • 快速发展普及,并且日益流行

    • 很容易开发出高质量的项目,让开发者很有成就感

    • 依赖性小,性能好

    缺点:

    • 新项目使用Vuejs——可能存在很大风险

    • 依赖于单个开发者(目前此项目是尤小右一个人开发)的更新

    • 相较于其他框架,Vuejs的教程资源不多

    更多 Web 开发实践

    本文来自微软技术布道师 Web 开发系列,里面有实用的 JavaScript 学习,开源项目和互操作性的最佳实践(包括与 微软Edge 浏览器和新的 EdgeHTML渲染引擎)。

    我们鼓励你跨浏览器和设备进行测试,包括微软的Edge——Windows 10的默认浏览器——在 dev.modern.IE 上有免费工具:

    • 扫描你的网站中过时的库,布局问题和可访问性
    • 新葡亰496net,下载 Mac, Linux 和 Windows 下的免费虚拟机
    • 跨浏览器检查 Web 平台状态,包括微软 Edge 的路线图
    • 在你的设备上远程测试微软 Edge

    来自我们工程师和布道者的更深入学习:

    • GitHub 上的编码实验室: 跨浏览器测试和最佳实践
    • 2015 微软 Edge Web 峰会 (来自我们的工程师团队和JS社区)
    • 很棒,我可以在 Mac 和 Linux 上测试 Edge 和 IE 了! (来自Rey Bango)
    • 推进 JavaScript 同时不破坏 Web (来自Christian Heilmann)
    • Edge 渲染引擎让 Web 工作 (来自Jacob Rossi)
    • 基于 WebGL 的 3D 渲染 (来自David Catuhe)
    • 托管 web app 和 web 平台的革新 (来自Kevin Hill和Kiril Seksenov)

    我们的社区开源项目:

    • vorlon.JS (跨设备远程 JavaScript 测试)
    • manifoldJS (部署跨平台托管 web app)
    • babylonJS (让 3D 图形制作更简单)

    更多免费工具和后端web开发内容:

    • Linux, MacOS 和 Windows 下的 Visual Studio Code
    • 使用 node.JS 编码并在 Azure 上免费试用

      2 赞 26 收藏 1 评论

      什么时候使用 React?当你想要有一个强大的 View 层,而应用中的其它部分缺不需要一个复杂的框架时,或当你想要一个 View 层和你的 Angular, Backbone,或者 Ember应用一起使用。当你试着构建一个同构的网页框架。

    什么时候使用 React?当你想要一个强大的 View 层,但应用的其它部分却不需要详尽的框架时,或者当你的应用中想要一个结合 了Angular、Backbone 或 Ember 的视图层时,又或者是创建一个同构的 Web 框架时。

    Backbone.js

    Backbone.js

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

    Backbone.js是提供在服务器端框架中常见的MVC结构的最早的客户端选项之一。Backbone.js只有Underscore.js一个依赖,而且Backbone.js和Underscore.js都是出自同一个开发者之手。

    Backbone.js自称是一个库,因为他可以与其他项目集成。我猜大部分人都把他当做一个框架,尽管不像其他人认为的那样。

    优点:

    • 小, 轻量 ,简单

    • 不在HTML中添加业务逻辑

    • 完善的文档

    • 很多应用程序使用,如:Trello, WordPress.com, LinkedIn 和 Groupon 等

    缺点:

    • 相较于其他框架(如AngularJS)它的抽象级别很低(尽管这被看做一种优势)

    • 需要依赖其他组件来实现一些功能,例如:数据绑定功能

    • 目前越来越多的框架已经不再采用MVC结构了

    关于作者:cucr

    新葡亰496net 3

    新浪微博:@hop_ping 个人主页 · 我的文章 · 17

    新葡亰496net 4

      GitHub:

    Backbon

    Ember.js

    Ember.js

    key value
    类型 框架
    官网 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)

    • 和那些朝着小组件结构的方向发展的框架相比他是庞大笨重的

    • 陡峭的学习曲线——这是Ember学习的方法或者没有方法学习

      目前版本:v0.14.0

    新葡亰496net 5

    Knockout.js

    Knockout.js

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

    一个较老的MVVM框架,Knockout.js采用观察者模式去确保UI与底层数据是保持同步的。他的特性是:模板化 和 依赖追踪。

    优点:

    • 小,轻量,而且没有依赖

    • 优秀的浏览器支持(那怕是IE6)

    • 完善的文档

    缺点:

    • 大项目将会变得混乱复杂

    • 发展很缓慢

    • 使用率在缩水

      网址: Facebook.github.io/react/

    Backbone 是一个很著名的简单的框架,融入了一个单一的 JavaScript 文件。Backbone 流行了一段时间。由 Jeremy Ashkenas 从CoffeeScript 和 Underscore 框架中开发出来的。对于追寻小型架构的团队来说,Backbone 是特别受欢迎的。因为他们小型的 Web 应用是不需要使用像 AngularJS 和 Ember 这样的大型框架的。

    其他值得关注的

    渴望更多?下面的这些项目虽然不是很流行但是很值得关注:

    • Polymer – 能够跨浏览器支持HTML5 web组件的库。

    • Meteor – 一个用于web应用程序的全栈平台。

    • Aurelia – 一个较新的,轻量级的,跨平台的框架。

    • Svelte – 一个非常新的项目,这个项目可以把框架的源码解压缩并格式化为显示友好的JavaScript。

    • Conditioner.js – 一个基于状态自动决定加载或者卸载模块的库。

      Backbone

    Backbone 提供了一个完整的 MVC 框架和路由。该模型允许键-值绑定和处理数据变化的事件。Models(和 Collections)可以连接到 RESTful API 中。Views 可以声明事件处理,而路由器则可以非常出色地处理 URL 和状态管理。在建立一个不提供太多功能和非必要复杂功能的单页面应用时,能提供你所需的所有功能。

    工具: 通用自动构建工具

    构建工具可以自动构建各种web开发任务,比如:预编译、编译、图像压缩优化、代码压缩、代码校验以及运行测试等。并且可以在单一可执行的文件中管理所需的任务。最常用的工具如下所列:

      Backbone 是 一个出名的精简的框架,所有内容都可以放到一个单一的文件里。Backbone 已经流行了一段时间,其作者是 Jeremy Ashkenas,曾经由于开发了 CoffeeScript 和 Underscore 而为大家所知。Backbone 特别适用于需要开发的 web 程序不大的那些团队,他们希望能使用小巧的框架,而不是像 Angular 或者 Ember 这样的大型框架。

    什么时候使用 Backbone?Backbone 是适用于简单 Web 应用的 GOTO 框架。

    Gulp.js

    Gulp.js

    key value
    官网 gulpjs.com
    仓库地址 github.com/gulpjs/gulp
    最新版本 3.9.1
    月下载量 300万

    Gulp.js并不是第一个自动构建工具,但他很快变成了最流行的,他也是我个人最喜欢用的。Gulp使用易于阅读的JavaScript代码,将源文件加载到流中,并在将数据输出到构建文件夹之前通过各种插件管道处理数据。它简单、快速、有趣——Gulp.js和之前任何一个可选项比较你都会发现这些特点(examine Gulp.js before any other option)。

      Backbone 提供了全功能的 MVC 框架和路由。它的 Model 可以实现 key-value 绑定和数据更新的事件处理。Model(及 Collection)可以与 RESTful 的 API 协同工作。View 可以声明事件处理,Router 在 URL 处理和状态管理方面做的很好。对于开发一个单页面应用,所有需要的功能都可以支持,不需要额外引入不需要的复杂性。

    Ember

    npm

    npm

    key value
    官网 npmjs.com
    仓库地址 github.com/npm/npm
    最新版本 4.5.0
    月下载量 300万

    npm是Node.js的包管理工具,但是他的脚本工具可以被用于通用的自动构建工具。对于一个没有很多依赖的简单项目来说这是一个不错的选择。但是,用于很复杂的任务你会很快发现这是不现实的。

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

    新葡亰496net 6

    Grunt

    Grunt

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

    Grunt是第一个实现批量处理的JavaScript任务自动构建工具之一,但是他的构建速度的瓶颈和复杂的JSON配置导致了Gulp的快速发展。现在最糟糕的问题已经被解决了,Grunt仍然是一个很好的工具可供选择。

      GitHub:

    Ember 是一个独立的 Web 应用程序框架,专注于编码效率。Ember 是比较受欢迎的,核心团队包括牛人 Yehuda Katz,他是 Ruby on Rails 和 jQuery 的核心团队之一。Ember 描述自己为一个不浪费你的时间,能用于创建伟大 Web 应用程序的框架。 这是非常有主见,这也使你有了很多选择。

    工具:模块打包工具

    管理越来越多的JavaScript文件将很快变成一个苦差事。一般情况下,浏览器加载文件是不会被编译的,所以文件之间的依赖关系必须通过合适的文件加载顺序来保证。处理这种顺序的方式有很多,比如: ES6 Modules 和 CommonJS,但是浏览器支持的限制,模块打包工具变得必不可少。

      当前版本:1.2.3

    Ember 也是一个 MVC 框架。它包括一个模板和视图引擎,保证了数据变化时的自动更新,就像 AngularJS,Backbone 和 React 一样。它包括的概念 web 组件,让你用自己的标签来扩展 HTML(就像 AngularJS)。它也有一个路由和模型引擎,能够和 RESTful API 协同工作。

    Webpack

    Webpack

    key value
    官网 webpack.js.org
    仓库地址 github.com/webpack/webpack
    最新版本 2.5.1
    月下载量 600万

    Webpack支持所有流行的模块配置,并已成为React开发的代名词。虽然Webpack声称是模块打包工具,Webpack也可以用于通用的自动构建工具。

      官方网站: backbonejs.org

    什么时候使用 Ember?如果你只是想要一个能够工作的框架时、或者你的预算紧张、又或者最后期限将近时,不追求太多的灵活性,可以使用 Ember。

    Browserify

    Browserify

    key value
    官网 browserify.org
    仓库地址 github.com/substack/node-browserify
    最新版本 14.3.0
    月下载量 260万

    Browserify可以让你使用Node.js的CommonJS模块方式来组织你的JavaScript代码,通过编译将所有模块打包在一个浏览器兼容的文件中。

      Ember 作为一个 web应用框架,非常专注于程序员的效率上。Ember 相对比较流行,核心团队有不少很聪明的成员,包括 Yehuda Katz,他是 Ruby on Rails 和 jQuery 的核心团队的成员。Ember 对自己的定位是“一个用来创建震撼的 web 应用的框架”,它也确实不会浪费你的时间。它在这方面非常专注,为你提供很多的选择。

    JQuery

    RequireJS

    RequireJS

    key value
    官网 requirejs.org
    仓库地址 github.com/jrburke/r.js
    最新版本 2.3.3
    月下载量 100万

    RequireJS是一个在浏览器端(客户端)的模块加载器,尽管他也能被用于Node.js端(服务端)。

      Ember 同样也是一个 MVC 的框架。它包含一个模板和视图引擎,在数据更新时可以自动更新,这方面与Angular, Backbone, 和 React 类似。它还有一个 web 组件 的概念,允许你用自己的标签扩展HTML,(如Angular)。它还有一个路由及 model 引擎,可以与 RESTful API 一起工作的很好。

    新葡亰496net 7

    工具: 代码校验工具

    “代码校验工具(Linting)”会分析你的代码,检测代码中潜在的错误和不规范的语法结构。这样你的代码中就不会再出现缺少括号或者未声明的变量这样的错误。

      何时使用 Ember?适用于你需要一个框架马上就能使用。对灵活性要求不高的时候可以选择 Ember,因为你通常是预算紧张或者工期紧张。

    jQuery 是一个不需要过多介绍的框架。它凭一己之力使得跨浏览器站点成为现实并促使 Web 发展到今天。Web 标准被大多数主要浏览器厂商所采纳真正的尊重,jQuery 是其原因之一。jQuery 的基金会的使命是“通过开发和支持开源软件,提高开放的网络,使之为所有人开放,并与开发社区合作。”

    ESLint

    ESLint

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

    ESLint是一个可插拔的代码校验工具。每一个校验规则都是一个插件来实现,所以他可以灵活配置成你所需要的样子。

      GitHub:

    jQuery 是世界上最常用的 JavaScript 库,没有应用程序不去使用它,除非不在乎编码效率。它使得在所有浏览器中,DOM traversal、事件处理、动画、AJAX 是如此的简单和容易。

    JSHint

    JSHint

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

    一个灵活的JavaScript代码校验工具,他可以很好的在真正的错误和严格的语法要求之间取得很好的平衡(既可以发现代码中的错误,又不至于严格的按照死板的语法标准来校验代码)。JSHint是我个人最喜欢用的一个校验工具。

      当前版本:2.1.0

    什么时候使用 jQuery?除你想使用像 Zepto 这样的轻量级版本之外,都可以使用 jQuery。

    JSLint

    JSLint

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

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

      官方网站: emberjs.com

    Wijmo

    工具: 测试工具

    TDD(测试驱动开发)需要你先编写测试代码(用来测试业务代码),然后再开始写业务代码。当然如果你能编写代码去测试你的测试代码那就更好了。

    这样的工具你会有很多选择,比如:Ava, Tape 和 Jest ,但是最流行的三个如下所列:

      JQuery 这个库就不用多做介绍了。它独立承担了让跨浏览器网站成为现实的重任,是它使得整个 web 成为今天这个样子。Web 标准的制定以及浏览器厂家对标准的接受方面,jQuery 功不可没。jQuery 基金会的目标是"通过开源软件的开发和支持,以及社区的协作,增进开放的网络,让每个人都能访问"

    新葡亰496net 8

    Mocha

    Mocha

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

    Mocha是一个既可以在Node.js运行也可以在浏览器运行的JavaScript测试框架。Mocha支持异步的测试方式,他通常和Chai一起使用,为了使测试代码能够以一种可读的方式被表示。

      JQuery 是世界上应用最广的 JavaScript 库,没有应用可以离开它,除非你对开发效率不感兴趣。它使得 DOM 遍历、事件处理、动画和 AJAX 在所有浏览器上都变得如此的简单易用。

    Wijmo Enterprise 是为企业应用程序开发而推出的一系列包含 HTML5 和 JavaScript 的开发控件集。包含有先进的 JavaScript 控件、经典的 jQuery 小部件、金融图标、以及 FlexSheet 和 OLAP,能够满足移动端、PC 端和支持 IE6 等应用程序的需求。同时,Wijmo 还支持其它流行的框架,如 Angular、Angular2、KnockOut、Vue、React 等。

    Jasmine

    Jasmine

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

    Jasmine是一款行为驱动的测试工具,他可以自动测试你的UI和浏览器中的交互行为。

      何时使用 jQuery?任何时候,除非你打算使用更轻量级的版本,例如 Zepto 。

    什么时候使用 Wijmo?当你想为应用程序构建具有良好用户体验的用户界面时。

    QUnit

    QUnit

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

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

      GitHub:

    Underscore&lodash

    工具:其他

    尽管我尽了很大的努力,我还是接受有人不喜欢JavaScript!也许编译器比如:TypeScript, LiveScript 和 CoffeeScript能够让你的开发生活变得有趣一点。另外,现代的转换工具Babel能够将简洁的 ES2015代码转换为浏览器兼容的ES5代码,也许又会让你有更多的乐趣。

    市面上现在存在几十个JavaScript驱动的HTML模板引擎,比如:Mustache, Handlebars, Pug (Jade) 和 EJS。我比较倾向于选择使用保持JavaScript语法的轻量模板,比如:EJS 和 新葡亰496net库和工具,工具及其使用。doT。

    最后, 能自动生成文档的时候谁会愿意自己手动的去写呢?ES2015兼容的文档生成器有: ESDoc, JSDoc, YUIdoc, documentation.js 和 Transcription。

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

    新葡亰496net 9

    总结和推荐

      官方网站: jquery.com

    对于程序开发者来说,一些 JavaScript 的内置,效率是不够高的。总有缺少实用的功能或将代码化简的函数。Underscore(和 lodash)是一个 JavaScript 库,提供了实用功能,同时不需要 JavaScript 对象内置的猴子补丁。这两个库提供超过 100 个帮助函数和其它特别好用的功能;,包括像地图,过滤器,调用,缩减,模板,调节,绑定,扩展,挑选,克隆和更多的功能。

    更多来自作者的文章

    • 网络中最令人讨厌的“黑暗模式”

    • 你的Web主机通过这7项测试了吗?

    如果你选择随大流,目前大众的趋势可能已经落后于React等一类框架,而其他的库正在以类似的技术方向发展。对于web应用来说,这是一种通用的、安全的选项,但是你也应该考虑 Vue.js。

    整体性的框架现在渐渐衰落,但是如果你的大项目需要一个严格架构的话,AngularJS仍然是一个不错的选择。大部分人仍坚持使用V1.0版本,但是这可能是出于项目需要逼不得已的选择。长期来看,如果你愿意学习TypeScript,版本4 会是一个更加安全的选择。

    不要忽视jQuery。尽管他不是新潮的技术趋势,也不会在各种科技新闻中出现,但它是积极发展的,而且对于网站和应用程序都有更好的服务支持能力。众所周知,jQuery有着平滑的学习曲线。

    如果你是喜欢挑战的话,Svelte是一个有趣的客户端/服务端的选项,它能够在构建时预渲染JavaScript,这也许能改变我们的开发方式。

    工具的选择不是太重要,可能会因项目而异。Gulp是使用最多的,但是WebPack正变得越来越流行。使用ESLint 和 Mocha用于测试会让你不会出错,但并不是只有这两个可以使用,也有很多的其他工具可以使用。

    也就是说,所有的项目、团队和技术栈都是不同的。技术选型的时候你的评估时间是有限的,所以你很可能就会使用你知道的技术。本文将会收到推荐的未知框架,但当你有锤子的时候,一切看上去都像钉子一样(原文: This article will receive comments recommending FrameworkX but everything looks like a nail when you have a hammer.)。

    最后,不要忘记那些可供选择的框架、库和工具!JavaScript开发在过去十年中发生了翻天覆地的变化,我们已经从几个基本的辅助库变成了一个压倒性的选择。我们很容易陷入越来越复杂的开发陷阱,或者每隔几个月就切换到最新的流行框架。小的个人项目可以考虑使用vanilla JavaScript。在为其他项目选择框架时这些知识不会过时,这一点是很宝贵的。

    我没有列出你最喜欢使用的JavaScript框架、库和工具?当然我会有遗漏! 欢迎给我留言补充…

    本文审校:Panayiotis Velisarakos 和 Sebastian Seitz。 感谢SitePoint’s 所有的审稿人,让本站内容质量变得更高!

    译者注:由于水平有限,如有异议欢迎指正,谢谢~

      Underscore 和 lodash

    什么时候使用 Underscore?当你需要一个单一 JavaScript 文件来提高编码效率时。

    版权声明

    本译文仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处、译者和众成翻译的完整链接。要获取包含以上信息的本文Markdown源文本,请点击这里。

      有时内置的 JavaScript 对于让程序员真正的有生产力还远远不够。总是会缺了一个工具函数,又或者是一个能简化代码的函数。Underscore (还有 lodash) 就是这样的一个 JavaScript 库,它提供了一整套工具函数,无需经验不足的程序员再去给内置的 JavaScript 对象打补丁。两个库都提供了超过 100 个辅助函数,还有其它特别的好东西;包括了像 map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone 等等这些函数。

    什么时候使用 lodash?当你需要一个模块和轻量高效的,容易被 AMD 和社区插件支持 Underscore 版本时。

      什么时候使用 Underscore?当你想要拥有一个立即能增强程序员效率的 JavaScript 文件时。

    D3.js

      Underscore GitHub :

    数据可视化和图表是 Web 应用程序的常见需求。当涉及到任何数据操作和可视化,D3.js 是事实上的标准。它是在 GitHub 上最受欢迎的项目之一,并在被数百个组织使用。大量的图形,图表和可视库建立在 D3 上。

      Underscore 当前版本:1.8.3

    D3 允许操作任何数据源的文件,并且可以转换为 DOM、SVG 或 CSS。D3 专注于现代网络标准,并确保像 Flash 或 Silverlight 等专有格式的免费。

      Underscore 网站: underscorejs.org

    什么时候使用 D3.JS?当你需要任何形式的可视化时。

      什么时候使用 lodash?当你想要一个模块化的,性能更好好一点的,并附带有对于 AMD 和社区插件支持的 Underscore 版本时。

    Babylon.js

      Lodash GitHub:

    想要创建一个完全运行在现代 Web 标准和跨浏览器上的视频游戏?可以考虑 Babylon.js,Babylon.js 是一个建立在 WebGL 和 JavaScript 上的 3D 游戏引擎。你可以创建一个难以置信的高质量的游戏引擎,包括物理,音频和粒子系统。

      Lodash 当前的版本:v3.10.1

    什么时候使用 Babylon.js?当你正在构建一个包含任何复杂 3D 场景的视频游戏时。

      Lodash 网站: lodash.com

    three.js

      D3.js

    新葡亰496net 10

      数据可视化和图表是web应用程序的一种常规需求。当涉及到任何数据操作和可视化时,D3.js 就是事实上的标准。它是 GitHub 上最受欢迎的项目之一,并被数百个组织机构所采用。大量的图形、图标和可视化库都是构件于 D3 之上的。

    想要创建一个 3D 可视化,却又不需要完整的游戏引擎?Three.js 提供了一个轻量的 3D 库来将 3D 渲染成一个 HTML5 canvas、SVG 和 WebGL。这确实是一个明确的库,在 Three.js 的用例展示中,有几百个效果很好的例子。

      D3 让你可以操作任何来源的数据文档,并将数据进行转换后应用到 DOM、SVG 和 CSS上。D3 专注于现代的 web 标准,以及确保你可以不受到任何像 Flash 或者 Silverlight 这样的专有格式的限制。

    什么时候使用 three.js?每当你需要一个简单的三维可视化,可以输出到画布上时。

      什么时候使用 D3.js?当你需要任何类型的视觉效果的时候。

    Mocha & Chai

      GitHub:

    新葡亰496net 11

      当前版本:3.5.6

    在很长一段时间里,JavaScript 的测试令人难以置信的烦恼。从头开始,测试任何代码通常被视为令人讨厌的,但它是每一个开发者应该做的。同时,测试他们的代码,每个开发者似乎总是很不屑,而选择忽略它。有一个办法来改善这个问题,就是使用 Mocha & Chai 的形式。虽然这两个库从美味的热饮中得名的,但是它们都可以以不同的方式测试你的代码。

      网站: d3js.org

    Mocha 是一个 JavaScript 测试框架,可以很轻松地在 node 模型和浏览器应用程序中测试异步代码。Mocha 测试可以串联运行,并且对于正确的测试用例具有高质量的跟踪异常。

       Babylon.js

    Chai 是一个行为驱动的开发/测试驱动开发断言库,可以与 Mocha 配套使用。它使得可以很容易的以一种可读的方式去表达你的测试内容。

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

    什么时候使用 Mocha 和Chai? 永远都可以!请测试你的代码,使世界变得更美好。

    新葡亰496net库和工具,工具及其使用。  什么时候使用 Babylon.js?当你正在构建一个视频游戏或者一个某种类型的 3D 场景时。

    Karma

      GitHub:

    这个列表上包含了 Mocha 和 Chai,如果不包含运行这些测试和设定持续集成测试的运行者,那么这将是不完整的。Karma 是一个旨在帮助针对不同的浏览器自动运行测试的工具。这将帮助你在所有的浏览器上运行 Mocha 和 Chai。

      当前版本: 2.2

    并不是每一个浏览器都可以在每个平台上运行,幸运的是,有一些免费的工具,你可以用来测试其他浏览器, 例如浏览器截图。如果你在 OS X 上运行,并希望测试 Edge 或 Internet Explorer,您可以使用这种免费工具。

      网站: babylonjs.com

    什么时候使用 Karma?当你的应用程序有一个完整的测试套件,并想要确保在所有的浏览器上测试通过时。

      Three.js

    PhantomJS

      想要构建一个 3D 视觉特效,但是又不需要一个功能完整的游戏?Three.js 提供了一个轻量级的 3D 库,让你可以将 3D 效果渲染成一个 HTML5 的 canvas, SVG, 和 WebGL。这是一个详单简单的库,在 three.js 陈列站点上可以看到数百个漂亮的示例。

    新葡亰496net 12

      什么时候使用 Three.js?当你需要一个简单的能输出为 Canvas 的 3D 视觉效果时。

    运行全功能浏览器,以测试你的代码内存和 CPU 密集型。PhantomJS 允许你在 Safari 和 Chrome 上运行 headless WebKit 的渲染引擎。这样你就可以运行你的测试,捕捉屏幕截图,监视网络,使用 JavaScript API 自动浏览页面。

      GitHub:

    什么时候使用 PhantomJS? 当你需要做更多的测试,操作页面并监视网络请求时。

      当前版本: r73

    Grunt & Gulp

      网站: threejs.org

    新葡亰496net 13

      Mocha 和 Chai

    产品网站建设通常会涉及到一些提高性能的任务,例如缩小 JavaScript 和 CSS,CoffeeScript/TypeScript 的编译,单元测试,性能 lintin。也许你已经为产品网站准备好了工具链,但是如果还没有,那么你可以使用 Grunt 和 Gulp 这样的工具。这两个工具都有很多插件,来帮助你完善产品网站。

      长久以来测试 JavaScript 一直都令人不甚反感。说起来,测试任何代码都是令人反感的,但又却是每个开发者应该做的事情。每个开发者似乎总是对此不屑,忽视掉针对它们的代码的测试工 作。 现在有了治愈这种反感的办法了,那就是 Mocha 和 Chai。而两个库都以美味的热饮命名,都能帮助你测试代码,不过方式不同而已。

    什么时候使用 Grunt?如果你喜欢写配置文件,并且不介意任务运行期间产生中间文件时。

      Mocha 是一个 JavaScript 测试框架,它使得针对你的node模块或者浏览器应用中的异步代码的测试变得容易起来。Mocha 测试可以串起来运行,并且对于针对合适的测试案例进行异常跟踪的质量不错。

    什么时候使用 Gulp?如果对比于写配置文件,你更喜欢写代码,并且想要使用 node.js 的流媒体功能来更快的执行任务时。

      Chai 是一个行为驱动开发和测试驱动开发的断言库,可与 Mocha 比肩。它以一种可读性好的风格来描述你所要测试的东西,用起来简单。

    Babel

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

    JavaScript 作为一门语言,发展地很快。2015年夏天的 ECMAScript 发布了它的许多在最新的浏览器中实现的新功能。如果你想看看2015年的 ECMAScript 兼容,你可以看看来自原 @kangax 的列表。你会发现最新版本的 Edge,Firefox 和 Chrome,具有近乎完全的兼容性。

      Mocha GitHub:

    我们不是生活在一个完美的世界。作为开发人员,我们需要继续支持那些没有最新 JavaScript 特性的旧版浏览器。我们要推进网络并提高我们的代码库。Babel 是一个 JavaScript 编译器,可以将最新的 JavaScript 标准编译成 ES5 兼容的 JavaScript,这样就允许在像 IE9 这样较老的浏览器上运行。它有一些插件,使得很容易的使用 React 去开发,甚至使用一些规格之外的特性去开发。

      Mocha 当前版本: 2.3.3

    什么时候使用 Babel?当你要使用新的 JavaScript 语言特性,同时继续支持旧版浏览器时。

      Mocha 网站: mochajs.org

    更多的Web开发实践

      Chai GitHub:

    本文来自于 JavaScript 学习文章中微软技术布道者和工程师的系列文章之一,同时最好的文章里也包含微软的 Edge 浏览器和新的 EdgeHTML 渲染引擎。

      Chai 当前版本: v3.4.1

    我们鼓励大家测试跨浏览器和设备,例如微软的 Edge(Windows10 默认的浏览器)

      Chai 网站: chaijs.com

    文章来源:by Rami Sayar

      我们已经在这份清单中囊括了 Mocha 和 Chai ,如果不去把可以运行这些测试或者也许可以设定持续集成测试的测试运行器拉进来的话,那么这份清单就不会是完整的。Karma 是一个用来帮助你在不同的浏览器中自动运行你的测试的工具。它将会帮助你在时下所有的浏览器上运行你的 Mocha 和 Chai 测试。

    原文链接:

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

    转载请注明出自:葡萄城控件

      什么时候使用 Karma?当你想要拥有一个功能全面的测试套件,并像确保测试能在所有的浏览器上通过时。

    关于葡萄城

      GitHub:

    葡萄城是全球控件行业领导者,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

      当前版本: v0.13

      网站: karma-runner.github.io

      PhantomJS

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

      什么时候使用 PhantomJS ?当你需要进行更多的测试、操作网页和模拟网络请求的操作时。

      GitHub:

      当前版本: v2.0

      网站: phantomjs.org

      Grunt 和 Gulp

      构建用于生产环境的网站一般还涉及到一些提升性能这方面的任务,像 JavaScript 和 CSS 的最小化,CoffeeScript/TypeScript 的编译,单元测试,代码精简。也许你已经有了一个工具链,用于准备你生产版本上的网站,而如果你还没有的话,就会想要拥有一个像 Grunt 或者 Gulp 这样的任务运行器。它们都无数的插件,能为你的网站进行任何的转换,以使其能投入生产环境。

      什么时候使用 Grunt?当你更愿意编写配置文件,而对于你的任务运行器会生成什么中间文件并不关心时。

      Grunt GitHub:

      Grunt 当前版本: v0.4.5

      Grunt 网站: gruntjs.com

      何时使用 Gulp?当你更愿意编写配置代码,并且想利用 node.js 的流处理能力实现更快的任务执行时。

      Gulp GitHub:

      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:

      当前版本: 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 渲染的潜能 (来自于 David Catuhe)

      托 管web 应用和web平台方面的创新 (来自于 Kevin Hill 和 Kiril Seksenov)

      我们的社区开放源代码项目:

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

      manifoldJS (部署跨平台托管 Web 应用)

      babylonJS (让 3D 图形这些东西更平易近人)

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

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

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

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net库和工具,工具及其使用

    关键词:

上一篇:代码的实践,从回调函数到

下一篇:没有了