Javascript開發之工具概括

時間 2019-11-09

原文原文鏈接

寫在前面

因爲JS開發對我來講是全新的技術棧，開發過程當中遇到了各類各樣的框架、工具，同時也感嘆一下相對於.Net的框架（工具框架以及測試框架等）JS框架真的是太豐富了、社區的力量果真強大～～～也是由此但願本文能歸納經常使用的框架以及一些基本理念，不斷完善中，但願各位有經驗的朋友能多多提意見。javascript

0. 前端框架

Ember.js

Ember.js是一套javascript的框架，Ember是一個雄心勃勃的Web應用程序，消除了樣板，並提供了一個標準的應用程序架構的JavaScript框架。css

更多請參考《Ember.js系列文章》html

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/java

一篇不錯的入門介紹：http://www.cocoachina.com/webapp/20150721/12692.htmlnode

Backbone.js

Backbone.js爲複雜WEB應用程序提供模型(models)、集合(collections)、視圖(views)的結構。其中模型用於綁定鍵值數據和自定義事件；集合附有可枚舉函數的豐富API；視圖能夠聲明事件處理函數，並經過RESRful JSON接口鏈接到應用程序。react

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

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

Knockout.js

Knockout是一個輕量級的UI類庫，經過應用MVVM模式使JavaScript前端UI簡單化。git

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(七、八、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/