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 框架和库,是个不可能完成的任务.接下 ...
随机推荐
- 获取 ip （ 第三方接口 ）
搜狐IP地址查询接口(默认GBK):http://pv.sohu.com/cityjson 搜狐IP地址查询接口(可设置编码):http://pv.sohu.com/cityjson?ie=utf-8 ...
- cocos2dx 编译遇到资源里有.svn文件不能删除报错的问题
使用cocos compile -p android 对项目进行编译的时候,遇到res文件中包含了只读属性的svn目录,不能进行删除而报错. 错误如下图(build_android.py里面对.svn ...
- mui 引导页
引导页制作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...
- input = time 微信端(移动端)
垂直居中不管用:用margin-top解决 默认值value 不生效:严格按照日期格式设置
- 有关C#中List排序的总结
这里有一篇文章作者总结的就比较详细: https://blog.csdn.net/jimo_lonely/article/details/51711821 在这里只记录一点: 对list或者数组中的数 ...
- Skip level 1 on 1
2019-01-08 16:43:29 Skip level 1:1 什么是 Skip level 1 on 1 :你和你老板的老板(的老板) 1:1 如果你的老板是first line manag ...
- PHP里面增加写日志功能
配置项中:
- 在Spring Boot中使用 @ConfigurationProperties 注解， @EnableConfigurationProperties
但 Spring Boot 提供了另一种方式 ,能够根据类型校验和管理application中的bean. 这里会介绍如何使用@ConfigurationProperties.继续使用mail做例子. ...
- 方差variance, 协方差covariance, 协方差矩阵covariance matrix | scatter matrix | weighted covariance | Eigenvalues and eigenvectors
covariance, co本能的想到双变量,用于描述两个变量之间的关系. correlation,相关性,covariance标准化后就是correlation. covariance的定义: 期望 ...
- p1472 Cow Pedigrees
用dp[i][j]记录i个点,组成深度恰好为j的方案数.arr[i][j]记录i个点,深度<=j的方案数.那么dp[i][j]只有i为奇数时不为0.而arr[i][j]等于dp[i][j]的前缀 ...