javascript - Javascript 自执行匿名函数的唯一实例

Question

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

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

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

模块可以一次性全部加载，也可以通过 AJAX 单独加载(我使用的是 jQuery)。

现在我正在使用我在某篇文章中找到的模块化方法，但如果这有助于在不牺牲模块化和私有(private)/公共(public)代码分离的情况下解决此问题，我可以以其他方式重新设计它。现在假设我有一个包含以下内容的 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 实例？是否有可能创建自执行匿名函数的实例？如果没有，那么我如何使用分离的私有(private)/公共(public)代码实现和克隆 Javascript 对象？

Answer 1

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

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

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

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