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文件。相关代码如下所示：

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>

<h4> Banana</h4>

</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控件。相关代码如下所示：

ListView控件用于以列表或者网格的形式显示多条数据。可以通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.ListView"来向页面中添加ListView控件，还可以通过div元素的data-win-options属性设置ListView控件的属性和值，相关代码如下所示：

AppBar控件用于定义一个显示操作命令的应用栏。可以通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.AppBar"来向页面中添加AppBar控件，相关代码如下所示：

AppBarCommand控件是在AppBar控件中显示的一条命令。一般通过定义一个button元素，并将button元素的data-win-control属性设置为"WinJS.UI.AppBarCommand"来向AppBar控件中添加AppBarCommand命令控件，还可以通过button元素的data-win-options属性设置AppBarCommand控件的属性和值，相关代码如下所示：

</div>

Rating控件用于方便地进行评级。该控件有个averageRating属性，使用这个属性开发者可以获取或者设置平均评级。通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.Rating"来向页面中添加Rating控件，相关代码如下所示：

HtmlControl控件用于加载一个HTML页面。可以通过定义一个div元素，并将data-win-control属性设置为"WinJS.UI.HtmlControl"来向页面中添加HtmlControl控件，还可以使用div元素的data-win-options属性把HtmlControl控件的uri属性设置成所要加载的页面地址，相关代码如下所示：

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>

</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属性是一个静态属性，可以直接使用类名来调用。

转载于:https://www.cnblogs.com/finehappy/p/6644553.html

Win10系列：JavaScript 的 WinJS库相关推荐

Win10系列：JavaScript页面导航
页面导航是在开发应用的过程中使用频率较高的技术,其中比较常用的导航方式有多页导航和页内导航,采用多页导航方式的应用程序包含一系列的页面,在一个页面中加入另一个页面的链接地址后,单击链接将跳转到指定页面 ...
Win10系列：JavaScript 模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...
推荐12个最好的 JavaScript 图形绘制库
众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web ...
用 JavaScript 实现手势库 — 手势动画应用【前端组件化】
前端<组件化系列>目录「一」用 JSX 建立组件 Parser(解析器) 「二」使用 JSX 建立 Markup 组件风格「三」用 JSX 实现 Carousel 轮播组件「四」用 ...
用 JavaScript 实现手势库 — 事件派发与 Flick 事件【前端组件化】
前端<组件化系列>目录「一」用 JSX 建立组件 Parser(解析器) 「二」使用 JSX 建立 Markup 组件风格「三」用 JSX 实现 Carousel 轮播组件「四」用 ...
顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃.多样,并在多个领域快速成长.想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务.接下 ...
用 JavaScript 实现手势库 — 支持多键触发【前端组件化】
前端<组件化系列>目录「一」用 JSX 建立组件 Parser(解析器) 「二」使用 JSX 建立 Markup 组件风格「三」用 JSX 实现 Carousel 轮播组件「四」用 ...
事半功倍系列 javascript
清华大学出版的<事半功倍系列 javascript>,本人照着书敲出来的,有些翻译了一下.前几年看了一下,最近无事,重新翻了翻,很有帮助.本书应该有光盘的,但学校的书,光盘不知在哪.希望对 ...
15 个 JavaScript Web UI 库
新闻来源:speckboy.com 几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面.本文介绍了 ...

Win10系列：JavaScript 的 WinJS库

Win10系列：JavaScript 的 WinJS库相关推荐

最新文章

热门文章