Javascript模块模式和子模块初始化的模式_Javascript_Design Patterns

Javascript模块模式和子模块初始化的模式

javascript design-patterns

Javascript模块模式和子模块初始化的模式,javascript,design-patterns,Javascript,Design Patterns,我正在启动一个新项目，我正在回顾我的最佳实践，试图防止任何问题，同时也看看我养成了哪些坏习惯我对如何使用module/submodule模式在Javascript中处理初始化序列不太满意比方说，我的代码最终会是这样的 FOO.init() FOO.module1.init() FOO.module2.init() FOO.module3.init() FOO.module4.init() 在全球范围内我基本上在做（为了简洁起见，省略了错误检查和细节）：用于初始化我知道我以前读过这篇文

我正在启动一个新项目，我正在回顾我的最佳实践，试图防止任何问题，同时也看看我养成了哪些坏习惯

我对如何使用module/submodule模式在Javascript中处理初始化序列不太满意

比方说，我的代码最终会是这样的

FOO.init()
FOO.module1.init()
FOO.module2.init()
FOO.module3.init()
FOO.module4.init()

在全球范围内

我基本上在做（为了简洁起见，省略了错误检查和细节）：

用于初始化

我知道我以前读过这篇文章，但现在我找不到合适的搜索词来查找文章。是否有一个经过深思熟虑和测试的模式来处理像这样的选址初始化

谢谢

编辑：在重读这篇文章时，我想一点背景知识会告诉你答案

在我的例子中，每个模块/子模块都在自己的文件中。基本模块定义站点的基本功能，子模块启用不同的功能。例如，一个子模块可以在搜索框上连接自动完成，另一个子模块可以将静态标题图像转换为旋转横幅。子模块由CMS启用/禁用，因此我确实希望在基本模块内分离显式调用，以便CMS可以管理所有内容。我也知道有一些特定于CMS的方法可以实现这一点，但我正在寻找一种通用Javascript模式来实现这一点，以便在可能使用不同CMS的项目之间提供一致性和可恢复性。

我个人有不同的编码风格。这是其中之一。另一种基本上是模仿

这取决于我是否需要向其他用户提供公共API，哪个主干网做得更好。对于初始配置，我更喜欢使用

init

函数驱动模块，对于其余模块，则完全由事件驱动

[编辑]

鉴于编辑后的问题，我对此有不同的模式。在我的例子中，每个文件在某个对象上定义了一个函数，它是

$.FooBar.plugins

(function() {

    var foo = function() { ... };

    var bar = (function() { ... }());

    myNamespace.plugins["MyPlugin"] = function() {

        ... do stuff
        ... bind to evevnts
    };

}());

然后我们使用一个引导程序，它是这样的：

(function() {

    var needed = function() {
         // Feature detection
    };

    var load = function() { ... };

    var getOptions = function() {
         // Call something on a page by page basis.
    };

    for (var plugin in pluginList) {
         if (needed(plugin)) {
               load(plugin, function() {
                    // get page specific options
                    var options = getOptions();
                    // run plugin
                    myNameSpace.plugins[plugin](options);
                    // If all have been loaded trigger ready handlers
                    if (pluginCurrentCount == pluginCount) {
                         readyTrigger();
                    }
               });
               pluginCount++;
         }
    }

    // start loading plugins after all have been counted
    load.startLoading();

    var readyTrigger = function() {
         // Run all ready handlers
    }

    // Implement your own DOM ready function to run when all plugins
    // have loaded.
    myNameSpace.ready = function(handler) {
         if (isReady) {
             handler();
         } else {
             readyList.push(handler);
         }

    };
}());

这是一个很大的差距和伪代码，但你应该得到的想法。如果这不是令人讨厌的感觉，就质疑它

然后在页面上我们有这样的内容

<html>
<head>
  <script type="text/javascript">

    var pageSpecific = {
         "pluginName": {
              "cssClass": "foobar",
              "submitOnEnter": false,
              ...
         },
         ...
    };

  </script>
  <script src="bootstrapper.js" />
  ...
</head>
<body>
  ...
</body>
</html>


变量页特定={
“pluginName”：{
“cssClass”：“foobar”，
“submitOnEnter”：false，
...
},
...
};
...
...

谢谢。我的真实代码与您的第二个示例更接近，这使我对我的方法感觉更好。你的例子也给了我一些改进的想法。

(function() {

    var needed = function() {
         // Feature detection
    };

    var load = function() { ... };

    var getOptions = function() {
         // Call something on a page by page basis.
    };

    for (var plugin in pluginList) {
         if (needed(plugin)) {
               load(plugin, function() {
                    // get page specific options
                    var options = getOptions();
                    // run plugin
                    myNameSpace.plugins[plugin](options);
                    // If all have been loaded trigger ready handlers
                    if (pluginCurrentCount == pluginCount) {
                         readyTrigger();
                    }
               });
               pluginCount++;
         }
    }

    // start loading plugins after all have been counted
    load.startLoading();

    var readyTrigger = function() {
         // Run all ready handlers
    }

    // Implement your own DOM ready function to run when all plugins
    // have loaded.
    myNameSpace.ready = function(handler) {
         if (isReady) {
             handler();
         } else {
             readyList.push(handler);
         }

    };
}());

<html>
<head>
  <script type="text/javascript">

    var pageSpecific = {
         "pluginName": {
              "cssClass": "foobar",
              "submitOnEnter": false,
              ...
         },
         ...
    };

  </script>
  <script src="bootstrapper.js" />
  ...
</head>
<body>
  ...
</body>
</html>