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() publi c извне, все другие частные методы, такие как cacheDom(), bindEvents(), не доступны извне. Таким образом, Component.cacheDom(); вернет undefined. Я думаю, что кроме init() вам не нужно будет публиковать любой другой метод c, так как все ваши логи c теперь будут обрабатываться внутри модуля Component.