Question

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

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

在PHP方面，我为每个构建的模块实例分配了一个unque 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优化，单元测试，文档，产品子模块等。

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

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，我还建议您查看“小部件工厂”（intro，docs），它是构建功能强大的规范化jQuery插件的基础。

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

2 个答案: