Javascript开发之工具归纳

写在前面

由于JS开发对我来说是全新的技术栈，开发过程中遇到了各种各样的框架、工具，同时也感叹一下相对于.Net的框架（工具框架以及测试框架等）JS框架真的是太丰富了、社区的力量果然强大～～～也是由此希望本文能概括常用的框架以及一些基本理念，不断完善中，希望各位有经验的朋友能多多提意见。

0. 前端框架

Ember.js

Ember.js是一套javascript的框架，Ember是一个雄心勃勃的Web应用程序，消除了样板，并提供了一个标准的应用程序架构的JavaScript框架。

更多请参考《Ember.js系列文章》

Angular.js

  AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

  通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：

  类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等

  框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。

中文站：http://angularjs.cn/

React.js

许多人使用React作为MVC架构的V层。 尽管React并没有假设过你的其余技术栈， 但它仍可以作为一个小特征轻易地在已有项目中使用. ReactJs三大特性：UI层、VirtualDom、数据流

中文站：http://reactjs.cn/

一篇不错的入门介绍：http://www.cocoachina.com/webapp/20150721/12692.html

Backbone.js

Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESRful JSON接口连接到应用程序。

官方地址：https://github.com/jashkenas/backbone/

中文介绍：http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html

Knockout.js

Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。

Knockout有如下4大重要概念：

• 声明式绑定 (Declarative Bindings)：使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。

• UI界面自动刷新 (Automatic UI Refresh)：当您的模型状态(model state)改变时，您的UI界面将自动更新。

• 依赖跟踪 (Dependency Tracking)：为转变和联合数据，在你的模型数据之间隐式建立关系。

• 模板 (Templating)：为您的模型数据快速编写复杂的可嵌套的UI。

简称：KO

官方网站：http://knockoutjs.com

@汤姆大叔 开发指南：http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html

sproutcore.js

SproutCore的目标是在浏览器中提供极佳的桌面效果应用而无需任何浏览器插件。所有这些都不是用什么新技术实现的，而是采用这几年广为应用同时又在不断发展的技术。SproutCore主要采用了JavaScript、HTML以及CSS，这样对后端系统就没什么限制了，显然是个优势。sproutcoreJS2.0是Ember.js前身。

官方网站：http://sproutcore.com/

1. 基础知识篇

Node

Node全称是Node.js是一套javascript运行时环境，实际上是对Google V8引擎的一个封装。

Node.js官网：https://nodejs.org/

Node.js中文社区：https://cnodejs.org/

51CTO-Node.js专题：http://developer.51cto.com/art/201109/290443.htm

Ember-cli

Ember-cli是Ember.js的一套命令行工具，方便快捷的增加模板、路由、模型、视图等MVC结构，还提供有/无视图的测试框架，提高开发效率，是开发Ember.js必不可少的工具。

官方网站：http://www.ember-cli.com/

ES6

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Assocication）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。

博友介绍ES6的文章：http://www.cnblogs.com/Wayou/p/es6_new_features.html

阮一峰的ES6书籍：http://www.ruanyifeng.com/blog/2014/04/ecmascript_6_primer.html

Travis CI

Travis CI是在软件开发领域中的一个在线的，分布式的^[1]持续集成服务，用来构建及测试在GitHub^[2]托管的代码。这个软件的代码同时也是开源的，可以在GitHub上下载到^[3]，尽管开发者当前并不推荐在闭源项目中单独使用它。^[4]

它提供了多种编程语言的支持，包括Ruby，JavaScript，Java，Scala，PHP，Haskell和Erlang在内的多种语言。^[5]许多知名的开源项目使用它来在每次提交的时候进行构建测试，比如Ruby on Rails，Ruby和Node.js。^[5][6]

注：目前在Github上Travis CI比较流行，其不仅仅是一个持续集成的框架，而且还能利用github上的更改“钩子”进行代码变化时自动运行测试，而且还可以将测试结果图标用Markdown的语法绑定到你自己的ReadMe.md中简单方便实用。

Travis CI天生支持Node.js的语法无需指定语言，所以可以同时支持两种组合语言测试，例如Node.js+Python、Node.js+Scala等，但前提是Node.js+『』的组合。

官方网站：https://travis-ci.org/

RESTful API

RESTful架构是一种流行的互联网软件架构，它结构清晰，符合标准，易于理解，扩展方便。
REST是Representational State Transfer的缩写，翻译为“表现层状态转化”。表现层其实就是资源，因此可以理解为“资源状态转化”。
网络应用上的任何实体都可以看作是一种资源，通过一个URI(统一资源定位符)指向它。

非常有价值的参考资料：RESTful JSON
API，理解RESTful架构

2. 包管理工具篇

Npm

NPM的全称是Node Package Manager^[1] ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

如果你熟悉ruby的gem，Python的pypi、setuptools，PHP的pear，那么你就知道NPM的作用是什么了。

Nodejs自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是，Nodejs库和框架为我们提供了帮助，让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦，有了NPM，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。

官方网站：https://www.npmjs.com/

Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包，并管理这些包之间的依赖。

功能有些类似于Component。不同之处是，Component是围绕GitHub系统构建的，而Bower既可以管理基于本地资源的包，也可以管理基于git系统的包。
在Bower中，可以通过 component.json文件来定义包的名称、版本、代码中的主要元素、版本之间的依赖关系等。

官方网站：

3. 编辑器篇

Sublime 3

付费IDE。

官方网站：http://www.sublimetext.com

WebStorm

