10

私は Coffeescript を学び始めたばかりで、なぜ私が使用すべきかについて明確な答えを見つけることができません

class Model extends Backbone.Model
    urlRoot: '//some/url'

にコンパイルします

Model = (function(_super) {
    __extends(Model, _super);

    function Model() {
        _ref = Model.__super__.constructor.apply(this, arguments);
        return _ref;
    }

    Model.prototype.urlRoot = '//some/url';

    return Model;

})(Backbone.Model);

とは対照的に

Model = Backbone.Model.extend
    urlRoot: '//some/url'

にコンパイルします

var Model = Backbone.Model.extend({
    urlRoot: '//some/url'
});

私が尋ねている主な理由は、私が見たほとんどすべての例で前者が使用されているためです。ただし、後者とは対照的に、コンパイルすると「はるかに」多くの肥大化が生じます。この質問を読みましたが、答えが異なるようです。

4

1 に答える 1

26

肥大化について質問しているので、いくつかのコードを見てみましょう。

を使用した JavaScriptBackbone.Model.extend

Backbone のソース コードを開くと、extend関数が次のようになっていることがわかります。

var extend = function(protoProps, staticProps) {
    var parent = this;
    var child;

    if (protoProps && _.has(protoProps, 'constructor')) { // _.has comes from
      child = protoProps.constructor;                     // underscore, even 
    } else {                                              // more 'bloat'
      child = function(){ return parent.apply(this, arguments); };
    }

    _.extend(child, parent, staticProps);                // more underscore

    var Surrogate = function(){ this.constructor = child; };
    Surrogate.prototype = parent.prototype;
    child.prototype = new Surrogate;

    if (protoProps) _.extend(child.prototype, protoProps);

    child.__super__ = parent.prototype;

    return child;
  };

ここで実際に何が起こるか：

電話すると

var Model = Backbone.Model.extend({urlRoot: '//some/url' });

次のようなものが得られます。

  // Create new constructor which calls the parent constructor
  var Model;
  if (({}).hasOwnProperty.call({urlRoot: '//some/url' }, 'constructor') {
      // this is false so...                    
  } else {
      Model = function(){ return Backbone.Model.apply(this, arguments); };
  }

  // Set up prototype chain
  var Surrogate = function(){ this.constructor = model; };
  Surrogate.prototype = Backbone.Model.prototype;
  Model.prototype = new Surrogate;

  // Add properties to the child prototype
  // Same as:
  // Model.prototype.urlRoot = '//some/url';
  _.extend(Model.prototype, { urlRoot: '//some/url' });

  // Set the magical __super__ property
  Model.__super__ = Backbone.Model.prototype;

とのCoffeeScriptextends

これを CoffeeScript コードと比較してください。extendsgetsと呼ばれる魔法の関数を使用すると、ファイルの先頭に追加されることがわかり__extendsます。これは (フォーマットされている場合) 次のようになります。

__extends = function(child, parent) { 
    for (var key in parent) { 
        if (__hasProp.call(parent, key)) 
            child[key] = parent[key]; 
    }

    function ctor() { this.constructor = child; } 
    ctor.prototype = parent.prototype; 
    child.prototype = new ctor(); 

    child.__super__ = parent.prototype; 

    return child; 
};

生成された JS と結合されます。

var Model = (function(_super) {
    __extends(Model, _super);

    function Model() {
        _ref = Model.__super__.constructor.apply(this, arguments);
        return _ref;
    }

    Model.prototype.urlRoot = '//some/url';

    return Model;

})(Backbone.Model);

ここで実際に何が起こるか：

電話すると

Model extends Backbone.Model
    urlRoot: '//some/url'

次のようなものが得られます。

// Create new constructor which calls the parent constructor
var Model = function () {
    return Model.__super__.constructor.apply(this, arguments);
}

// Copy static properties from Backbone.Model to Model
for (var key in Backbone.Model) {
    if (__hasProp.call(Backbone.Model, key)) 
        Model[key] = Backbone.Model[key]; 
}

// Set up prototype chain
function ctor() { this.constructor = Model; } 
ctor.prototype = Backbone.Model.prototype; 
Model.prototype = new ctor(); 

// Add properties to the child prototype
Model.prototype.urlRoot = '//some/url';

// Set the magical __super__ property
Model.__super__ = Backbone.Model.prototype;

私たちは何を見ますか？

彼らはかなり似ていますよね？

CoffeeScript は単なる JavaScript です。__extendsすでに Backbone を使用していて、生成されたソースに関数を追加したくない場合は、 を使用してくださいBackbone.Model.extend。バックボーンをまとめて追加することを避けたい場合extendsは、実質的に同じことを行います。非常に多くの例で後者を使用していない理由は、Backbone が CoffeeScript を使用する必要がないためです。外部ライブラリに依存する例を使用しても意味がありません。

于 2013-08-13T12:51:05.907 に答える