jQuery self executing function not fireing

Question

I'm in the process of refactoring my spaghetti jQuery code into components. So far, I've constructed one component, which is encapsulated in a self-fireing function.

$(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
        },
    };
})();

My jQuery is hitting the dom.ready function, but my self-executing function is not doing anything. Also, I did try to remove the self-executing function and initialize the component in my $(document).ready(function) but it is not hitting the debugger that I have put inside the init function..

I have looked through my code multiple times, and can't seem to figure out why the Component is not initialized at all.

user_1823841 · Answer

You can fix this issue by updating your current module pattern like:

// 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();
});

Using this module we make sure that Component.init() is only called when DOM is fully ready. One more interesting thing about this pattern is that we can now only access the init() public method from outside, all other private methods like cacheDom(), bindEvents() are not accessible from outside. Thus Component.cacheDom(); will return undefined. I think other than init() you will not need to make any other method public, as all your logic will be now handled inside the Component module.

jQuery self executing function not fireing

1 Answers