付费IDE，30天免费，JetBrains出品，提供大量插件。

官方网站：http://www.jetbrains.com/webstorm/

HBuilder

DCloud公司是为HTML5而生的一家创业公司。
HTML5要想普及，需要解决很多问题。业内俗称HTML5有“性工能”障碍，因为HTML5的性能、工具、能力都比不过原生。
DCloud为此推出了3个产品：HBuilder开发工具、HTML5plus增强浏览器引擎、mui前端框架。
HBuilder是所有产品的核心和入口。
我们希望把HBuilder打造成最好用的、免费的HTML5开发工具，让程序员可以更爽的开发HTML5应用。

官方网站：http://dcloud.io/

Atom

Atom IDE是由Github出品，目前免费并且部分开源，其强大的插件支持以及良好的界面样式深受一些极客码农的青睐，目前的版本是v1.0.1。

官方地址：https://atom.io/themes

4. 测试框架篇

QUnit

QUnit是一个强大的JavaScript单元测试框架，该框架是由jQuery团队的成员所开发，并且是jQuery的官方测试套件。Qunit是Jquery的单元测试框架，并且被广泛使用在各个项目中。

官方网站：http://qunitjs.com/

Jshint

JSHint 是一个
JavaScript 的代码质量检查工具，主要用来检查代码质量以及找出一些潜在的代码缺陷。

官方网站：http://jshint.com/

Selenium

Selenium^[1] 也是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE(7、8、9)、Mozilla Firefox、Mozilla
Suite等。这个工具的主要功能包括：测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建回归测试检验软件功能和用户需求。支持自动录制动作和自动生成 .Net、Java、Perl等不同语言的测试脚本。Selenium 是ThoughtWorks专门为Web应用程序编写的一个验收测试工具。

官方网站：http://www.seleniumhq.org/

WebDriverTest

说起Web自动化测试，首先想到的就是Selenium。其实WebDriver就是基于Selenium的一个自动化测试类库，但它不再是运行在浏览器内的JS程序，而是自己可以控制浏览器。旨在改进Selenium1.0中出现的诸多问题，并且提供了非常易用、可读性很强的API。

5. JS类库

Underscore.js

Underscore 是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题：“如果我面对一个空白的 HTML 页面，并希望立即开始工作，我需要什么？” 他弥补了 jQuery 没有实现的功能，同时又是Backbone 必不可少的部分。

Underscore 提供了100多个函数，包括常用的：map、filter、invoke — 当然还有更多专业的辅助函数，如：函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。

中文地址：http://www.bootcss.com/p/underscore/

Lodash.js

lodash 是一个 JavaScript 实用工具库，提供一致性，模块化，性能和配件等功能。

与UnderscoreJs合并消息？ http://www.infoq.com/cn/news/2015/06/underscore-lodash-merging?utm_campaign=infoq_content&

精彩文章：http://ju.outofmemory.cn/entry/106512

官方地址：https://lodash.com/

6. 模块打包/加载工具

Webpack

模块打包器，主要目的是捆绑浏览器中应用的Javascript文件，支持同步（CommonJS/NodeJs）和异步加载（AMD），同时包含转换、打捆、打包等功能，代替RequireJS。

主要优势：

• 模块来源广泛，支持包括npm/bower等等的各种主流模块安装／依赖解决方案
• 模块规范支持全面，amd/cmd以及shimming等一应具全
• 浏览器端足迹小，移动端友好，却对热加载乃至热替换有很好的支持
• 插件机制完善，实现本身实现同样模块化，容易扩展

依赖资源/JS库：

• esprima
• enhanced-resolve
• uglify-js
• mocha
• should
• optimist
• async
• mkdirp
• clone

不错的入门指迷：http://segmentfault.com/a/1190000002551952

入门介绍：https://github.com/petehunt/webpack-howto（译文http://segmentfault.com/a/1190000002552008）

RequireJS

JS文件模块加载器，可以在前端或者Node环境下。

官方网站：http://requirejs.org/

Browserify

Browserify本身不是模块管理器，只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它，我们可以使用Node.js的npm模块管理器。所以，实际上，它等于间接为浏览器提供了npm的功能。

同样功能的Browserify和Webpack的对比：http://www.oschina.net/translate/browserify-vs-webpack

通俗易懂的介绍：http://www.ruanyifeng.com/blog/2014/09/package-management.html

Component

Component是Express框架的作者TJ Holowaychuk开发的模块管理器。它的基本思想，是将网页所需要的各种资源（脚本、样式表、图片、字体等）编译后，放到同一个目录中（默认是build目录）。项目停止，不再维护。

Duo

Duo是在Component的基础上开发的，语法和配置文件基本通用，并且借鉴了Browserify和Go语言的一些特点，相当地强大和好用。

Grunt

前段自动化构建、打包、代码压缩小工具

简介：http://www.cnblogs.com/yexiaochai/p/3603389.html

中文站：http://gruntjs.cn/

Gulp

Gulp是一个构建系统,Grunt升级版本，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。

简介：http://www.w3ctech.com/topic/134

中文网站：http://www.gulpjs.com.cn/

Broccoli

快速的、可信赖的管理通道，如同Grunt和Gulp。目前已被Ember.js采纳进来。

官方网站；http://broccolijs.com/

----------------------------------------------------------------------------------------------------------------------------------------------------

未完待续

2015.11.07 加入ReactJS、AngularJs、BackboneJs, UnderscoreJs

2015.11.17 加入编辑器Atom、打包工具Webpack、Grunt、Gulp...