唯一实例

Question

我创建了一个模块化的AJAX/PHP框架的PHP端，现在我想实现客户端。

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

在PHP方面我已经指定unque ID到模块的每个构建的实例，我可以通过这个UID的浏览器，但我不知道如何实现这个模块实例的JavaScript端。

模块可以加载的所有一气呵成或通过AJAX分别装载（我使用jQuery）。

现在我使用的是模块化的方法，我在一些文章中发现，但是我可以重新设计一些其他的方式，如果这将有助于解决这一问题，而sacrifising模块化和私有/公共代码分离。现在让我们说我有一个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模型
• 谁决定n创建/显示/隐藏你的UI组件（例如基于用于书签的URL）

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

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

Answer 2

既然你已经使用jQuery，你可以创建一个jQuery插件。该插件应该以您需要的方式行事，我相信您甚至不需要唯一的ID。考虑到每个模块的实例包含在与module-container类股利，添加客户端行为的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插件。