使用jQuery的Javascript模块模式

2023年5月4日 226次阅读

我正在尝试掌握可插拔模块的概念,就像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 -->

我现在这样做的方法是在设置模块后在jquery函数内调用MY_LIBRARY.init().

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

问题是如何在dom准备就绪时自行调用MY_LIBRARY和模块,而不使用：

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

更新

我一直在努力,试图复制jquery这样做的方式,所以我做了this piece of code.而不是使用’$’,我使用’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使用插件来做到这一点.
对这个有什么想法吗？

最佳答案 我尝试在模块定义周围使用函数包装器,特别是因为除了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
});
点赞