了得網計算機/網絡_JavaScript快速全棧開發

編輯推薦

囊括前後端多項技術，全棧學習一站直達：

Node.js

MongoDB

Backbone.js

Parse.com

Heroku

WindowsAzure

多版本Chat應用，貫通多組合實現：

jQuery+Parse.comJSRESTAPI

Backbone.js+Parse.comJSSDK

Backbone.js+Node.js

Backbone.js+Node.js+MongoDB

內容簡介

本書涵蓋JavaScript快速開發的多項前沿技術，是極其少見的前後端技術集大成之作。本書所涉技術包括Node.js、MongoDB、Twitter Bootstrap、LESS、jQuery、Parse.com、Heroku等，分三部分介紹如何用這些技術快速構建軟件原型。第一部分是基礎知識，讓大家真正認識前後端及敏捷開發，並學會搭建本地及雲環境。第二部分與第三部分分別介紹如何構建前端原型和後端原型。作者以前端組件開篇，通過為一個示例聊天應用Chat打造多個版本（Web/移動），將前端和後端結合在一起並給出應用部署方式。

作者簡介

Azat Mardanov

資深軟件工程師，帶領團隊重構了具有5000萬用戶的DocuSign；社交媒體新聞聚合網Storify.com工程師，為包括BBC、NBC、CNN、白宮等客戶提供服務；原Gizmo首席技術官和聯合創始人，期間參與著名的500 Startups商業加速器項目；科技聚會和編程馬拉松活動的常客，曾和FashionMetric.com團隊一起在AngelHack活動上12次入圍決賽；General Assembly、Hack Reactor、pariSOMA和Marakana等機構的講師，其技術課程獲得一致好評；技術作者，其個人博客webAppLog.com一度成為谷歌搜索“express.js tutorial”結果中排名第一的教程站點；他還曾為美國各大政府機構開發關鍵任務應用。另外，他還著有Express.js Guide 、Practical Node.js 等書，而且開發了很多Node.js開源項目（如ExpressWorks、mongoui以及HackHall等）。

譯者簡介：胡波,網名jser.me，多年JavaScript開發經驗，曾負責人人網多個重要產品線前端，如相冊、日志等。現在，他在阿裡負責廣告投放端JS引擎及推廣頁面制作平臺。

第一部分快速入門
第1章基礎知識
1.1 定義前端
1.1.1 綜述
1.1.2 HTML
1.1.3 CSS
1.1.4 JavaScript
1.2 敏捷開發概述
1.2.1 Scrum
1.2.2 測試驅動開發
1.2.3 持續部署和集成
1.2.4 結對編程
1.3 後端定義
1.3.1 Node.js第一部分快速入門

第1章基礎知識

1.1 定義前端

    1.1.1 綜述

    1.1.2 HTML

    1.1.3 CSS

    1.1.4 JavaScript

1.2 敏捷開發概述

    1.2.1 Scrum

    1.2.2 測試驅動開發

    1.2.3 持續部署和集成

    1.2.4 結對編程

1.3 後端定義

    1.3.1 Node.js

    1.3.2 NoSQL和MongoDB

    1.3.3 雲計算

    1.3.4 請求和響應

    1.3.5 REST式API

第2章設置

2.1 本地環境搭建

    2.1.1 開發目錄

    2.1.2 瀏覽器

    2.1.3 IDE和文本編輯器

    2.1.4 版本控制繫統

    2.1.5 本地服務器

    2.1.6 數據庫：MongoDB

    2.1.7 其他組件

2.2 雲端環境搭建

    2.2.1 SSH 密鑰

    2.2.2 GitHub

    2.2.3 Windows Azure

    2.2.4 Heroku

    2.2.5 Cloud9

第二部分前端原型構建

第3章 jQuery和Parse.

3.1 定義

    3.1.1 JSON

    3.1.2 AJAX

    3.1.3 跨域調用

3.2 jQuery

3.3 Twitter Bootstrap

3.4 LESS

    3.4.1 變量

    3.4.2 混入類（mixin）

    3.4.3 操作符

3.5 使用第三方API（Twitter）和jQuery的例子

3.6 Parse.

3.7 使用Parse.的Chat概述

3.8 使用Parse.的Chat：REST API和jQuery版本

3.9 推送到GitHub

3.10 部署到Windows Azure

3.11 部署到Heroku

