Question

我正在为HTML5画布创建一个小包装器，我正在做的一件事是从我的每个包装方法中返回self / this以进行简单的调用链接。

由于缺少一个更好的名字，我正在调用我的包装器Canvas。它基本上将画布和上下文包装在一起。

我做的一件事是将以下方法添加到Canvas.prototype

Canvas.fn = Canvas.prototype = {
    save: function () { this.ctx.save(); return this; },
    restore: function () { this.ctx.restore(); return this; },
    scale: function (x, y) { this.ctx.scale(x, y); return this; },
    rotate: function (angle) { this.ctx.rotate(angle); return this; },
    translate: function (x, y) { this.ctx.translate(x, y); return this; },
    transform: function (a,b,c,d,e,f) { this.ctx.transform(a,b,c,d,e,f); return this; },

使用某个委托添加这些方法有更简单的方法吗？也许用数组或函数名？请注意，有些方法接受参数，我想将它们原样传递给实际的self.ctx方法。

Answer 1

这样的东西？

var functionNames = ['save', 'restore', 'scale', 'rotate', 'translate', 'transform'];

for(var i = 0; i < functionNames.length; i++) {
    (function(funcName) {
        this[funcName] = function() {
            this.ctx[funcName].apply(this.ctx, arguments);
            return this;
        };
    )(functionNames[i]);
}

Answer 2

与Eric's answer类似，也基于http://seewhatever.de/blog/?p=440：

function CanvasWrapper(canvas)
{
    // Call this with new ... or not
    if(!(this instanceof CanvasWrapper)){
        return new CanvasWrapper(canvas);
    }

    var self = this,
        ctx = canvas.getContext('2d'),
        props = [
            'fillStyle', 'strokeStyle'
            // ...
        ],
        meths = [
            'fillRect', 'strokeRect', 'clearRect',
            'beginPath', 'closePath',
            'moveTo', 'lineTo', 'arc',
            'stroke'
            // ...
        ],
        nonChainableMeths = [
            'createLinearGradient'
        ],
        i, prop, meth;

    // Create and set jQuery-like property accessors
    // With no arguments they return the prop value
    // With one argument they set the prop value and return self
    function createAccessor(ctx, prop, self)
    {
        return function(){
            if(arguments.length == 1)
            {
                ctx[prop] = arguments[0];
                return self;
            }
            else
            {
                return ctx[prop];
            }
        }
    }
    for(i = 0; i < props.length; ++i)
    {
        prop = props[i];
        self[prop] = createAccessor(ctx, prop, self);
    }

    // Create and set chainable delegate methods
    function createDelegate(ctx, meth, self)
    {
        return function(){
            ctx[meth].apply(ctx, arguments);
            return self;
        }
    }
    for(i = 0; i < meths.length; ++i)
    {
        meth = meths[i];
        self[meth] = createDelegate(ctx, meth, self);
    }

    // Create and set non-chainable delegate methods
    function createNCDelegate(ctx, meth, self)
    {
        return function(){
            return ctx[meth].apply(ctx, arguments);
        }
    }
    for(i = 0; i < nonChainableMeths.length; ++i)
    {
        meth = nonChainableMeths[i];
        self[meth] = createNCDelegate(ctx, meth, self);
    }
    return self;
}

Answer 3

以下是Eric的答案的延续：

var funs = ['save', 'restore', 'scale', 'rotate', 'translate',
    'transform'];
var f;
for(var i = 0; i < funs.length; i++) {
    f = funs[i];
    self[f] = new Function("this.ctx." + 
            f + ".apply(this.ctx, arguments);  return this;");
}

但我不喜欢使用Function构造函数，而且我的函数是用字符串构成的。

JavaScript重复委托创建

3 个答案: