javascript - 使用 "Module Pattern"时 jQuery 单击事件不起作用

Question

我是一名中级前端 JS 开发人员，我正在尝试 Chris Coyyer 概述的模块模式 here .

但是当我在设置中存储一个 jQuery 选择器时，我无法使用它来触发点击事件。请参阅下面的代码和我的评论...非常感谢任何帮助!

var s,
TestWidget = {
  settings: {
    testButton: $("#testing")
  },
  init: function() {
    s = this.settings;
    this.bindUIActions();
  },
  bindUIActions: function() {
    console.log(s.testButton); // This works: [context: document, selector: "#testing", constructor: function, init: function, selector: ""…]

    //This doesn't work - why?????
    s.testButton.click(function() {
        //Why isn't this triggered?
        alert('testButton clicked');
    });

    /*This works, obviously:
    $('#testing').click(function() {
        alert('testButton clicked');
    });
    */

  }
};
$(document).ready(function() {
    TestWidget.init();
});

Answer 1

问题是您在 DOM 准备好之前初始化了 $("#testing")，所以这个 jQuery 对象是空的。

一个简单的解决方案是将所有代码放入就绪回调中。

另一种是替换

  settings: {
    testButton: $("#testing")
  },
  init: function() {
    s = this.settings;
    this.bindUIActions();
  },

与

  settings: {
  },
  init: function() {
    s = this.settings;
    s.testButton = $("#testing");
    this.bindUIActions();
  },

但是很难理解为什么要为这么简单的事情使用这么多代码。你可能过度使用了这里的模式，它并不是很干净，因为你有两个全局变量 s 和 TestWidget 而一个已经很多了。

以下是您的代码的一个细微变化，在我看来，它会更清晰，同时仍然使用模块 ( IIFE variant):

TestWidget = (function(){
    var settings = {};
    return {
        init: function() {
            settings.testButton = $("#testing");
            this.bindUIActions();
        },
        bindUIActions: function() {
            console.log(settings.testButton);
            settings.testButton.click(function() {
                alert('testButton clicked');
            });
        }
    }

})();
$(document).ready(function() {
    TestWidget.init();
});

settings 保存在闭包中，不会泄漏到全局命名空间中。请注意，如果您不对该模块做更多操作，即使是这个版本也没有意义。