3.12 更新和刪除消息

第4章 Backbone.js

4.1 從頭開始構建Backbone.js應用

4.2 使用集合

4.3 事件綁定

4.4 使用Underscore.js視圖和子視圖

4.5 重構

4.6 開發時的AMD 和Require.js

4.7 生產環境裡的Require.js

4.8 簡單好用的Backbone腳手架工具

第5章 Backbone.js和Parse.

5.1 使用Parse.的Chat：JavaScript SDK和Backbone.js版本

5.2 部署Chat到PaaS

5.3 增強Chat應用

第三部分後端原型構建

第6章 Node.js和MongoDB

6.1 Node.js

    6.1.1 創建Node.js 的Hello World程序

    6.1.2 Node.js 核心模塊

    6.1.3 NPM

    6.1.4 部署Hello World到PaaS

    6.1.5 部署到Windows Azure

    6.1.6 部署到Heroku

6.2 Chat：運行時內存版本

6.3 Chat的測試用例

6.4 MongoDB

    6.4.1 MongoDB Shell

    6.4.2 MongoDB原生驅動

    6.4.3 MongoDB on Heroku：MongoHQ

    6.4.4 BSON

6.5 Chat：MongoDB版本

第7章整合前後端

7.1 不同域部署

7.2 修改入口

7.3 Chat應用

7.4 部署

7.5 同域部署

第8章福利：Webapplog上的文章

8.1 Node裡的異步

    8.1.1 非阻塞I/O

    8.1.2 異步編碼方式

8.2 使用Monk遷移MongoDB

8.3 在Node.js裡使用Mocha實踐TDD

    8.3.1 誰需要使用測試驅動的開發

    8.3.2 快速開始指南

8.4 Wintersmith：靜態網站生成器

    8.4.1 開始使用Wintersmith

    8.4.2 其他靜態網站生成器

8.5 Express.js教程：使用Monk和MongoDB的簡單REST API應用

8.6 Express.js教程：參數、錯誤處理及其他中間件

    8.6.1 請求處理函數

    8.6.2 參數處理中間件

    8.6.3 錯誤處理

    8.6.4 其他中間件

    8.6.5 抽像

8.7 使用Node.js和MongoDB通過Mongoskin和Express.js構建JSON REST API服務器

    8.7.1 測試覆蓋率

    8.7.2 依賴

    8.7.3 實現

    8.7.4 總結

8.8 Node.js MVC：Express.js Derby Hello World教程

    8.8.1 Node MVC框架

    8.8.2 Derby安裝

    8.8.3 文件結構

    8.8.4 依賴

    8.8.5 視圖

    8.8.6 主服務器

    8.8.7 Derby應用

    8.8.8 運行Hello World應用

    8.8.9 遞值給後端

總結與推薦閱讀

媒體評論

全棧Web開發的絕佳向導
我讀過不少Web軟件工程的書，這是最好最實用的一本！文字簡練、清晰易懂。作者分享了巨多現代Web應用開發的技術訣竅，一步一步，講解得非常明白。隻要逐個完成書中的“迷你”項目，你就可以徹底理解怎麼構建全棧Web應用，理解相關的所有組件。
內容太豐富了，好書
本來我隻想看其中幾章，但看著看著就情不自禁地一頁頁翻了下去，結果看完了整本書。書中的概念解釋得非常清楚，而且全都有注釋到位的示例代碼。想了解*的JavaScript全棧開發技術？快看這本書。
全都是干貨呀，非常實用
這本書太值得看了，它讓我真正明白了什麼是敏捷JavaScript開發。我喜歡敏捷和精益創業，誰要是想掌握快速開發Web應用的技術，就看這本書，沒錯。
關鍵是這本書內容全都是干貨，極為實用。看完這本書，把例子都做一遍，馬上就可以學以致用了。有這本書，你就不用再看一些講Backbone或Mongo的JS書啦。全棧Web開發的絕佳向導

我讀過不少Web軟件工程的書，這是最好最實用的一本！文字簡練、清晰易懂。作者分享了巨多現代Web應用開發的技術訣竅，一步一步，講解得非常明白。隻要逐個完成書中的“迷你”項目，你就可以徹底理解怎麼構建全棧Web應用，理解相關的所有組件。

內容太豐富了，好書

