來源：http://mobile.51cto.com/web-343388.htm

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

為了力求運行速度快、響應迅即，我們推薦使用backbone.js和zepto.js。

為了讓這個過程更有意思，我們開發了一個小小的示例項目，使用CSS重置樣式、Backbone.js和帶轉場效果的幾個頁面。我們的項目會顯示Trigger推特更新內容和單個的推特消息。與往常一樣，我們將使用同一個HTML5代碼庫創建安卓和iOS應用程序。在這個過程中，我們將介紹如何：

• 把你的JavaScript文件添加到應用程序中
• 使用Backbone.js來顯示響應迅即的界面
• 使用CSS重置樣式，減少跨平臺出現的不一致性
• 在應用程序中的視圖之間實現示例轉場效果

你可以在此基礎上隨意開發自己的項目——這是開發新項目的良好基礎！代碼放在github上，詳見：https://github.com/trigger-corp/Forge-Bootstrap。

添加的文件

• Backbone.js，負責處理歷史記錄、用戶操作以及為整個JavaScript框定結構
• HTML5Boilerplate，旨在減少不同平臺上不一致的渲染默認值帶來的影響
• Zepto，這個面向移動設備的輕型框架是jQuery的替代方案，可用于DOM（文檔對象模型）處理。

開始上手

想處理應用程序中的JavaScripts和CSS，只要把它們添加到你的index.html中，就像你在普通網站中進行操作那樣：

<link?rel="stylesheet"?href="css/reset.css">?

<link?rel="stylesheet"?href="css/demo.css">?

<script?type="text/javascript"?src="js/lib/zepto.min.js"></script>?

<script?type="text/javascript"?src="js/lib/underscore-min.js"></script>?

<script?type="text/javascript"?src="js/lib/backbone-min.js"></script>?

<script?type="text/javascript"?src="js/demo.js"></script>?

里，我們只使用了HTML5樣板重置樣式（reset.css）、JavaScript庫和我們自己的兩個文件：demo.css和demo.js。

使用Backbone時，你的入口點應該設置好應用程序正常運行所需要的各方面，然后開始運行Backbone的歷史系統。

比如說，在該項目中，我們使用$(Demo.init)，在應用程序啟動時運行下列函數，只運行一次：

//?應用程序啟動時，只調用一次?

init:?function?()?{?

????//?獲取Trigger推特更新內容?

????forge.request.ajax({?

????????url:?"https://twitter.com/statuses/user_timeline/14972793.json",?

????????dataType:?"json",?

????????success:?showIndex?

????});?

//?一旦我們有了Trigger推特更新內容，就調用?

????function?showIndex(data)?{?

????????//?把初始數據保存起來?

????????Demo.items?=?new?Demo.Collections.Items(data);?

????????//?建立Backbone?

????????Demo.router?=?new?Demo.Router();?

????????Backbone.history.start();?

????}?

}?

這里，我們使用request.ajax函數來檢索我們的推特消息，并將數據存儲在一個集合中，然后開始運行Backbone。

使用Backbone.js

Backbone.history.start()啟動Backbone的window.onhashchange事件訂閱。當URL的某片段變化時，就使用routes.js中定義的路由：

routes:?{?

????""?:?"index",??????????//?入口點：沒有哈希分片或#?

????"item/:item_id":"item"??//?#item/id?

},?

路由將URL映射到函數。我們在這里定義了兩個路由：一個對應#index()，另一個對應#item/[item_id]。然后，將item_id作為一個參數傳遞到item()。路由負責為你整個應用程序安排好URL。

使用Backbone來管理Forge應用程序里面的視圖是個好辦法：我們不僅在歷史堆棧里面構建URL（比如說，這意味著“后退”按鈕在安卓平臺上可以按預期的方式工作），我們還能夠全面控制在應用程序中顯示的內容，又不必借助慢騰騰的頁面裝入機制。

不過，特別是在移動平臺上，你的用戶期望以某種動態轉場效果從一個視圖切換到下一個視圖；為此，你可以把Backbone視圖組織成頁面。

頁面視圖

該代碼片段顯示了我們如何在這個項目中實現頁面，當一個頁面變得活躍時，就使用動畫轉場效果。你還可以在此看到我們使用Zepto用于DOM處理。

