使用模块模式访问 jQuery 回调中的私有变量答案

【问题标题】：Accessing private variables in a jQuery callback with the module pattern使用模块模式访问 jQuery 回调中的私有变量
【发布时间】：2012-12-01 18:43:50
【问题描述】：

下面的执行没有错误，但是 DOM 没有更新。

var Cart = function() {
  var $cart;

  function init() {
    $cart = $("#cart");

    this.refresh();
  }

  function refresh() {
    $.ajax({
      // ...
      success: function(html) {
        $cart.html(html); // $cart seems to exist as JS object, but #cart doesn't get updated in the DOM.
        $("#cart").html(html); // This works!
      }
    });
  }

  return {
    init: init,
    refresh: refresh
  }
}();

$(function() {
  Cart.init();
});

更新

与上面的代码相反，我实际上并没有在 jQuery 就绪事件中调用 Cart.init()。

【问题讨论】：

你记录收到的html来检查了吗？
@dystroy：我愿意，为简洁起见略过。添加点以更清晰。
应该可以，这里没有范围问题。
@randomguy：匿名回调有自己的范围，但它也可以访问所有封闭范围（它“关闭”它们，参见Closures are not complicated）。因此，$cart 在您用于创建 Cart 的匿名函数中定义的所有内容的范围内。
@randomguy：this 不会随作用域而改变。它随着函数调用而变化，这是不同的。更多：Mythical Methods 和 You must remember this。同一函数（因此也是同一范围）中的代码可以使用任何 this 值运行。

标签： javascript jquery closures revealing-module-pattern

【解决方案1】：

在您调用 Cart.init() 时检查您的 #cart 对象是否存在。这是我看到的两个工作代码和不工作代码之间的唯一区别，因为没有其他问题（请参阅fiddle）。

【讨论】：

问题是我在就绪回调之外调用了 Cart.init() ！谢谢，这对我有帮助。
@randomguy：在这种情况下，最好引用你的实际代码。在这种情况下，您已将对 init 的调用显示为在 ready 回调中，但根据您上面的评论，它不是。
@T.J.Crowder：点了。将来会这样做。
如果无法在您遇到问题的地方编写实际代码，请创建一个最小示例（例如在 jsfiddle 中，就像我所做的那样）并对其进行测试。跨度>