本來我隻想看其中幾章，但看著看著就情不自禁地一頁頁翻了下去，結果看完了整本書。書中的概念解釋得非常清楚，而且全都有注釋到位的示例代碼。想了解*的JavaScript全棧開發技術？快看這本書。

全都是干貨呀，非常實用

這本書太值得看了，它讓我真正明白了什麼是敏捷JavaScript開發。我喜歡敏捷和精益創業，誰要是想掌握快速開發Web應用的技術，就看這本書，沒錯。

關鍵是這本書內容全都是干貨，極為實用。看完這本書，把例子都做一遍，馬上就可以學以致用了。有這本書，你就不用再看一些講Backbone或Mongo的JS書啦。

來自實踐，用於實踐

這本書很適合喜歡跟著做的讀者，滿都是實用的建議和切合實際的示例。如果你打算自己一個人搞定前後端，而且哪兒哪兒都做好，那就請看這本書。

涵蓋前後端的幾乎所有技術

看這本書，跟著做例子，非常有意思！這本書不光給你講解，還給你演示，告訴你那麼多技術各有什麼用，怎麼用。這些技術在所有項目中都是會用到的。

多虧了這本書，Sidepon.com盈利了

沒有這本書，我們Sidepon.com的交互體驗就不會那麼好，也不會被TheNextWeb.com推上頭條，更不可能盈利。

在線試讀

第一章基礎知識
提要：綜述HTML、CSS和JavaScript語法；簡單介紹敏捷開發方法；雲計算、Node.js和MongoDB的好處；HTTP請求/響應，以及REST式API的思想。
我認為每個人都應該學會為計算機編程，這會教你如何去思考。計算機科學是自由的藝術，是所有人都應該學習的。
——史蒂夫喬布斯
1.1定義前端
1.1.1綜述
Web和移動應用開發過程一般包含以下步驟：
(1)用戶在瀏覽器（客戶端）裡輸入或者點擊一個鏈接；
(2)瀏覽器向服務器發送HTTP請求；
(3)服務器處理請求，如果查詢字符串或者請求體裡含有參數，服務器也會把這些參數信息考慮進去；
(4)服務器更新、獲取或者轉換數據庫裡的數據；
(5)服務器以HTML、JSON或者其他格式返回一個HTTP響應；
(6)瀏覽器接收HTTP響應；
(7)瀏覽器以HTML或者其他格式（比如JPEG、XML或者JSON）把HTTP響應呈現給用戶。
移動應用的行為動作與普通網站相同，隻不過原生應用取代了瀏覽器。其他主要區別為：帶寬帶來的數據傳輸限制、更小的屏幕、更高效地使用本地存儲。
這裡有幾種針對移動應用的開發方式，每種各有利弊：
用Objective-C和Java開發的原生iOS應用、Android應用和Blackberry應用；
使用JavaScript開發，但是使用Appcelerator或者類似的工具來編譯為原生的Objective-C或Java應用；
通過響應式設計、TwitterBootstrap和Foundation等CSS框架、常規CSS或其他模板來適配小屏幕的移動網站；第一章基礎知識

提要：綜述HTML、CSS和JavaScript語法；簡單介紹敏捷開發方法；雲計算、Node.js和MongoDB的好處；HTTP請求/響應，以及REST式API的思想。

我認為每個人都應該學會為計算機編程，這會教你如何去思考。計算機科學是自由的藝術，是所有人都應該學習的。

——史蒂夫喬布斯

1.1定義前端

1.1.1綜述

Web和移動應用開發過程一般包含以下步驟：

(1)用戶在瀏覽器（客戶端）裡輸入或者點擊一個鏈接；

(2)瀏覽器向服務器發送HTTP請求；

(3)服務器處理請求，如果查詢字符串或者請求體裡含有參數，服務器也會把這些參數信息考慮進去；

(4)服務器更新、獲取或者轉換數據庫裡的數據；

(5)服務器以HTML、JSON或者其他格式返回一個HTTP響應；

(6)瀏覽器接收HTTP響應；

(7)瀏覽器以HTML或者其他格式（比如JPEG、XML或者JSON）把HTTP響應呈現給用戶。

移動應用的行為動作與普通網站相同，隻不過原生應用取代了瀏覽器。其他主要區別為：帶寬帶來的數據傳輸限制、更小的屏幕、更高效地使用本地存儲。

這裡有幾種針對移動應用的開發方式，每種各有利弊：

