Win10系列：JavaScript 項目模闆中的檔案和項模闆檔案

通過上面内容的學習，相信讀者已經對各種項目模闆和項模闆有了大緻的了解，本節将進一步介紹項目模闆中預設包含的項目檔案以及項模闆檔案，首先講解這些檔案中的初始内容以及作用，然後介紹在一個頁面中如何添加控件，以及如何為控件注冊事件處理函數并設計CSS樣式。

1.項目模闆中的預設檔案

在每一個使用項目模闆建立的JavaScript的Windows應用商店項目中，都會包含default.html、default.js和default.css三個檔案。與其他幾種項目模闆相比，空白項目模闆中的這三個檔案僅包含基礎的結構，沒有具體的功能實作，下面以空白項目模闆為例，分别介紹default.html、default.js和default.css三個檔案。

（1）default.html檔案

default.html檔案是應用程式的預設啟動頁，可以直接在其中添加控件，在具有多個頁面的應用程式中，可以将這個頁面作為基礎頁然後在其中加載其他頁面的内容。預設情況下，在default.html檔案内容的head元素内包含對WinJS庫檔案、樣式檔案和JavaScript檔案的引用。代碼片段如下所示：

<!—對WinJS庫的引用 -->

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

<script src="//Microsoft.WinJS.1.0/js/base.js"></script>

<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!—對樣式檔案和背景JavaScript代碼檔案的引用 -->

<link href="/css/default.css" rel="stylesheet" />

<script src="/js/default.js"></script>

在上面的代碼中，首先引用了WinJS庫中的ui-dark.css、base.js和ui.js三個檔案，ui-dark.css是JavaScript主題風格庫，用于設計前台界面的主題風格；base.js檔案提供了支援程式運作的基礎類庫，在基礎類庫中包含了處理程式激活、挂起、異常等行為的函數，ui.js是WinJS控件庫，包含了一些Windows應用商店應用的前台界面常用的控件和控件樣式。接着引用了default.css和default.js檔案，default.css檔案用于為預設啟動頁面和整體應用程式設計CSS樣式，default.js檔案用于實作預設啟動頁的邏輯功能和處理應用程式的生命周期事件。

    （2）default.js檔案

正如上面所提到的，default.js檔案用于實作預設啟動頁的邏輯功能，并處理應用程式的激活、挂起事件。預設情況下，default.js檔案的内容中包含一個匿名函數，在這個匿名函數中定義了應用程式激活、挂起兩個事件的事件處理函數，還調用了WinJS.Application.start函數。當WinJS.Application.start函數執行時應用程式開始運作。

下面首先介紹應用程式激活事件的處理函數，相應的JavaScript代碼片段如下所示：

app.onactivated = function (args) {

if (args.detail.kind === activation.ActivationKind.launch) {

if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

//此應用程式剛剛啟動。

} else {

//此應用程式從挂起狀态重新激活

}

args.setPromise(WinJS.UI.processAll());

};

在上面的代碼中，onactivated是激活事件的名稱。在激活事件處理函數中，首先根據參數args獲得目前應用程式的激活類型，判斷目前應用程式是否因使用者啟動而激活，如果是，則繼續判斷應用程式是剛剛運作還是在挂起後重新激活的，讀者可以根據激活方式進行相關的邏輯處理，這裡隻給出了注釋并沒有給出具體的實作代碼。接下來調用WinJS.UI.processAll函數初始化WinJS庫控件，為了防止UI線程的堵塞，這裡使用setPromise函數異步執行初始化控件的過程。

接下來介紹應用程式挂起事件的事件處理函數，代碼片段如下所示：

