dojox.app:單頁面應用程式框架

本文翻譯自：http://www.sitepen.com/blog/2011/09/30/dojox-app-a-single-page-application-framework/
原文作者：Colin Snover
譯者：Oliver

dojox.app是一個小型的應用程式框架，它提供了一組類，用於管理部署在行動裝置或案頭系統上的單頁面應用的生命週期和行為。其主類Application用來管理應用的生命週期，並且能夠方便地對其進行修改，擴充出額外的自訂功能。一個Application執行個體包含一些Scene對象和View對象，這些對象提供了可視的使用者介面。所有的視圖、情境、相依模組、以及一些其他關於應用的資訊都是預設通過一個JSON設定檔傳給Application類的。

config.json

這個主設定檔定義了所有的模組依賴、應用行為、頂級視圖和情境、以及其他所有對應用的正確運行至關重要的資訊。
樣本配置：

{    /* 全域應用依賴 */    "dependencies": [        "dojox/mobile/Heading",        "dojo/mobile/RoundRect",        "my/custom/module"    ],     /* 應用模組，將被隱式加到前面列出的相依模組上 */    "modules": [        "dojox/app/module/history",        "my/custom/appModule"    ],     /* 應用自身的html模板 */    "template": "example.html",     /* 預設載入的視圖 */    "defaultView": "home",     /* 預設使用的視覺轉換效果 */    "defaultTransition": "slide",     /* 視圖與情境 */    "views": {         /* home是一個頂層的dojox.app.view */        "home": {             /* 用於執行個體化該視圖的類 */            "type": "dojox.app.view",             /* 僅用於該視圖的相依模組 */            "dependencies": [                "dojox/mobile/ListItem",                "dojox/mobile/EdgeToEdgeCategory"            ],             /* 該視圖採用的模板 */            "template": "views/home.html"        },         /* tabscene是一個包含三個子視圖的dojox.app.scene */        "tabscene": {            /* 用於執行個體化該情境的類 */            "type": "dojox.app.scene",             /* 該情境的模板 */            "template": "tabScene.html",             /* 該情境的預設視圖 */            "defaultView": "tab1",             /* 在標籤頁之間轉換時預設使用“翻轉”動畫效果 */            "defaultTransition": "flip",             /* 用於該情境的視圖 */            "views": {                "tab1":{                    "template": "views/tabs/tab1.html"                },                "tab2":{                    "template": "views/tabs/tab2.html"                },                "tab3":{                    "template": "views/tabs/tab3.html"                }            },             /* 特定於該情境的相依模組 */            "dependencies": [                "dojox/mobile/RoundRectList",                "dojox/mobile/ListItem",                "dojox/mobile/EdgeToEdgeCategory"            ]        }    }}

配置屬性描述：

dependencies	當其作為設定檔的頂層屬性出現時，這個屬性定義了整個應用所需要的模組。當其作為某個情境或視圖的屬性出現時，則定義了哪些模組必須在該視圖/情境執行個體化之前載入。
modules	這個屬性聲明了哪些模組需要混入Application類來控制應用的生命週期。換句話說，每一個特定應用的Application類都是在運行時在基類Application的基礎上加上這些模組動態建立出來的。
template	當其作為配置的頂層屬性出現時，定義了整個應用的布局模板。當作為視圖或情境的屬性出現時，則表示該視圖或情境的模板。
defaultView	這個屬性定義了應用預設載入的視圖。
defaultTransition	當作為設定檔的頂級屬性出現時，該屬性定義了頂層視圖/情境所使用的預設視覺轉換方法。當定義在一個情境裡時，僅代表該情境的預設視覺轉換方法。
views	這個views屬性是一組嵌套的對象，定義了本應用或情境中的所有的視圖和情境。這些內容將在後面詳細介紹。

還有一些額外的屬性，例如models, stores, id, name以及description，它們在將來可能會被用到，其具體的定義和用途還在開發中。
Application類

Application類本身是一個抽象類別，因此從不被直接使用。它是從Scene類(詳見下文)簡單擴充出來的子類。dojox.app提供了一個Factory 方法，以設定物件為參數，建立並自動啟動整個Application執行個體。
其用法如下：

