win8: WinJS的面向对象 WinJS.Class

简介:

官方文档:http://msdn.microsoft.com/en-us/library/windows/apps/br229776.aspx

WinJS.Class.define 类定义

var object = WinJS.Class.define(constructor, instanceMembers, staticMembers);

三个参数是:构造函数,实例成员集合,静态成员集合。e.g.

复制代码
var Robot = WinJS.Class.define( function(name) {
    this.name = name;
}, 
{ modelName: "" }, 
{ harmsHumans: false });

var myRobot = new Robot("Mickey");

myRobot.modelName = "4500";
Robot.harmsHumans = false;
复制代码

对应的js代码是:

复制代码
function Robot(name) {
    this.name = name;
}

Robot.prototype.modelName = '4500';
Robot.harmsHumans = false;
复制代码

在JS中用 Object.defineProperty 定义modelName GET/SET时我们需要这么做:

Object.defineProperty(Robot.prototype, "modelName", {
    get: function () { this.computeModelName(); }
});

但在WinJS中:

复制代码
var Robot = WinJS.Class.define(
    function (name) { this.name = name; },
    {
        modelName: { get: function () { return this.computeModelName(); } }
    }
);
复制代码

 

WinJS.Class.derive 继承

 

var object = WinJS.Class.derive(baseClass, constructor, instanceMembers, staticMembers);

 

它通过调用Object.create 使用baseClass 的prototype 构造派生对象。

复制代码
var SpaceRobot = WinJS.Class.derive(Robot, function (name) {
    this.name = name;
},
{ airSupply: "" },
{ saveSelf: true });

var mySpaceRobot = new SpaceRobot("Myra");
mySpaceRobot.airSupply = "oxygen";
var save = SpaceRobot.saveSelf;
复制代码

WinJS.Class.mix 混合类

var object = WinJS.Class.mix(constructor);
复制代码
WinJS.Namespace.define("Robotics", {
    Robot: WinJS.Class.define( function(name) {
        this.name = name;
        }, 
        { name: name }, 
        { harmsHumans: false, obeysOrders: true })
    }); 

var Movable = {
    goForward: function () {
        document.getElementById("div").innerText = "go forward";
    },
    goBack: function () {
        document.getElementById("div").innerText = "go back";
    },
    turnRight: function () {
        document.getElementById("div").innerText = "turn right";
    },
    turnLeft: function () {
        document.getElementById("div").innerText = "turn left";
    };

WinJS.Class.mix(Robotics.Robot, Movable);

var myRobot = new Robotics.Robot("Mickey");

myRobot.goBack();
复制代码

当对象与WinJS.Utilities.eventMixin 等混合时,可以获取事件监听的功能等......

More info about mix , Check:http://msdn.microsoft.com/en-us/library/windows/apps/hh967789.aspx

 

 本文转自老Zhan博客园博客,原文链接:http://www.cnblogs.com/mybkn/archive/2012/10/04/2711519.html,如需转载请自行联系原作者

相关文章
|
JavaScript 前端开发
|
JavaScript 前端开发
|
前端开发 JavaScript 小程序
基于element-ui封装的upload组件
无论什么项目,大概都少不了图片上传。作为常见的需求,很多地方会使用到,应该单独封装一个上传组件,方便复用。
491 0
基于element-ui封装的upload组件
|
JavaScript 前端开发 API
Mui常用的方法
Mui常用的方法
Mui常用的方法
|
JavaScript 前端开发
C4C的Rich text editor的JavaScript实现
C4C的Rich text editor的JavaScript实现
100 0
C4C的Rich text editor的JavaScript实现
sap.ui.layout.form.SimpleForm.prototype
Created by Wang, Jerry, last modified on Feb 17, 2015
111 0
sap.ui.layout.form.SimpleForm.prototype
|
Web App开发 JavaScript 前端开发
|
Web App开发 JavaScript 容器