29 April 2012

JavaScript での Mixin メモ

peter.michaux.ca - Mixins and Constructor Functions

  • Mixin 自体はなるほど
    • よく使うものをまとめておいて, あとで別のオブジェクトにその能力を付与できる
    • Spine とかでもやってた
  • コメント欄で Angus Call が書いてた functional な方法の方がすっきりしているように感じた
  • Addy Osmani のパターン集でもちゃんと取り上げられていた

    • Essential JavaScript And jQuery Design Patterns
    • こっちは augment() という関数で mixin してるけど, call() の方法のほうがスマートな気がする
    • あーでも関数名的に意図が明確になるのは augment()
    • でも処理の流れはこっちの方が自然
    • cache のくだりと curry 化を使って option を使えるようにする話が面白い
    • cache バージョンの例

      var asRectangle = (function() {
        function area() {
          return this.length * this.width;
        }
        function grow() {
          this.length++, this.width++;
        }
        function shrink() {
          this.length--, this.width--;
        }
        return function() {
          this.area = area;
          this.grow = grow;
          this.shrink = shrink;
          return this;
        };
      })();
      
      var RectangularButton = function(length, width, label, action) {
        this.length = length;
        this.width = width;
        this.label = label;
        this.action = action;
      }
      
      asButton.call(RectangularButton.prototype);
      asRectangle.call(RectangularButton.prototype);
      
      var button3 =
        new RectangularButton(4, 2, 'delete', function() {return 'deleted'});
      button3.area(); //8
      button3.grow();
      button3.area(); //15
      button3.fire(); //'deleted'
      
  • そもそも Mixin のメリットは