javascript - 无法理解backbone.js教程示例

Question

我正在学习backbone.js，如下this tutorial ，但我在理解第一个示例时遇到了问题:

(function($){
  var ListView = Backbone.View.extend({
    ...
    initialize: function(){
      _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods

       this.render(); // not all views are self-rendering. This one is.
    },
    ...
  });
  ...
 })(jQuery);

Q1:为什么使用(function($){})(jQuery);而不是一个完全正常工作的 (function(){})();？

问题2:_.bindAll(this, 'render') 是做什么的？它如何修复方法中“this”上下文的丢失？

Answer 1

Q1:通过将 jquery 作为参数传递，您可以做两件事:

1. 如果需要使用 2 个版本的 jquery - 你已经准备好了
2. 模块模式可能更好地被认为是封装良好且具有明确定义的依赖关系的东西，因此通过声明 jquery 是一个参数 - 您声明了明确的依赖关系。当然还有其他方法可以做到这一点(例如 RequireJS )，但这也是一种方法

Q2:bindAll 是 Underscore.js 的一个实用方法，它为特定方法绑定(bind) this - 因此，当调用该方法时(例如作为回调)正确的 this 将在其内部使用。

例如:

(function($){
  var ListView = Backbone.View.extend({
    ...
    initialize: function(){
        // fixes loss of context for 'this' within methods
        _.bindAll(this, 'render', 'makestuff'); 

        this.render(); // not all views are self-rendering. This one is.
    },
    ...
    makestuff : function() { 
        ... 
        this.stuff = ... // some action on the list's instance
    }
  });
  ...
 })(jQuery);

在代码的某些部分，您会执行以下操作:

var list = new ListView({...});
$('#button').on('click', list.makestuff);

makestuff 方法中的

this 是对上述 list 的引用，而不是 on 函数所在的任何上下文当 makestuff 在其中实际调用时。

实际实现依赖于使用 apply 和 call 函数将函数执行的上下文绑定(bind)到特定对象。