使用backbone.js、zepto.js和trigger.io開發HTML5 App

標籤：android   style   blog   http   color   io   os   使用   java   

為了力求運行速度快、響應迅即，我們推薦使用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.jsBackbone.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偵錯模式）。盡情享受吧！就是這樣你可以隨意處理原始碼。我們希望一切都很清楚。

 

使用backbone.js、zepto.js和trigger.io開發HTML5 App