Demo.Views.Page?=?Backbone.View.extend({?

????className:?"page",?

????initialize:?function?()?{?

????????this.render();?

????},?

????show:?function?()?{?

????????$('.page').css({"position":?"absolute"});?

????????var?direction_coefficient?=?this.options.back???1?:?-1;?

????????if?($('.page').length)?{?

????????????var?$old?=?$('.page').not(this.el);?

????????????//?這個解決辦法來之不易－?

????????????//?僅僅使用.css(property,?'')不管用！?

????????????$old.get(0).style["margin-left"]?=?""?

????????????$old.get(0).style["-webkit-transform"]?=?""?

????????????this.$el.appendTo('body').hide();?

????????????this.$el.show().css(?

????????????????{"margin-left":?320?*?direction_coefficient});?

????????????this.$el.anim(?

????????????????{translate3d:?-320?*?direction_coefficient?+'px,0,0'},?

????????????????0.3,?'linear');?

????????????$old.anim(?

????????????????{translate3d:?-320?*?direction_coefficient?+?'px,0,0'},?

????????????????0.3,?'linear',?function()?{?

????????????????????$old.remove();?

????????????????????$('.page').css({"position":?"static"});?

????????????});?

????????}?else?{?

????????????this.$el.appendTo('body').hide();?

????????????this.$el.show();?

????????}?

????????window.scrollTo(0,?0);?

????}?

});?

如果你希望，可以在你自己的視圖中實現這個頁面，并使用show()方法從一個頁面切換到另一個頁面。

比如說，在該項目中，我們為所有推特消息的初始視圖創建了一個頁面，并且當用戶選擇每一單個的推特消息時也為它創建一個頁面。

使用Forge API的其他部分

我們已經看到了使用forge.request.ajax來請求遠程服務器。該項目還充分利用了另外一些Forge API。

在expand_item()中，我們使用forge.tabs.open()，以一種跨平臺的方式打開外部頁面新標簽頁。open()的說明文檔在此。

最后，我們使用了click_or_tap()函數中的forge.is，以便我們能夠監聽移動設備上的輕觸事件（tap event），以及其他設備上的點擊事件（click event）。易于檢測平臺的說明文檔在此。

click_or_tap:?function(obj)?{?

//?至于對象屬性，為屬性添加“點擊”，并使用原始值?

????var?new_obj?=?{};?

????for(var?property?in?obj)?{?

????????if?(obj.hasOwnProperty(property))?{?

????????????if?(forge.is.mobile())?{?

????????????????new_obj["tap?"?+?property]?=?obj[property];?

????????????}?

????????????else?{?

????????????????new_obj["click?"?+?property]?=?obj[property];?

????????????}?

????????}?

????}?

????return?new_obj?

}?

這很重要，因為點擊事件的反應在移動設備上不如輕觸來得迅即。

構建和運行應用程序

為了自行構建和運行應用程序，請先取我們網站上注冊（https://trigger.io/）；如果你還沒有Trigger.io Forge框架，就安裝該框架，開始建立Forge環境（操作步驟詳見http://docs.trigger.io/en/v1.3/forge/index.html）。

然后，

• 為你的應用程序創建一個新的目錄，使用cd命令進入到該目錄，運行“forgecreate -n Demo”，在你的帳戶中創建Demo（演示）應用程序。

• 把教程代碼拷貝到src目錄中，覆蓋forge之前創建的樣板代碼。

• 運行forge build，構建應用程序的每個版本（這步操作第一次速度很慢——但隨后的構建過程快若閃電！）

• 運行forge run android或forge run ios，查看應用程序（你需要先安裝安卓模擬器或iPhone模擬器——欲知詳情，請參閱我們的說明文檔：http://docs.trigger.io/en/v1.3/android/getting-started.html）。

• 如果你連接上了安卓手機，forge run android會將該應用程序部署到你的手機上，進行測試（確保打開了USB調試模式）。

• 盡情享受吧！

就是這樣

你可以隨意處理源代碼。我們希望一切都很清楚。

轉載于:https://www.cnblogs.com/jiemao/archive/2012/08/17/2643498.html

總結

以上是生活随笔為你收集整理的[转载] 使用backbone.js、zepto.js和trigger.io开发HTML5 App的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。