Javascript開發之工具歸納

本文轉載自查看原文 2015-05-20 06:58 5161 編程開發 - JS/ 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/