Structure application by using jQuery

Question

I am going to build an application as it is not too much rich otherwise I can use angularjs for that purpose. I wanted to organize my JS code into proper modular programming approach.

E.g

   var SignUpModule = {
     elem: $('#id'), // unable to access jquery object here
     init: function (jQuery) {
       alert(jQuery('.row').html());
    }
};

 var application = {
modules: [],
addModule: function (module) {
    this.modules.push(module);
},
run: function (jQuery) {
    _.each(this.modules, function (module) {

        //Iterate each module and run init function
        module.init(jQuery);
    });


    }
  }


jQuery(document).ready(function () {
    application.addModule(SignUpModule);//add module to execute in application

    application.run(jQuery);//Bootstrap application

});

Please now look at it I have updated my question with actual code

Answer 1

The biggest mistake you've done is using anonymous first parameter of an anonymous function taken by $.each method. The first argument is just index, and the second argument is an element you were looking for. Below you can find working code.

And no, you don't need to pass jQuery object everywhere. It's global. It already is everywhere. You can see it in the code below.

var SignUpModule = {
  elem: $('.row'), //jQuery works fine here
  init: function () {
    alert(this.elem.html());
  }
};

var application = {
  modules: [],
  addModule: function (module) {
    this.modules.push(module);
  },
  run: function () {
    $.each(this.modules, function (index, module) { //this function takes 2 parameters
      //Iterate each module and run init function
      module.init();
    });
  }
}

//document.ready
$(function () {
    application.addModule(SignUpModule);//add module to execute in application
    application.run();//Bootstrap application
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">alert <b>me!</b></div>