Unique instances of Javascript self-executing anonymous functions

I have created the PHP side of a modular AJAX/PHP framework and now I am trying to implement the client side.

From my previous experience with modular web applications I know that sometimes multiple instances of one particular module are needed. For example, a web based two player game with page parts for each user.

On PHP side I have assigned a unque ID to each constructed instance of the module and I can pass this UID to the browser but I have no idea how to im开发者_如何学运维plement the Javascript side of this module instance.

Modules can be loaded all in one go or loaded separately through AJAX (I am using jQuery).

Now I am using a modular approach that I found in some article, but I can redesign it in some other way if that would help to solve this issue without sacrifising modularity and private/public code separation. For now let's say I have a js file with the following:

//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 ));

I am using Smarty for templates. Let's say, I have a simple module template like this:

<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>

I have set up the server side so each module automatically appends additional template with 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>

I am not experienced with advanced Javascript topics so it is unclear to me how I can create a separate instance of MyModule for each module which gets construced server-side? Is it possible at all to create instances of self-executing anonymous functions? If not, then how can I implement and clone Javascript objects with separated private/public code?

---

My recommendation is to keep the client side and server side loosely coupled. Try to build your modular client application completely with HTML/JS without PHP tricks on it. As I understand, each of your module (or UI component) need to be loosely coupled from the others. In such case there are several other concerns you might need to look for:

• How to keep your UI component structure (html), presentation (css) and behavior (JS) self contained (for example in a single folder), so that it can live or die independently
• How these self contained components interact with each other
• How to manage the configurations/settings of your UI components
• Should you be using MVVM or MVC pattern to organize and bind the view to your PHP model
• Who decides when to create/show/hide your UI components (for example based on URL for bookmarking)

If your client is a large and complex application, you might need to look for other concerns such as JS optimization, unit testing, documentation, product sub modules, etc.

Have a look at the BoilerplateJS Javascript reference architecture we put forward at http://boilerplatejs.org. It suggests ways to address all concerns I discussed above.

---

Since you are already using jQuery, you could create a jQuery plugin. The plugin should behave the way you need, and I believe you won't even need a unique ID. Considering each of your module's instance is contained in a div with class module-container, your jQuery code for adding client-side behavior to the divs would be something like this:

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

The minimal plugin code would be (considering it's in a separate .js file):

(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);

If you are using jQueryUI, I also recommend you also look into the "widget factory" (intro, docs), which serves as a base for building powerful, normalized jQuery plugins.