用Objective-C和Java開發的原生iOS應用、Android應用和Blackberry應用；

使用JavaScript開發，但是使用Appcelerator或者類似的工具來編譯為原生的Objective-C或Java應用；

通過響應式設計、TwitterBootstrap和Foundation等CSS框架、常規CSS或其他模板來適配小屏幕的移動網站；

使用SenchaTouch、Trigger.io、JO構建包含HTML、CSS、JavaScript的HTML5應用，然後使用PhoneGap包裝成原生應用。

1.1.2HTML

HTML本質上不是編程語言，而是一組用來描述內容結構和格式的標記。HTML標簽由一對尖括號以及括號內的標簽名組成。大多數情況下，內容會包含在一對開始標簽和結束標簽之間，結束標簽的標簽名前有一個斜杠（/）。

下面的例子裡，每一行都是一個H素：

OverviewofHTML

HTMLisa...

HTML文檔會有一個html標簽，所素都是html標簽的子標簽：

OverviewofHTML

HTMLisa...

HTML有不同的版本，比如DHTML、XHTML1.0、XHTML1.1、XHTML2、HTML4和HTML5。這篇文章對它們的區別做了很好的詮釋：MisunderstandingMarkup:XHTML2/HTML5ComicStrip。

所有的H素都具備一些屬性。重要的屬性如下：class、id、style、data-name、onclick以及其他事件屬性。

class

class屬性定義了一個類，以便於使用C素添加樣式或者進行DOM操作，比如：

...

id

id屬性素的ID，作用有點像class，但是必須是唯一的，比如：

...

style

style屬性定義素的內聯CSS，比如：

...

title

title素指定了一些額外信息，在大多數瀏覽器裡這些信息均是以小提示條的形式呈現的。比如：

...

data-name

data-name屬性可以用來在DOM中存數據。比如：

...

onclick

onclick屬性意味著在點擊事件發生時，內聯的JavaScript代碼將運行，比如：

...

onmouseover

和onclick屬性類似，但它由鼠標懸停事件觸發，比如：

...

其他與內聯JavaScript代碼相關的HTML屬性如下。

onfocus：當瀏覽器的焦點聚集素上時觸發。

onblur：當瀏覽器的焦點離素時觸發。

onkeydown：用戶按下鍵盤上的鍵時觸發。

ondblclick：用戶雙擊鼠標時觸發。

onmousedown：用戶按下鼠標時觸發。

onmouseup：用戶釋放鼠標時觸發。

onmouseout：用戶將鼠素區域時觸發。

oncontextmenu：用戶點擊鼠標右鍵時觸發。

完整的事件列表和瀏覽器兼容性表格請參見“Eventcompatibilitytables”。

我們將會廣泛使用TwitterBootstrap裡的類，而由於內聯CSS和JavaScript不是好方案，我們會盡量避免內聯。不管怎樣，了解一下JavaScript事件名總不會錯，因為在jQuery、Backbone.js和純JavaScript中我們常常會用到它們。把內聯的屬性轉換為JS事件，隻需要把on前綴去掉就行了，比如onclick屬性就是指click事件。

你還可以從以下三個網站看到更多相關資料：Catchingamouseclick、Wikipedia和w3schools。

1.1.3CSS

CSS是一種控制內容呈現和格式的方式。HTML文檔可以通過一個link標簽引入外部的CSS文件（如前面的例子所示），也可以直接通過style標簽內聯CSS代碼，比如：

每個H素都可以擁有id和/或class屬性：

Loremipsumdolorsitamet,

Duissitametnequeeu.

在CSS裡，我們可素的id、class、標簽名，以及它與父級標簽的關素屬性值素。

下面的規則把所有的段落（p標簽）的顏色變成了灰色（#999999）：

p{

color:#999999;

}

下面的規則通過idmain定位了一個div，並且設置了它的內邊距：

div#main{

padding-bottom:2em;

padding-top:3em;

}

下面的規則把所有擁有類lar素字體大小設置為14pt：

.large{

font-size:18px;font-old:14pt;

}

div是b素的素；現在要隱藏下標簽div：

body>div{

display:none;

}

設置name屬性為email的in素的寬度為150px：

input[name="email"]{

width:150px;

}

更多信息可以參考Wikipedia和w3schools。

