0

既存の大規模な .NET Web フォーム アプリケーションに JavaScript モジュール パターンを実装する方法を設計する必要があります。現在、ルールはなく、多くの JavaScript コードがグローバル変数を使用しています。問題は、サーバーと JavaScript クライアント コード間の通信にもあります。現在、多くの JavaScript 関数がコード ビハインド クラスから呼び出され、ページにインライン化されています。

現在の JavaScript の使用例

サーバー コントロールは、一部の JavaScript ファイルへのリンクを要素に追加して、<head>要素がダウンロードされるようにします。ファイルには、1 つ以上のグローバル関数が含まれています。次に、サーバー コントロールは、次のように、必要なときにいつでもこのグローバル関数を呼び出します。

string script = string.Format("GlobalFunction1('{0}');", param);

<body>そして、この文字列はHTML の要素内のどこかに挿入されます。ルールはなく、サーバーは必要なときにグローバル関数を呼び出すことができます。

改善の主な目標は次のとおりです。

  • サーバー側のコードをクライアント側の JavaScript から分離します。これは、JavaScript グローバル関数の無秩序なインライン呼び出しがないことを意味します。
  • 相互に依存しない JavaScript 自己機能モジュール。
  • JS モジュールは、グローバル スコープに何も公開しないでください。
  • すべての JS モジュールには、それ自体を初期化する場所が 1 つしかありません。
  • サーバー側は、JS モジュールの初期化にいくつかのパラメーターを入力できる必要があります。
4

1 に答える 1

0

これが私が持ってきたアプローチです：

サーバー側ではどのように見えるでしょうか

  • すべてのコントロールには独自の JavaScript モジュールがあります
  • <div>すべての Control は、そのルート要素内にラップされます。
  • サーバーは、すべてのページ ライフサイクルでこのヘルパー メソッドを呼び出すことができます。このパラメーターは、イベント呼び出し時に HTML5 の属性としてScriptModule.AddParam("param_name", "param_value");コントロールのラッパー (div) に追加されます。pre_renderdata-
  • 最後に、サーバーはモジュールを に登録しますScriptModule.Register("module_name", "path_to_js_file", "controlWrapperId")。

これにより、HTML で次の手順が実行されます。

  • <script>ファイル ( ) は、path_to_js_file目的のモジュールのファイルにリンクするページに挿入されます。
  • data-パラメーターは、属性を通じてコン​​トロールのラッパー (div) に追加されます。
  • ページの最後にインラインCore.start("module_name", "controlWrapperId");が挿入され、モジュールの初期化が開始されます。この方法については、クライアント側のセクションで後述します。

クライアント側ではどのように見えるでしょうか

ダウンロードされる最初のファイルはCore.jsファイルで、新しいモジュールの定義に使用される1 つのグローバル変数Coreを登録します。

すべての JavaScript ファイルはモジュールとして定義されます。このモジュールは、グローバル スコープに何も公開してはならず、自己機能する必要があります。テンプレートは次のとおりです。

// 1. first param is module's name
// 2. than the array with dependencies to helpers modules
// 3. than the callback with following parameters
//    a. jQuery object which references wrapper (i.e. div) of this module
//    b. params hash-object, which contains server parameters from wrapper's -data attributes in format
//       {  'param1_name': 'param_val',
//          'param2_name': 'param2_val'  }
//    c. then the external dependencies to helper modules
Core.htmlModule('mod name', ['external', 'deps'], function ($w, params, external, deps) {
    // Here the module initializes itself
    // it can communicate with other modules through Core.publish(); Core.subscribe();
    // it does not return anything, because it is HTML module and so it does not expose anything
});

2 番目のパラメーターは、コードを再利用するための、いわゆるヘルパー モジュールを定義します。通常のモジュールは独立しており、一部の機能を外部に公開できないため、同じコードを共有するものが必要です。これは、ヘルパー モジュールを定義することで実現できます。ヘルパー モジュールは、そのプロパティの一部を公開し、通常のモジュールから参照できます。

于 2013-09-16T06:10:13.847 に答える