createjs的get和set以及简单的封装

  • 内容
  • 评论
  • 相关

get,set在java,as3等语言中用的非常普遍,那在js中怎么实现?createjs实现起来有什么不同?为什么要用get,set?鄙人今天就给大家讲解一下。

首先我先发一个网上别人写的get,set。

var age = 18;
var test = {
    get age (){
        return age;
    },
    set age (value){
        if(value > 100) age= new Date().getFullYear() - value;
        else age = value;
    }
};

或者这样

function Person() {
    var age = new Date().getFullYear() - 18;
    Object.defineProperty(this, "age", {
        get: function () { alert("内部存储数据为:" + age); return new Date().getFullYear() - age; },
        set: function (value) { age = value; }
    });
}

那用createjs实现会有什么不同呢,其实差不多,但是要结合createjs的OOP,下面我写一个。

//BaseShape
(function() {
    function BaseShape(wid,hei){
        this.Shape_constructor();
        this._width = wid;
        this._height = hei;
    }
    var p = createjs.extend(BaseShape,createjs.Shape);
    p._getWidth = function ()
    {
        return this._width*this.scaleX;
    }
    p._setWidth = function (value)
    {
        this.scaleX =  value/this._width;
    }
    p._getHeight = function ()
    {
        return this._height*this.scaleY;
    }
    p._setHeight = function (value)
    {
        this.scaleY =  value/this._height;
    }
    Object.defineProperties(p, {
        width: { get: p._getWidth, set: p._setWidth },
        height: { get: p._getHeight, set: p._setHeight }
    });
    cls.BaseShape = createjs.promote(BaseShape, "Shape");
}());

大家可以看到我封装了createjs的Shape类,与之前的不同之处是把p也就是类的原型链传进去了,并添加了width和height的存取器,优点显而易见的,之前createjs不能使用width和height,这样子就可以使用了。

    var shape = new cls.BaseShape(400,200);
    shape.graphics.beginFill("#ff0000");
    shape.graphics.drawRect(0,0,400,200);//必须和构造函数上初始化的大小统一
    shape.graphics.endFill();
    stage.addChild(shape);
    shape.width = 600;
    shape.height = 300;

但是由于api无法获得实际大小,所以创建类的时候需要赋值一个原始大小。

有些童鞋也许会说,用function实现也一样不需要用get,set这种存取器。其实实际上,很多场景必须要用存取器,比如下面:

http://www.ajexoop.com/demo/getsettest/index.html

源代码:

//main.js
var canvas,stage

function init() {
    canvas = document.getElementById("mainView");
    stage = new createjs.Stage(canvas);
    stageBreakHandler();

    var shape = new cls.BaseShape(400,200);
    shape.graphics.beginFill("#ff0000");
    shape.graphics.drawRect(0,0,400,200);//必须和构造函数上初始化的大小统一
    shape.graphics.endFill();
    stage.addChild(shape);
//    shape.width = 600;
//    shape.height = 300;

    createjs.Tween.get(shape).to({width:1200,height:600}, 2000).call(function (){console.log(shape.width,shape.height)})

    createjs.Ticker.timingMode =  createjs.Ticker.RAF_SYNCHED;
    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener("tick", stageBreakHandler);

}
function stageBreakHandler(event)
{
    stage.update();
}
var cls = {};
//BaseShape
(function() {
    function BaseShape(wid,hei){
        this.Shape_constructor();
        this._width = wid;
        this._height = hei;
    }
    var p = createjs.extend(BaseShape,createjs.Shape);
    p._getWidth = function ()
    {
        return this._width*this.scaleX;
    }
    p._setWidth = function (value)
    {
        this.scaleX =  value/this._width;
    }
    p._getHeight = function ()
    {
        return this._height*this.scaleY;
    }
    p._setHeight = function (value)
    {
        this.scaleY =  value/this._height;
    }
    Object.defineProperties(p, {
        width: { get: p._getWidth, set: p._setWidth },
        height: { get: p._getHeight, set: p._setHeight }
    });
    cls.BaseShape = createjs.promote(BaseShape, "Shape");
}());

这个demo是用tween做的,而tween的参数只能传属性,不能传方法,那get,set的优势就出来了,可以靠存取器封装。很多类实际上也应该用一个属性就可以改变其效果,这样更加的OOP,也更加的方便。

评论

1条评论
  1. Gravatar 头像

    匿名 回复

    666

匿名进行回复 取消回复

电子邮件地址不会被公开。