跟燕青一起学Windows8应用开发:使用WinJS自定义Javascript类

         为了方便Windows8 Metro风格的应用开发,微软为Javascript开发了一个非常有用的工具包,即WinJS。本篇博客讲着重讨论WinJS中非常实用的类定义函数WinJS.Class.define的使用方法。通过具体的实例,笔者希望能够通过讨论,让读者对WinJS.Class.define有一个更加深入的认识,并且希望起到举一反三的作用:-)

         跟燕青一起学Windows8应用开发:创建HTML5 Metro应用程序中,笔者已经创建了一个HTML5 Metro应用项目,即Study Metro App项目。下面的讨论将会在此基础上进行展开,对如何创建Metro应用项目,不做再次讨论。

 

准备好了吗?OKLet’s go

 

首先打开Study Metro App项目,在Solution Explorer中鼠标右键js选项,依次选择Add子菜单和New Item…子菜单,如图1所示。

1

 

在弹出对话框中,我们依次选择JavascriptàJavascript File,在Name中填入Javascript的文件名。在本例中,我们创建一个PeopleJavascript文件,然后点击Add按钮,如图2所示。

2

正如Javascript文件名所示,在People.js文件中,我们将创建一个Javascript的类,类名就是People。让我们看看如何使用WinJS.Class.definel来轻松搞定它,如图3所示。

3

People类有一个构造器,名字和性别是人类普遍的属性,所以它们就是People类构造器参数,也是People类的属性。People类重置了父类ObjecttoString方法,为Dump类内容提供了手段。

 

看看我们是否遗漏了什么?嗯,让我们看看微软是如何定义WinJS.Class.define的,如图4所示。

4

WinJS.Class.define3个参数,第一个是构造器,第二个是实例的成员变量和函数,第三个是类的静态变量和函数。仔细看看,我们实例中没有包含成员的静态变量和方法部分,有问题吗?

没有!因为在Javascript中,参数一般都是可变的。如果没有输入,那么它的默认值一般为undefined。对于People而言,我们暂时不需要静态成员变量和方法,所以让它们随风飘去吧:-)

 

最后两句源代码,如下所示,主要的作用是创建一个People实例,然后将它打印到Visual StudioConsole窗口中。

var win8 = new People(“win8”, “neutral”);

console.log(win8);

console.log(win8)等价于console.log(win8.toString())Javascript会自动对People对象进行隐式转化。

 

运行一下,成功了吗?:-)

 

哈哈,不要着急,我们的Javascript代码还没有被包含进入了,看看图5如何搞定它!

5

非常简单吧!OK,运行吧!

 

6展示了运行结果,它是我们要的吗?

6

当然是的!看上去不错吧:-0

 

可能网友说,不会就这么结束了吧,这也太简单了吧!比如说,在windows 8Javascript代码中,如何对People进行继承定义呢?

 

不着急,微软想的很周到,它还有一个WinJS.Class.derive函数来定义如何定义子类。

让我们先看看WinJS.Class.derive的定义,如图7所示。

7

相比较图4WinJS.Class.derive的定义仅仅多了一个bassClass参数,即父类,其他的参数完全一致。

 

在弄清楚子类定义之后,还是先看看笔者是如何实现的,如图8所示。

8

这里笔者使用了2个高级的编程技巧:

l  技巧1:如何重置toString()方法?toString()在子类中一定会被重置,那么如果父类很复杂,我们往往需要将父类的相关的代码拷贝到子类中,并且加入子类中的独有属性。很麻烦?是的,并且有的时候可能搞不定,因为你可能无法拷贝父类的代码!那么如何解决这些问题呢?嗯,没错!你可以在父类中添加一个paramString()方法,在里面实现所有所有属性的聚合,在toString()中使用它来完成整个类的描述。这样做有什么好处呢?很简单,你的子类仅仅重置paramString()方法,在子类中调用父类的paramString方法,并将它特有的子类属性聚合到父类的返回字符串上,详见可参考图8中的具体实现。

l  技巧2:如何在子类中调用父类中被重置的方法?比如说如何在子类的paramString()中调用父类的paramString方法?在本例中,笔者使用了父类prototype轻松搞定了它:-),即People.prototype.paramString.apply(this)。非常棒的方法!通过父类和子类的属性组合,toString()的返回内容非常容易的生成!

 

在运行一下你的程序,搞定了吗?

Cool! 我喜欢图9,你呢?o(_)o 哈哈

9

对于子类的打印输出,和父类一致。因为比较简单,所以这里没有具体展开。

 

还是老规矩,在看了一通笔者唠叨后,是不是想自己也活动活动手指呢? :-)

 

笔者有意在实例中留了一些问题,不妨读者试试如何解决?

 

题目1)如何自动获取自定义类的类名?在toString()中,笔者强行将类信息用People包含。对于Man而言其实非常不爽,因为自己都自立门户了,还被People管制!那如何突破People的强权呢?你就是它的高参,do it now:-)

 

题目2)如何使类能够被其他Javascript代码使用?在例子中,PeopleMan都是局部的类定义,如何才能够被更多的Javascript所重复使用呢?我们定义的东西总是希望被其他Javascript代码使用,这样才能显示我们的价值,难道不是吗?:-)

 

【参考】

1.         跟燕青一起学Windows8应用开发:创建HTML5 Metro应用程序

2.         跟燕青一起学Windows8应用开发:安装Visual Studio 2011

3.         跟燕青一起学Windows8应用开发:安装Windows8操作系统

4.         跟燕青一起学Windows8应用开发:用CSS文件妆点你的应用

5.         跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率

6.         跟燕青一起学Windows8应用开发:使用HTML+CSS自适应垂直方向分辨率

7.         跟燕青一起学Windows8应用开发:使用HTML+CSS制作居中布局

8.         跟燕青一起学Windows8应用开发:使用HTML+CSS制作三角形

9.         跟燕青一起学Windows8应用开发:使用HTML+CSS制作Bubbles

 

 

 

Para obter mais informações sobre otimizações de compiladores, consulte Aviso sobre otimizações.