Шаблон модуля Javascript с помощью jQuery

Question

Я пытаюсь понять концепцию подключаемых модулей, как jQuery делает с плагинами. Моя цель - разбить мои модули на разные файлы и правильно инициализировать их после того, как dom будет готов в соответствии с jQuery.

Пример

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="my_library.js"></script>
    <script type="text/javascript" src="modules.js"></script>
    <!-- Could be more -->

Я делаю это прямо сейчас, вызывая MY_LIBRARY.init () внутри функции jquery после того, как я установил свои модули.

// my_library.js
var MY_LIBRARY = {
    init: function() {
        var _self = this,
            modules = _self.modules;

        if (modules) {
            for (var i in modules){
                modules[i].init();
            }
        }
    },
    modules: {}
}

// modules.js
MY_LIBRARY.modules.MyModule1 = {

    init: function(){
        // initialize stuff
        return this;
    }

};

MY_LIBRARY.modules.MyModule2 = {

    init: function(){
        // initialize stuff
        return this;
    }

};

$(function(){
    MY_LIBRARY.init();
});

Вопрос в том, как я могу самостоятельно вызывать MY_LIBRARY и модули, когда dom готов, без использования:

$(function(){
    MY_LIBRARY.init();
});

---

Обновление

Я работал над этим, пытаясь воспроизвести способ, которым jquery делает это, поэтому я создал этот кусок кода . Вместо использования '$' я использую 'X $' в качестве своего пользовательского глобального объекта, поэтому я могу сделать что-то вроде:

X$( 'MyModule1', { init: function(){}, doStuff: function(){} });

или

X$('MyModule1').doStuff();

Я думаю, что этот шаблон работает для меня. На данный момент единственное, что я не мог воспроизвести, это что-то вроде:

X$.core.myCoreFunction() { return true; }; // plugin function yay!

X$.myCoreFunction(); // alerts X$.myCoreFunction is not a function

Что довольно странно, поскольку jQuery делает это с помощью плагинов. Есть мысли по этому поводу?

Answer 1

Я бы попробовал использовать функциональную обертку вокруг ваших определений модулей, тем более что вы можете обнаружить, что между вашими модулями много общего, кроме функции init.

Например, здесьЯ определяю функцию lib, которая поможет вам объявить новую библиотеку и автоматически свяжет функцию init с document.ready:

function lib(module) {
  $(function() {
    if (module.init) {
      module.init();
    }
  });

  return module;
}

var MYLIB = lib(function() {
   return {
     init: function() {
       // ...
     }
   };
}());

Вы можете использовать другой вариант на том же шаблоне, ноэто избавит вас от необходимости добавлять много дополнительного кода и позволит одинаково управлять всеми вашими библиотеками.Вы также можете, например, заставить lib возвращать фиктивный объект при его первоначальном вызове, а после document.ready он применяет переданную функцию для генерации реального объекта, что позволит вам полностью избежать явного init:

function lib(moduleMaker) {
  var module = {};
  $(function() {
    moduleMaker(module);
  });
  return module;
}

var MYLIB = lib(function(mylib) {
   mylib.foo = function() {/*...*/};
   // other init stuff, we've already waited for document.ready
});