CSS3是CSS的一個升級版，它可以直接用CSS實現圓角、邊框和漸變，而CSS如果想運用這些功能，隻能依靠PNG/GIF的幫助或者使用其他一些小技巧纔能實現。

更多信息可以參考CSS3.info、w3school，以及對比CSS3和CSS的文章“CSS3vs.CSS:ASpeedBenchmark”。

1.1.4JavaScript

JavaScript是1995年在Netscape以LiveScript開始的。它和Java的關繫就像雷鋒與雷峰塔的關繫一樣，兩者風馬牛不相及。現在，JavaScript在Web開發的前後端都有使用，在桌面應用開發中也占有一席之地。

把JS代碼放進HTML文檔的script標簽裡是使用JavaScript的最簡單方式：

我們建議你不要把HTML與JS代碼混在一起，為了把它們分離開，可以把代碼移到一個外部文件中，然後再通過設置script標簽的源屬性src="filename.js"來引入外部的js文件，這裡我們用src="app.js"：

注意

結束標簽必須存在，即使像我們這樣引入外部文件後它是一個沒有內容的標簽。經過多年的發展，JavaScript已經成為了瀏覽器腳本裡的絕對主導者，而Type和language已經不是必須存在的了。

其他運行JavaScript代碼的方式：

內聯的代碼（之前已經講述過）；

使用Webkit的瀏覽器開發者工具和FireBug控制臺；

Node.js的交互命令行。

JavaScript的一個優點就是它是弱類型的。弱類型是相對於強類型語言（如C和Java）而言的，這使JavaScript成為了一個更好的原型語言。下面是JavaScript對像/類（本身沒有類；對像繼承自對像）裡一些主要的類型：

數值原始值

數值，比如：

varnum=1;

數值對像

數值對像和它的方法，比如：

varnumObj=newNumber("123");//數值對像

varnum=numObj.valueOf();//數值原始值

varnumStr=numObj.toString();//字符串表示

字符串原始值

包含在單引號或者雙引號之間的字符序列，比如：

varstr="somestring";

varnewStr="abcde".substr(1,2);

為了方便，JS自動給字符串原始值包裝上字符串對像方法，但是它們並不完全相同的。

字符串對像

字符串對像有很多非常有用的方法，比如length、match，來看個例子：

varstrObj=newString("abcde");//字符串對像

varstr=strObj.valueOf();//字符串原始值

strObj.match(/ab/);

str.match(/ab/);//兩種調用都可行

正則表達式對像

正則表達式對像是特殊的字符模式，以方便搜索、替換以及測試字符串：

varpattern=/[A-Z]+/;

str.match(/ab/);

特殊類型

當你有疑問的時候，可以使用typeof對像來看看它的類別。下面是JS裡的一些特殊類型：

NaN

null

undefined

function

全局方法

你可以在代碼的任意地方調用這些方法，因為它們是全局方法：

decodeURI

decodeURIComponent

encodeURI

encodeURIComponent

eval

isFinite

isNaN

parseFloat

parseInt

uneval

Infinity

Intl

JSON

JSON庫幫助我們序列化和解析JavaScript對像，比如：

varobj=JSON.parse('{a:1,b:"hi"}');

varstringObj=JSON.stringify({a:1,b:"hi"});

數組對像

數組是從0開始索引的列表。例如，創建一個數組：

vararr=newArray();

vararr=["apple","orange",'kiwi"];

數組有一些非常好用的方法，比如indexOf、slice、join。你要確保自己對它們非常熟悉，因為如果能夠正確使用，它們將幫你很多時間。

數據對像

varobj={name:"Gala",url:"img/gala100x100.jpg",price:129}

或

varobj=newObject();

下面是一些繼承模式。

布爾原始值和對像

就像字符串和數值，布爾值既可以是原始值，也可以是對像。

varbool1=true;

varbool2=false;

varboolObj=newBoolean(false);

日期對像

日期對像幫助我們處理日期和時間，比如：

vartimestamp=Date.now();//1368407802561

vard=newDate();//SunMay12201318:17:11GMT-0700(PDT)

數學對像

數學常量和一些方法，比如：

varx=Math.floor(3.4890);

varran=Math.round(Math.random()*100);

瀏覽器對像

用於訪問瀏覽器及其一些屬性，比如URL，來看個例子：

window.lo

……

商品搜索

商品分类

【醫學】

【各大出版社】