Javascript 自执行匿名函数的独特实例答案

【问题标题】：Unique instances of Javascript self-executing anonymous functionsJavascript 自执行匿名函数的独特实例
【发布时间】：2011-10-28 06:07:12
【问题描述】：

我已经创建了模块化 AJAX/PHP 框架的 PHP 端，现在我正在尝试实现客户端。

根据我以前使用模块化 Web 应用程序的经验，我知道有时需要一个特定模块的多个实例。例如，基于 Web 的两人游戏，每个用户都有页面部分。

在 PHP 方面，我为模块的每个构造实例分配了一个唯一 ID，我可以将此 UID 传递给浏览器，但我不知道如何实现此模块实例的 Javascript 端。

模块可以一次性加载，也可以通过 AJAX 单独加载（我使用的是 jQuery）。

现在我正在使用我在一些文章中找到的模块化方法，但如果这有助于解决这个问题而不牺牲模块化和私有/公共代码分离，我可以用其他方式重新设计它。现在假设我有一个包含以下内容的 js 文件：

//Self-Executing Anonymous Func
(function( MyModule, $, undefined ) {

    // My Uid
    MyModule.UID = "";

    //Public Method
    MyModule.onLoad = function() {
       alert("Hey, you loaded an instance of MyModule with UID " + MyModule.UID);      
    };

    //Private Methods follow
    function somethingPrivate( ) {

    }    
}( window.MyModule = window.MyModule|| {}, jQuery ));

我正在使用 Smarty 作为模板。比方说，我有一个像这样的简单模块模板：

<div id="{$contents.moduleuid}">
here goes the contents of the module which can be accessed from MyModule Javascript code by using this unique moduleuid
</div>

我已经设置了服务器端，所以每个模块都会自动添加带有 Javascript 的附加模板：

    <script type="text/javascript">
    /*
    TODO: here I have access to the {$contents.moduleuid} 
    But I have no idea what to put here to create a unique instance of MyModule
 (also it might need loading js file if it was not loaded yet) and I should also set for
 this instance MyModule.UID to {$contents.moduleuid} 
and also call MyModule.onLoad for this instance after it has loaded its Javascript.  
    */
    </script>

我对高级 Javascript 主题没有经验，所以我不清楚如何为每个在服务器端构建的模块创建一个单独的 MyModule 实例？是否有可能创建自执行匿名函数的实例？如果没有，那么我如何使用分离的私有/公共代码实现和克隆 Javascript 对象？

【问题讨论】：

标签： javascript oop instance modular

【解决方案1】：

由于您已经在使用 jQuery，您可以创建一个 jQuery 插件。该插件应该按照您需要的方式运行，我相信您甚至不需要唯一的 ID。考虑到您的每个模块实例都包含在类 module-container 的 div 中，您用于向 div 添加客户端行为的 jQuery 代码将是这样的：

$(function(){
    // DOM content is loaded
    $('.module-container').MyPluginName();
});

最小的插件代码是（考虑到它在一个单独的 .js 文件中）：

(function($){
  $.fn.MyPluginName = function() {  
     // Return this.each to maintain chainability
    return this.each(function() {
      // Keep a reference to your unique div instance.
      var $this = $(this);
      // Plugin logic here
    });
  };
})(jQuery);

如果您使用 jQueryUI，我还建议您查看“widget factory”（intro、docs），它是构建强大的规范化 jQuery 插件的基础。

【讨论】：

【解决方案2】：

我的建议是保持客户端和服务器端松散耦合。尝试完全使用 HTML/JS 构建您的模块化客户端应用程序，而不使用 PHP 技巧。据我了解，您的每个模块（或 UI 组件）都需要与其他模块松散耦合。在这种情况下，您可能需要寻找其他几个问题：

如何保持您的 UI 组件结构 (html)、表示 (css) 和行为 (JS) 独立（例如在单个文件夹中），以便它可以独立生存或死亡
这些独立组件如何相互交互
如何管理 UI 组件的配置/设置
您应该使用 MVVM 还是 MVC 模式来组织视图并将其绑定到您的 PHP 模型
谁来决定何时创建/显示/隐藏您的 UI 组件（例如基于 URL 进行书签）

如果您的客户端是大型复杂的应用程序，您可能需要寻找其他关注点，例如 JS 优化、单元测试、文档、产品子模块等。

看看我们在http://boilerplatejs.org 提出的 BoilerplateJS Javascript 参考架构。它提出了解决我上面讨论的所有问题的方法。

【讨论】：