Création de délégué répétitif JavaScript

Question

Je crée un petit wrapper pour canvas HTML5, et une chose que je fais est de renvoyer self/this de chacune de mes méthodes enveloppées pour faciliter le chaînage d'appel.

Faute d'un meilleur nom, j'appelle mon emballage Toile. Il enveloppe essentiellement la toile et le contexte ensemble.

Une chose que je l'ai fait est d'ajouter les méthodes ci-dessous pour la 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; }, 

est-il un moyen plus facile d'ajouter ces méthodes à l'aide de certains délégués? Peut-être avec un tableau ou les noms de fonctions? Notez que certaines méthodes prennent des arguments et que je veux les passer telles quelles à la méthode self.ctx actuelle.

Answer 1

Quelque chose comme ça?

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

Une suite de la réponse d'Eric qui fonctionne est donnée ci-dessous:

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;"); 
} 

Mais je n'aime pas l'utilisation du constructeur Function et que ma fonction est un fait à partir d'une chaîne.

Answer 3

similaires à Eric's answer, également basée sur 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; 
}