Win10系列：JavaScript 的 WinJS库
WinJS 库是由 CSS 和 JavaScript 文件组成的。使用Visual Studio 2012新建一个JavaScript 的Windows应用商店的空白应用程序项目，在项目的引用管理器中会默认添加这个库，如图19-1所示：
图19-1 JavaScript 的 WinJS库
上图可以看出，WinJS库主要包含ui-dark.css、ui-light.css、base.js和ui.js四个文件。其中ui-dark.css和ui-light.css是JavaScript主题风格库，ui-dark.css表示昏暗风格，而ui-light.css表示明亮风格；base.js是WinJS的基础类库，包含了处理程序激活、挂起、异常等行为的函数；ui.js是WinJS控件库，包含了一些Windows 应用商店应用的前台界面常用的控件和控件样式。
新建项目的default.html页面会默认引用WinJS 库中的ui-dark.css、base.js 和ui.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>
2.
WinJS库中的命名空间
为了防止同名函数和变量发生冲突，同时也可以方便代码的管理，在WinJS库中也使用了命名空间的概念来规划库中的资源，这些命名空间封装了与Windows应用商店应用开发相关的对象和函数。通过相应的命名空间名称能对该空间里的对象和函数进行访问。接下来介绍WinJS库中几个主要的命名空间。
（1）WinJS.UI.Pages命名空间
WinJS.UI.Pages命名空间主要包含PageControl 控件和 define函数。其中PageControl 控件与其他的WinJS库控件有所不同，它是一种自定义控件，需要使用WinJS.UI.Pages命名空间下的define函数来定义PageControl控件。define函数有两个参数，一个是uri，另一个是members，uri为页面的地址，members是对这个页面中的成员进行的一些初始化操作，相关语法格式代码如下所示：
var pageControl = WinJS.UI.Pages.define(uri, members);
（2）WinJS.Binding 命名空间
WinJS.Binding 命名空间里面主要包含在数据与模板绑定时所使用的一些对象，如List对象和Template对象。List对象用于表示数据列表，通过WinJS.Binding.List函数可以新建一个List对象，该函数有一个数组类型的参数，表示初始化列表的数据集合，语法格式代码如下所示：
var JSlist = new WinJS.Binding.List(list);
例如先定义一个数据集合myData，然后使用WinJS.Binding.List函数创建一个itemsList数据列表，并用myData数据集合初始化该数据列表，相关代码如下所示：
//数据集合
var myData = [
{ title: "Banana", text: "Low-fat frozen yogurt", picture: "images/Banana.png" },
{ title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/Lemon.png" },
{ title: "Marvelous Mint", text: "Gelato", picture: "images/Mint.png" },
{ title: "Creamy Orange", text: "Sorbet", picture: "images/Orange.png" },
{ title: "Succulent Strawberry", text: "Sorbet", picture: "images/Strawberry.png" }
];
// 创建一个List对象
var itemsList = new WinJS.Binding.List(myData);
在上面的代码中，首先定义用于初始化列表的数据集合myData，myData是一个数组类型的对象，包含了五个数据对象，每个数据对象都有三个属性title、text和picture，其中title属性的值为数据对象的标题，text属性的值为对数据对象的描述，picture属性的值为数据对象中图片的地址。接着以myData为参数调用WinJS.Binding.List函数创建一个itemsList数据列表。
Template对象即Template控件，用于格式化显示数据内容。值得注意的是Template控件内部只能有一个根元素，向Template控件添加其他元素都要在这个根元素里添加。向页面中添加Template控件可以通过在body元素中定义一个div元素，并将div元素的data-win-control属性设置为"WinJS.Binding.Template"来完成。
下面演示向页面中添加一个Template控件，并在Template控件里添加用于显示图片的img元素和用于显示标题的h4元素，相应代码如下所示：
<body>
<div id="templatebinding" data-win-control="WinJS.Binding.Template">
<div>
<img src="data:images/Banana.png"/>
<h4>
Banana</h4>
</div>
</div>
</body>
在上面代码中，首先在页面的body元素里面定义一个div元素，并将div元素的data-win-control属性设置为"WinJS.Binding.Template"来向页面中添加Template控件。接下来向Template控件添加img和h4两个元素，由于Template控件内部只能有一个根元素，因此先为Template控件添加一个div元素作为根元素。然后向根元素添加img元素和h4元素，并设置img元素的src属性值为"images/Banana.png"，h4元素的显示内容为"Banana"。
另外WinJS.Binding 命名空间内还有一个processAll函数，该函数用来查找绑定目标元素的data-win-bind属性，通过此方法可以把数据源与绑定目标关联在一起。后面在介绍简单对象的数据绑定时会用到processAll函数。processAll函数中有两个参数，一个是rootElement，另一个是dataContext。其中rootElement为绑定目标，dataContext为绑定源，语法格式代码如下所示：
WinJS.Binding.processAll(rootElement, dataContext)；
（3）WinJS.UI命名空间
WinJS.UI命名空间提供一些常用的控件和初始化操作函数，例如DatePicker控件、ListView控件和AppBar控件等常用控件以及processAll函数，这里的processAll函数与上面介绍的processAll函数功能不同。接下来简单介绍下WinJS.UI 命名空间里面的主要控件和函数。
DatePicker控件用于选择一个date类型的值，如用户可以选择年份、月份、日期等信息。通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.DatePicker"可以向页面中添加DatePicker控件。相关代码如下所示：
<div data-win-control="WinJS.UI.DatePicker"></div>
ListView控件用于以列表或者网格的形式显示多条数据。可以通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.ListView"来向页面中添加ListView控件，还可以通过div元素的data-win-options属性设置ListView控件的属性和值，相关代码如下所示：
<div data-win-control="WinJS.UI.ListView" data-win-options="{ property : value}"></div>
AppBar控件用于定义一个显示操作命令的应用栏。可以通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.AppBar"来向页面中添加AppBar控件，相关代码如下所示：
<div data-win-control="WinJS.UI.AppBar"></div>
AppBarCommand控件是在AppBar控件中显示的一条命令。一般通过定义一个button元素，并将button元素的data-win-control属性设置为"WinJS.UI.AppBarCommand"来向AppBar控件中添加AppBarCommand命令控件，还可以通过button元素的data-win-options属性设置AppBarCommand控件的属性和值，相关代码如下所示：
<div data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ property : value}" ></button>
</div>
Rating控件用于方便地进行评级。该控件有个averageRating属性，使用这个属性开发者可以获取或者设置平均评级。通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.Rating"来向页面中添加Rating控件，相关代码如下所示：
<div data-win-control="WinJS.UI.Rating"></div>
HtmlControl控件用于加载一个HTML页面。可以通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.HtmlControl"来向页面中添加HtmlControl控件，还可以使用div元素的data-win-options属性把HtmlControl控件的uri属性设置成所要加载的页面地址，相关代码如下所示：
<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/pages/HtmlControlPage.html'}" ></div>
processAll函数用于初始化页面中WinJS库控件。基于空白项目模板新建的应用程序项目中，default.js文件中默认调用了WinJS.UI.processAll 函数，相关代码如下所示：
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
// 此应用程序刚刚启动。在此处初始化应用程序。
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
}
//此应用程序已从挂起状态重新激活。在此处恢复应用程序状态。
else {
}
args.setPromise(WinJS.UI.processAll());
}
};
下面通过一个小示例演示如何使用Rating控件和WinJS.UI.processAll函数，首先在Visual Studio 2012中新建一个JavaScript 的Windows应用商店的空白应用程序项目，将其命名为rating。然后打开default.html文件，向body元素中添加Rating控件，相关代码如下所示：
<body>
<div id="ratingControlHost" data-win-control="WinJS.UI.Rating"></div>
</body>
布置好前台界面后，接下来打开default.js文件，为processAll函数添加初始化代码，相关代码如下所示：
args.setPromise(WinJS.UI.processAll().done(function () {
var control = document.getElementById("ratingControlHost").winControl;
control.averageRating = 3;
})
);
在上面代码中，首先在setPromise函数里调用WinJS.UI.processAll 函数来初始化所添加的Rating控件，通过getElementById函数获取id为"ratingControlHost"的Rating控件，然后把该控件的averageRating属性设置为3。
（4）WinJS.Class命名空间
WinJS.Class命名空间包含一个define函数，用于自定义类。这个函数中有三个参数，一个是constructor，一个是 instanceMembers，另一个是staticMembers。其中constructor参数是类的构造函数，instanceMembers参数为类的成员函数和成员属性，staticMembers参数为静态成员函数和成员属性，语法格式代码如下所示：
var object = WinJS.Class.define(constructor, instanceMembers, staticMembers);
例如使用define函数定义一个Person类，该类有name属性和一个静态属性harmsHumans，相关代码如下所示：
var Person = WinJS.Class.define(
function (name) {
this.name = name;
},
{ name: "" },
{ harmsHumans: false });
//声明并实例化Person对象
var person = new Person("paul");
person.name = "jack";
Person.harmsHumans = false;
上面代码中，首先定义Person类，接着实例化一个Person类的对象person，并设置该对象的name属性和harmsHumans属性。由于harmsHumans属性是一个静态属性，可以直接使用类名来调用。
Win10系列：JavaScript 的 WinJS库的更多相关文章
- Win10系列：WinJS库控件
在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...
- Windows Store App JavaScript 开发：WinJS库控件
在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...
- Win10系列：JavaScript 模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...
- Win10系列：JavaScript 数据绑定
使用数据绑定可以使页面中元素的属性值与数据源中的数据同步,其中数据源可以来自数据库.文件以及自定义的数据等.在常用的数据绑定方法中,简单对象绑定是将HTML元素与一个仅包含数据的简单对象相绑定,模板绑 ...
- Win10系列：JavaScript页面导航
页面导航是在开发应用的过程中使用频率较高的技术,其中比较常用的导航方式有多页导航和页内导航,采用多页导航方式的应用程序包含一系列的页面,在一个页面中加入另一个页面的链接地址后,单击链接将跳转到指定页面 ...
- Win10系列：JavaScript小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
- Win10系列：JavaScript 控件的使用
向页面中添加的控件可分为两种类型:标准的HTML控件和WinJS库控件.其中标准的HTML控件是指HTML标准中定义的基本控件,如按钮和复选框:WinJS库控件是为开发基于JavaScript 的Wi ...
- Win10系列：JavaScript 项目模板中的文件和项模板文件
通过上面内容的学习,相信读者已经对各种项目模板和项模板有了大致的了解,本节将进一步介绍项目模板中默认包含的项目文件以及项模板文件,首先讲解这些文件中的初始内容以及作用,然后介绍在一个页面中如何添加控件 ...
- 顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃.多样,并在多个领域快速成长.想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务.接下 ...
随机推荐
- 力扣（LeetCode）709. 转换成小写字母
实现函数 ToLowerCase(),该函数接收一个字符串参数 str,并将该字符串中的大写字母转换成小写字母,之后返回新的字符串. 示例 1: 输入: "Hello" 输出: & ...
- 学习笔记13—python DataFrame获取行数、列数、索引及第几行第几列的值
1. df=DataFrame([{‘A’:’11’,’B’:’12’},{‘A’:’111’,’B’:’121’},{‘A’:’1111’,’B’:’1211’}]) print df.column ...
- Python中数据类型
一.整数 Python可以处理任意大小的整数,当然包括负整数,在Python程序中,整数的表示方法和数学上的写法一模一样,例如:1,100,-8080,0,等等. 计算机由于使用二进制,所以,有时候用 ...
- NGUI中处理层级问题的几个方法总结
1.获得ui界面的UIPanel的最大层级: static int GetUIMaxDepth(Transform root) { UIPanel[] panels = root.GetCompone ...
- jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第四话)：把war包远程部署到tomcat
上一节介绍了如何用Ant插件来打war包,本节接着介绍如何把build好的war自动部署到tomcat中 1.先安装 Deploy to container Plugin插件 2. 在构建后操作中添加 ...
- 百度Apollo搭建步骤（待更新）
百度Apollo搭建步骤 ##一.安装ubuntu16.04 无需多说,安装完成打开命令行. ##二.下载Apollo镜像 git clone https://github.com/ApolloAut ...
- 雷林鹏分享：C# 数据类型
C# 数据类型 在 C# 中,变量分为以下几种类型: 值类型(Value types) 引用类型(Reference types) 指针类型(Pointer types) 值类型(Value type ...
- linux 如何释放缓存
操作: 同步 sync 释放所有缓存 echo 3 > /proc/sys/vm/drop_caches 原理: sync 将所有未写的系统缓冲区写到磁盘中,包含已修改的 i-node.已延迟的 ...
- English trip V1 - 22. My Life Teacher:Emily Key: describe talk about past 过去式
In this lesson you will learn to talk about the past. 课上内容(Lesson) I was born in 1986. I started sch ...
- OnSen UI结合AngularJs打造”美团"APP"我的”页面 --Hybrid App
1.页面效果图: 演示地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_mine/ 2.核心代码 mine.html: <ons-page id=&quo ...