app.oncheckpoint = function (args) {

在上面的代碼中，oncheckpoint是挂起事件的名稱。預設情況下挂起事件處理函數中沒有具體的功能實作，開發者可以向其中添加代碼定義應用程式挂起時的行為。

在default.js檔案的最後，調用了WinJS.Application.start函數，調用這個函數後應用程式将開始運作。

（3）default.css檔案

default.css檔案預設分為兩個部分，第一部分包含一個body标記，可以在body标記下添加代碼設計default.html頁面中body元素的樣式，第二部分包含四條語句，分别用于設計應用程式在橫屏、填充視圖、輔屏視圖、和豎屏狀态下顯示的樣式。由于四條語句結構相同，下面就僅介紹第一條語句的作用。第一條語句如下所示：

@media screen and (-ms-view-state: fullscreen-landscape) {

在上面的代碼中，@media後面是一種裝置的名稱，表示接下來将設計使用某種裝置時的樣式。 @media screen表示設計的是使用顯示器時的樣式，and後面小括号内的内容是一個條件判斷，判斷應用程式目前的視圖狀态是否為橫屏，如果是，就采用大括号内的樣式。上面語句中的大括号内還未添加具體樣式代碼，開發者可以根據需要在其中設計樣式。

2.使用項模闆建立的檔案

上面的内容介紹了項目模闆中的預設檔案，下面将開始介紹Visual Studio 2012提供的項模闆，這些項模闆包含一些基本的代碼，開發者可以直接在這些代碼的基礎上設計應用程式的功能。在常用的項模闆中，其中有一些項模闆的内容讀者可能會比較熟悉，比如"HTML頁"項模闆、"JavaScript檔案"項模闆和"樣式表"項模闆，是以這裡将不對這些項模闆做過多說明，下面将以"頁面控制"項模闆為示例來講解模闆中預設包含的内容。

使用"頁面控制"項模闆建立檔案時，會自動添加三個檔案，預設名稱分别為pagecontrol.html、pagecontrol.js和pagecontrol.css，下面分别介紹這三個檔案的内容以及作用。

（1）pagecontrol.html

pagecontrol.html檔案包含一個HTML頁面的基本結構，在head元素内包含對WinJS庫檔案、pagecontrol.css和pagecontrol.js檔案的引用，代碼片段如下所示：

<!—對樣式檔案和背景JavaScript代碼檔案的引用-->

<link href="pagecontrol.css" rel="stylesheet" />

<script src="pagecontrol.js"></script>

在上面的代碼中，首先引用了三個WinJS庫檔案，在pagecontrol.html檔案中引用這三個檔案的作用與default.html頁面中相同，這裡不再重複介紹。接着引用了pagecontrol.css和pagecontrol.js檔案，pagecontrol.css檔案用于設計pagecontrol.html頁面的樣式，pagecontrol.js用于實作pagecontrol.html頁面的邏輯功能。

在body元素中包含一個div元素，這個div元素的内容分為頁面的标題部分和主要内容部分，header元素用于定義頁面的标題，section元素則用于設計頁面的主要内容。代碼片段如下所示：

<div class="pagecontrol fragment">

//頁面标題部分

<header aria-label="Header content" role="banner">

<button class="win-backbutton" aria-label="Back" disabled></button>

<h1 class="titlearea win-type-ellipsis">

<span class="pagetitle">Welcome to pagecontrol</span>

</h1>

</header>

//頁面主要内容部分

<section aria-label="Main content" role="main">

<p>Content goes here.</p>

</section>

</div>

在上面的代碼中，标題部分包含一個按鈕和一個h1元素，按鈕使用了WinJS庫中的win-backbutton樣式進而使自身形狀變為一個向左的箭頭，還設定了disabled屬性更改自身狀态為不可見；h1元素則用于顯示頁面的标題。主要内容部分包含一個p元素，用于顯示一段文本。

（2）pagecontrol.js

pagecontrol.js檔案用于實作pagecontrol.html頁面的邏輯功能，預設情況下，pagecontrol.js檔案的代碼包含在一個匿名函數内，在匿名函數内調用了WinJS.UI.Pages.define函數，用于定義一個PageControl控件，代碼片段如下所示：

(function () {

"use strict";

WinJS.UI.Pages.define("/pagecontrol/pagecontrol.html", {

ready: function (element, options) {

},

unload: function () {

updateLayout: function (element, viewState, lastViewState) {

});

})();

在上面的代碼中，"use strict"表示目前為嚴格程式設計模式，WinJS.UI.Pages.define函數的第一個參數是pagecontrol.html頁面的位址。第二個參數是一個對象，這個對象中定義了三個函數，分别為ready、unload和updateLayout。其中ready函數主要用于初始化PageControl控件，unload函數在導航出pagecontrol.html頁面時執行，當pagecontrol頁的顯示界面發生改變時，将調用updateLayout函數。

（3）pagecontrol.css

在pagecontrol.css檔案中定義了pagecontrol.html頁面的CSS樣式，預設内容是設定p元素的顯示位置，其中p元素包含在一個類名為pagecontrol的元素中，代碼片段如下所示：

.pagecontrol p {

margin-left: 120px;

以上介紹的是項模闆檔案的初始内容和作用，接下來介紹如何向檔案中添加控件。