1

モジュール式の AJAX/PHP フレームワークの PHP 側を作成しましたが、現在はクライアント側を実装しようとしています。

モジュラー Web アプリケーションに関する以前の経験から、1 つの特定のモジュールの複数のインスタンスが必要になる場合があることを知っています。たとえば、各ユーザーのページ パーツを使用する Web ベースの 2 プレーヤー ゲームです。

PHP 側では、モジュールの構築された各インスタンスに一意の 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 オブジェクトを実装および複製するにはどうすればよいですか?

4

2 に答える 2

2

クライアント側とサーバー側を疎結合にしておくことをお勧めします。モジュール式のクライアント アプリケーションを、PHP トリックを使用せずに HTML/JS で完全に構築してみてください。私が理解しているように、各モジュール (または UI コンポーネント) は他のモジュールと疎結合する必要があります。このような場合、探す必要がある他の懸念事項がいくつかあります。

  • UI コンポーネントの構造 (html)、プレゼンテーション (css)、動作 (JS) を自己完結型 (たとえば、1 つのフォルダー内) に保持して、独立して存続または停止できるようにする方法
  • これらの自己完結型コンポーネントが互いにどのように相互作用するか
  • UI コンポーネントの構成/設定を管理する方法
  • ビューを整理してPHPモデルにバインドするためにMVVMまたはMVCパターンを使用する必要がありますか
  • UI コンポーネントを作成/表示/非表示にするタイミングを誰が決定するか (たとえば、ブックマーク用の URL に基づく)

クライアントが大規模で複雑なアプリケーションの場合、JS の最適化、単体テスト、ドキュメント、製品のサブモジュールなど、他の問題を探す必要がある場合があります。

私たちがhttp://boilerplatejs.orgで提唱している BoilerplateJS Javascript リファレンス アーキテクチャをご覧ください。上記で説明したすべての懸念に対処する方法を提案します。

于 2012-09-06T05:31:31.923 に答える
1

すでに jQuery を使用しているため、jQuery プラグインを作成できます。プラグインは必要に応じて動作する必要があり、一意の ID も必要ないと思います。モジュールの各インスタンスが class の div に含まれていることを考慮すると、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 を使用している場合は、強力で正規化された jQuery プラグインを構築するためのベースとして機能する「ウィジェット ファクトリ」( intro、docs )も調べることをお勧めします。

于 2011-08-16T19:35:59.720 に答える