Question

我打算构建一个应用程序，因为它不是太丰富，否则我可以使用angularjs来达到这个目的。我想将我的JS代码组织成适当的模块化编程方法。

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

});

现在请看一下我用实际代码更新了我的问题

Answer 1

您所犯的最大错误是使用$.each方法所采用的匿名函数的匿名第一个参数。第一个参数只是索引，第二个参数是您要查找的元素。您可以在下面找到工作代码。

不，你不需要在任何地方传递jQuery对象。它是全球性的。它已经无处不在。您可以在下面的代码中看到它。

＆＃13;

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

＆＃13;

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

＆＃13;

使用jQuery构造应用程序

1 个答案: