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文件的引用，代码片段如下所示：

<!—对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="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;

}

以上介绍的是项模板文件的初始内容和作用，接下来介绍如何向文件中添加控件。