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

Question

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

根据我之前使用模块化 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 对象？

Answer 1

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

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

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

请查看我们在 < 中提出的 BoilerplateJS Javascript 参考架构a href="http://boilerplatejs.org" rel="nofollow noreferrer">http://boilerplatejs.org。它提出了解决我上面讨论的所有问题的方法。

Answer 2

由于您已经在使用 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，我还建议您也查看“小部件工厂”（简介，docs)，它作为构建强大的标准化 jQuery 插件的基础。