JavaScript 模块模式 : initialise two objects on load

Question

我定义了两个对象，每个对象都有一个 init 函数，如下

var TestSound = {
    settings: {
        testSoundFile : "static/main/persoonS",
        postUrl : "dummy.com",
    },
    init : function(){
        this.cacheDom();
         this.bindEvents();
    },
    cacheDom: function(){
        this.oneCertainButton = document.getElementById("buttonId");
        this.soundElement = document.getElementById("sound");
    },
    bindEvents : function(){
        that = this;
        this.oneCertainButton.onclick = function(){ that.playSound(that.settings.testSoundFile); };
    },
    ............

var CheckInput = {
   settings: {
    correctAnswer : "persoon",
   },
   init : function (){
       this.cacheDom();
       this.bindEvents();
   },
   cacheDom: function (){
       this.submitButton = document.getElementById("submitButtonId");
       this.answerInputBox = document.getElementById("answerId");
       this.feedbackField = document.getElementById("feedbackId");
   },
   bindEvents: function(){
       that = this;
       this.submitButton.addEventListener("click",  function(event){
  ..........

我希望使用“window onload”初始化它们(一个接一个)，如下所示:

window.onload = function() { 
   CheckInput.init.bind(CheckInput);
   TestSound.init.bind(TestSound);
};

这显然不起作用，因为似乎没有调用 init 函数。

但是，如果我只初始化其中一个模块，它就会起作用:

window.onload =
   CheckInput.init.bind(CheckInput);

非常感谢任何有关此处出现问题的解释!

Answer 1

你想要其中一个

window.onload = function() { 
    CheckInput.init();
    TestSound.init();
};

或

window.addEventListener("load", CheckInput.init.bind(CheckInput));
window.addEventListener("load", TestSound.init.bind(TestSound));

Any explanations on what is going wrong here much appreciated!

您必须创建一个函数，用作事件触发时调用的处理程序。您可以使用 bind 或函数表达式来完成此操作，但如果同时使用这两种方法，那么当事件发生时只会创建另一个函数，而 init 方法则不会根本没有打电话。