1. 首页
  2. HTML5
  3. 正文

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

  • 内容
  • 评论
  • 相关

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

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

1
2
3
4
5
6
7
8
9
10
var age = 18;
var test = {
    get age (){
        return age;
    },
    set age (value){
        if(value > 100) age= new Date().getFullYear() - value;
        else age = value;
    }
};

或者这样

1
2
3
4
5
6
7
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，下面我写一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//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，这样子就可以使用了。

1
2
3
4
5
6
7
    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

源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//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

发表评论

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