唯一實例

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插件。