createjs技术博客

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，也更加的方便。