Adobe Creative Cloud

您可以免費(fèi)注冊(cè)Adobe創(chuàng)意云服務(wù)。Creative Cloud上還提供了諸多HTML5開發(fā)工具，包括可以免費(fèi)下載HTML5動(dòng)畫制作工具Edge Animate，開發(fā)工具Edge Code，移動(dòng)應(yīng)用測(cè)試工具Edge Inspect等。
    Creative Cloud的登錄地址在此：http://t.cn/zTbTLKT 

構(gòu)建重要 Web 應(yīng)用程序所面臨的其中一個(gè)挑戰(zhàn)是，JavaScript 的不定向特性首先可能導(dǎo)致代碼結(jié)構(gòu)缺失，或者換句話說就是缺乏……主干。JavaScript 通常被寫成一連串自由懸掛的無關(guān)代碼塊，要不了多久人們將很難理解自身代碼的邏輯和結(jié)構(gòu)。

Backbone.js 是一個(gè)輕量級(jí)框架，它通過向具有大量 JavaScript 的 Web 應(yīng)用程序添加框架有效解決了這一問題。

獨(dú)立構(gòu)建基塊

Backbone.js 提供了若干類（模型、集合、視圖及路由器），您可以借此擴(kuò)展定義自己的應(yīng)用程序構(gòu)建基塊。要使用 Backbone.js 構(gòu)建應(yīng)用程序，請(qǐng)首先創(chuàng)建應(yīng)用程序的模型、集合和視圖。然后定義通過一組（深層鏈接）URL 提供應(yīng)用程序入口點(diǎn)的“路由器”來激活這些組件。

您可以借助 Backbone.js 組織獨(dú)立實(shí)體（模型、集合和視圖）的代碼，簡單來說，獨(dú)立實(shí)體是指不再含有自由懸掛的無關(guān)代碼塊。

數(shù)據(jù)綁定

您可以借助 Backbone.js 將視圖綁定至模型，這樣，當(dāng)某個(gè)模型的數(shù)據(jù)發(fā)生更改時(shí)，綁定至該模型的所有視圖均將自動(dòng)重新呈現(xiàn)。不再需要復(fù)雜的 UI 同步代碼。

巧妙的 REST 集成

Backbone.js 還能夠自然、神奇而又巧妙地與 RESTful 服務(wù)集成。如果您純粹通過 RESTful API 公開后端數(shù)據(jù)，則使用 Backbone.js 的簡單模型 API 執(zhí)行檢索 (GET)、創(chuàng)建 (POST)、更新 (PUT) 及刪除 (DELETE) 模型操作將變得非常簡單。

關(guān)于 Wine Cellar 示例應(yīng)用程序

本教程分為三個(gè)部分，我們將在此教程中創(chuàng)建 Wine Cellar 應(yīng)用程序，從而讓用戶瀏覽葡萄酒列表，并添加、更新和刪除葡萄酒。

（1）在本文“Backbone.js Wine Cellar 教程 — ***部分：入門”中，您將會(huì)定義基本結(jié)構(gòu)。您將為該應(yīng)用程序創(chuàng)建一個(gè)“只讀”版本。這樣就能檢索葡萄酒列表并獲取每種葡萄酒的詳細(xì)信息。

（2）在 Backbone.js Wine Cellar 教程 — 第二部分：CRUD 教程 — 第二部分：CRUD 中，您將會(huì)添加代碼功能以添加、更新及刪除葡萄酒。您可以利用 Backbone 的強(qiáng)大 REST 集成功能。

（3）在 Backbone.js Wine Cellar 教程 — 第三部分：深層鏈接和應(yīng)用程序狀態(tài)中，您將增加全面的歷史記錄管理和深層鏈接支持。

圖 1. Wine Cellar 應(yīng)用程序

只讀 Wine Cellar 應(yīng)用程序代碼演練

要查看***部分的工作版本（應(yīng)用程序只讀版本），請(qǐng)單擊此處。

backbone.js 的代碼如下所示。我建議您從我的源代碼管理網(wǎng)站下載代碼以進(jìn)行深入了解。此應(yīng)用程序的鏈接位于本教程的要求部分。

圖 2. backbone.js 代碼。

代碼重點(diǎn)：

1.WineModel（第 2 行）：請(qǐng)注意，該代碼沒有明確定義屬性（名稱、國家/地區(qū)、年份等）。您可以添加驗(yàn)證、默認(rèn)值，以此類推。在第二部分：CRUD 中了解更多信息。

2.WineCollection（第 4 行至第 7 行）：“模型”表示集合的性質(zhì)。“url”提供 RESTFul API 的終端。這就是需要使用 Backbone 的簡單模型 API 檢索、創(chuàng)建、更新及刪除葡萄酒所需的全部組件。

3.WineListView（第 10 行至第 25 行）：render() 函數(shù)循環(huán)訪問集合，實(shí)例化集合中的每種葡萄酒的 WineListItemView，并將其添加至 wineList。

4.WineListItemView（第 27 行至第 38 行）：render() 函數(shù)將模型數(shù)據(jù)合并至 wine-list-item 模板（在 index.html 中進(jìn)行定義）。通過定義單獨(dú)的列表項(xiàng)視圖，您將能夠在支持模型發(fā)生更改時(shí)輕松更新特定的列表項(xiàng)，而無需重新呈現(xiàn)整個(gè)列表。請(qǐng)?jiān)?a target="_blank" >第二部分：CRUD 中查看有關(guān)該內(nèi)容的更多信息。

5.WineView（第 40 行至第 49 行）：該視圖用于顯示葡萄酒表單中的葡萄酒詳細(xì)信息。render() 函數(shù)將模型數(shù)據(jù)（某款特定的葡萄酒）合并至從 index.html 檢索而來的 wine-details 模板。

6.AppRouter（第 52 行至第 71 行）：此代碼通過一組（深層鏈接）URL 為應(yīng)用程序提供入口點(diǎn)。定義了以下兩個(gè)路由：默認(rèn)路由 (“”) 顯示葡萄酒列表。“wines/:id”路由顯示葡萄酒表單中的某款特定葡萄酒的詳細(xì)信息。請(qǐng)注意，在***部分中，此路由不可進(jìn)行深層鏈接。您必須使用默認(rèn)路由啟動(dòng)該應(yīng)用程序，然后選擇某款特定的葡萄酒。在第三部分：深層鏈接和應(yīng)用程序狀態(tài)中，確保您能夠深層鏈接至特定的葡萄酒。

進(jìn)一步學(xué)習(xí)

接下來，請(qǐng)閱讀第二部分：CRUD，這樣您就能夠了解如何向此應(yīng)用程序添加更多功能。