双击代码全选
|
1
2
3
4
5
6
7
8
|
// clockControl.js
(function () {
// The easy way
WinJS.Namespace.define("Samples.UI", {
ClockControl: function (element, options) { ...
};
};
})();
|
WinJS.Namespace 命名空间中的 define 函数允许定义一个新的命名空间，从而为您正确处理包含点的名称的分析。第二个参数是用于定义您要从该命名空间公开的构造函数、函数和值的对象，在我们的例子中就是 ClockControl 构造函数。
控 件属性和方法 在我们的 ClockControl 类型上，我们想要公开方法和属性，例如颜色属性。这些方法和属性可以是实例或静态的，并且它们可以是公共或私有的（至少作为“private”，因为 JavaScript 允许获取某一对象的成员）。均通过正确使用构造函数的原型属性以及 JavaScript 的新增 Object.defineProperties 方法来支持所有这些概念。WinJS 也通过 WinJS.Class 命名空间上的 define 方法为此提供快捷方式：
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
WinJS.Namespace.define("Samples.UI", {
ClockControl: WinJS.Class.define(
function (element, options) {...}, // ctor
{ // Properties and methods
color: "black",
width: { get: function () { ...
} },
height: { get: function () { ...
} },
radius: { get: function () { ...
} },
_tick: function () { ...
},
_drawFace: function () { ...
},
_drawHand: function (radians, thickness, length) { ...
},
})
});
|
WinJS.Class.define 方法采用充当构造函数的函数，但它也采用属性和方法的集合。该 define 方法知道如何从提供的 get 和 set 函数创建属性。进一步讲，它知道以下划线为前缀的属性或方法（例如 _tick）是“private”（私有的）。JavaScript 并不是真的支持传统意义上的 private 方法 — 也就是说，我们仍可以调用 _tick 方法。但是，它们将不会在 Visual Studio 2012 IntelliSense 或 JavaScript for-in 循环中出现，这至少是表明它们不是用于 public（公共）的一个简便方法。
该构造函数设置成为 WinJS 控件所需的属性，如图 9 中所示。
图 9 该构造函数设置成为 WinJS 控件所需的属性
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
WinJS.Namespace.define("Samples.UI", {
ClockControl: WinJS.Class.define(function (element, options) {
// Set up well-known properties
element.winControl = this;
this.element = element;
// Parse the options; that is, the color option
WinJS.UI.setOptions(this, options);
// Create the drawing surface
var canvas = document.createElement("canvas");
element.appendChild(canvas);
this._ctx = canvas.getContext("2d");
// Draw the clock now and every second
setTimeout(this._tick.bind(this), 0);
setInterval(this._tick.bind(this), 1000);
},
...
});
|
该构造函数所做的第一件事情就是设置已知的 winControl 和元素属性，以便开发人员可以在承载的 HTML5 元素和 JavaScript 控件之间进行切换。
接 下来，该构造函数将处理这些选项。您应该记得，可以使用 HTML5 中的 data-win-options 属性将这些选项指定为一组名称/值对或一个字符串。WinJS 将选项字符串分析成一个 JavaScript 对象，这样您可以只处理名称/值对。如果愿意，可以提取单独的属性，例如我们的例子中的颜色属性。但是，如果您的选项列表很长，则 WinJS.UI 命名空间中的 setOptions 方法将遍历选项对象中的所有属性，并且将其设置为您的控件上的属性。例如，下列代码块是等效的：
双击代码全选
|
1
2
3
4
5
6
7
8
|
// Setting each property one at a time
myControl.one = "one";
myControl.two = 2;
// Setting all properties at once
WinJS.UI.setOptions(myControl, {
one: "one",
two: 2,
});
|
在 设置该控件的选项后，构造函数的工作就是创建完成工作所需的 HTML5 父元素的任何子元素。在 ClockControl 这个例子中，我们使用 HTML5 canvas 元素和一个计时器。此控件是用平淡无奇的 HTML 和 JavaScript 编写的，因此就不在这里展示了（但会在随附的代码下载中提供它）。
控件事件 除了方法和属性之外，控件常常会公开事件。事件是来自您的控件的某种通知，用来指示发生了某种令人感兴趣的情况，例如用户单击了该控件或者该控件达到了会 触发程序中其他某个类型行为的某个状态。基于 HTML DOM 设置的示例，您将需要 addEventListener 和 removeEventListener 之类的方法，以便允许开发人员订阅您的控件公开的任何事件以及相应的 onmyevent 属性。
例如，如果我们想要每 5 秒就公开来自示例 ClockControl 的事件，则我们应该能够以编程方式订阅它：
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// Do something every 5 seconds
window.clockControl_fiveseconds = function (e) {
...
};
var clock = new Samples.UI.ClockControl(...);
// This style works
clock.onfiveseconds = clockControl_fiveseconds;
// This style works, too
clock.addEventListener("fiveseconds", clockControl_fiveseconds);
Declaratively, we’d like to be able to attach to custom events, too:
<!-- this style works, three -->
<div data-win-control="Samples.UI.ClockControl"
data-win-options
="{color: 'white',
onfiveseconds: clockControl_fiveseconds}"
...>
</div>
|
启用所有这三个样式要求两样东西： 用于管理事件订阅的方法（并且在事件发生时用于分配事件）以及各事件的属性。两者均由 WinJS.Class 命名空间提供：
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
|
// clockControl.js
...
WinJS.Namespace.define("Samples.UI", {
ClockControl: WinJS.Class.define(...);
});
// Add event support to ClockControl
WinJS.Class.mix(Samples.UI.ClockControl,
WinJS.UI.DOMEventMixin);
WinJS.Class.mix(Samples.UI.ClockControl,
WinJS.Utilities.createEventProperties("fiveseconds"));
|
WinJS.Class 的 mix 方法允许您混用现有对象所提供的属性和方法。在这个示例中，来自 WinJS.UI 的 DOMEventMixin 提供三种方法：
双击代码全选
|
1
2
3
4
5
6
|
// base.js
var DOMEventMixin = {
addEventListener: function (type, listener, useCapture) {...},
dispatchEvent: function (type, eventProperties) {...},
removeEventListener: function (type, listener, useCapture) {...},
};
|
一 旦我们混合来自 DOMEventMixin 的方法后，我们就可以通过将该 mix 方法用于 WinJS.Utilities 的 createEventProperties 方法创建的对象，为每个自定义事件都创建属性。此方法将为您传入的每个逗号分隔的事件名称都生成事件方法组，并且在组的前面放置“on”前缀。通过对 mix 方法的这两个调用提供的此组属性和方法，我们对我们的自定义控件进行了扩展，以便支持该 fiveseconds 事件。为了从该控件内分配此类型的事件，我们调用 dispatchEvent 方法：
(责任编辑：12图资源库)
