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)但它没有达到debugger我放在 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>

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