javascript - jQuery 自执行函数未触发

Question

我正在将我的意大利式 jQuery 代码重构为组件。到目前为止，我已经构建了一个组件，该组件被封装在一个自触发函数中。

$(document).ready(function () {
    debugger;
});

(function () {
    Component.init();

    var Component = {
        init: function () {
            this.cacheDom();
            this.bindEvents();
            debugger;
        },
        cacheDom: function () {
            //Initialize properties
        },
        bindEvents: function () {
            //setup eventhandlers
        },
        function1: function (event) {
            //do some work here
        },
    };
})();

我的 jQuery 正在执行 dom.ready 函数，但我的自执行函数没有执行任何操作。另外，我确实尝试删除自执行函数并初始化 $(document).ready(function) 中的组件，但它没有命中我的调试器已放入 init 函数内..

我多次查看了我的代码，似乎无法弄清楚为什么 Component 根本没有初始化。

Answer 1

您可以通过更新当前的模块模式来解决此问题，例如:

// This is our main Component module
//---------------------------------------------------
var Component = (function() {

  // All private variables here
  //---------------------------------------------------
  var $blog;

  // Place initialization logic here
  //---------------------------------------------------
  var init = function() {
    console.log('Inside init()')
    cacheDom();
    bindEvents();
  };
  
  // Cache all required DOM elements here
  //---------------------------------------------------
  var cacheDom = function() {
    //Initialize properties
    console.log('Inside cacheDom()')
    $blog = $('#blog');
  };
  
  // All event handler setup here
  //---------------------------------------------------
  var bindEvents = function() {
    //setup eventhandlers
    console.log('Inside bindEvents()')
    $blog.on('click', function1);  
  };
  
  // All other methods here
  //---------------------------------------------------
  var function1 = function(event) {
    //do some work here
  };

  // Return the methods you want to make public
  //---------------------------------------------------
  return {
    init,
  };
})();

$(document).ready(function() {
  console.log('Inside document.ready()')
  Component.init();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用此模块，我们确保仅在 DOM 完全准备好时调用 Component.init()。关于此模式的一个更有趣的事情是，我们现在只能从外部访问 init() 公共(public)方法，所有其他私有(private)方法，如 cacheDom()、bindEvents () 无法从外部访问。因此 Component.cacheDom(); 将返回 undefined。我认为除了 init() 之外，您不需要公开任何其他方法，因为您的所有逻辑现在都将在 Component 模块内处理。