require(["dojo/json", "dojox/app", "dojo/text!./config.json"],function(json, makeApplication, config){    makeApplication(json.parse(config));});

Scene類

Scene類為視圖提供了一個模板化的容器。它的目的是為了能通過HTML模板來定義情境的布局，以及在情境切換時用到的一組子視圖。例如，要顯示一組標籤頁，你需要在一個Scene中為每一個標籤配置一個子View。情境的模板將定義在哪裡顯示這個標籤頁控制項和這些視圖。

在內部實現上，Scene借用了dijit.layout和dijit._Templeted的一些概念。Scene類的預設範本非常簡單，甚至都不能稱其為一個模板——它只是簡單地輸出當前視圖中的任意內容。情境模板中的元素可以用region屬性定義在哪裡顯示，類似於dijit.layout.BorderContainer。例如，要實現一個標籤頁情境的模板可能像這樣（使用dojox.mobile中的組件）：

<div style="background:#c5ccd3;" class="view mblView">    <div region="top" dojoType="dojox.mobile.Heading">        Tab Scene    </div>    <ul region="top" dojoType="dojox.mobile.TabBar"        barType="segmentedControl">        <li dojoType="dojox.mobile.TabBarButton"            icon1="images/tab-icon-16.png"            icon2="images/tab-icon-16h.png"            transitionOptions='{title:"TabScene-Tab1",                target:"tabscene,tab1",                url: "#tabscene,tab1"}' selected="true">Tab 1</li>        <li dojoType="dojox.mobile.TabBarButton"            icon1="images/tab-icon-15.png"            icon2="images/tab-icon-15h.png"            transitionOptions='{title:"TabScene-Tab2",                target:"tabscene,tab2",                url: "#tabscene,tab2"}'>Tab 2</li>        <li dojoType="dojox.mobile.TabBarButton"            icon1="images/tab-icon-10.png"            icon2="images/tab-icon-10h.png"            transitionOptions='{title:"TabScene-Tab3",                target:"tabscene,tab3",                url: "#tabscene,tab3"}'>Tab 3</li>    </ul></div>

上面這個模板定義了兩個region="top"的地區：一個頭元素以及一個標籤按鈕列表。它們將在渲染時放置在情境的頂部。

通常在使用BorderContainer時還需要指定一個region="center"的地區。對於Scene來說，這個“中央”地區會被自動指定為當前活動的視圖（例如當前標籤頁）。

除了支援情境的生命週期以及渲染過程的代碼外，Scene還提供了控制子視圖相互之間切換的變換方法。情境既可以包含視圖，也可以包含其他情境。
View類

與情境類似，視圖也是內容的容器。然而，視圖只含有其模板內定義的內容，而不能包含其他子視圖。它與情境的區別是，一個View執行個體無法包含其他情境或視圖。
小結

這三個類的設計都力求簡單，只提供必要的結構和生命週期（雖然還有一些額外的核心方法和生命週期控制代碼會很快加上）。開發人員使用dojox.app架構可以通過繼承這些基類來自訂視圖和情境（或者實現等價的功能），並且在應用的設定檔中定義它們。
TODO

dojox.app是一個實驗性的架構，其中還有一些關鍵組件尚在開發過程中。它的發行版預期將在Dojo2.0之前到來。目前正在開發的項目如下：

Model / Store支援	我們有幾個Model/Store支援的實現，包括一個用於dojox.mvc的實現。然而，要為這些組件提供大家一致認可的API還有更多的工作要做。雖然MVC系統將會最先被支援，但它不會是必要組件，因為應用開發人員可以僅通過擴充View類來很好地控制視圖的HTML。
案頭 / 行動裝置分支	dojox.app是平台無關的。但在設定檔中可以使用CSS媒體選擇符和屬性定義，從而支援根據使用者的瀏覽器環境選擇視圖和參數。
智能打包系統支援	出於效能考慮，特別是在移動平台上，一個合適的應用打包系統是十分必要的。為此，我們沒有為每一個應用採用單獨的打包設定檔，而是用一個封裝器工具直接基於設定檔智能地產生應用程式套件。