3

2種類のフォームがある1ページがあります。上部にタイプAの単一のフォームがあり、その下にタイプBのフォームが1つ以上あります。

Module pattern + jQueryを使用して、フォーム上のすべてのイベントを接続し、検証、ajax呼び出しなどを処理します。

これは、フォームAのようにシングルトンを定義し、フォームBのように再利用可能なオブジェクトクラスを定義するための好ましい/有効な方法ですか？prototypeそれらは非常に似ており、オブジェクト、プロパティ、、newまたは別のパターンを使用する必要があるかどうかはわかりません。すべてがうまくいくようですが、いくつかの重要なエラーが見当たらないのではないかと思います。

Form Ajavascriptは次のようになります。

var MyProject.FormA = (function() {
  var $_userEntry;
  var $_domElementId;

  var validate = function() { 
    if($_userEntry == 0) {
      alert('Cannot enter 0!');
    } 
  }
  var processUserInput = function() {
    $_userEntry = jQuery('inputfield', $_domElementId).val();
    validate();
  }
  return {
    initialize: function(domElementId) {
      $_domElementId = domElementId;
      jQuery($_domElementId).click(function() {
        processUserInput();
      }
    }
  }

})();
jQuery(document).ready(function() {
  MyProject.FormA.initialize('#form-a');
});

Form B、は1回または複数回初期化され、次のように定義されます。

var MyProject.FormB = function() {
  var $_userEntry;
  var $_domElement;

  var validate = function() { 
    if($_userEntry == 0) {
      alert('Cannot enter 0!');
    } 
  }
  var processUserInput = function() {
    $_userEntry = jQuery('inputfield', $_domElement).val();
    validate();
  }
  return {
    initialize: function(domElement) {
      $_domElement = domElement;
      jQuery($_domElement).click(function() {
        processUserInput();
      }
    }
  }

};
jQuery(document).ready(function() {
  jQuery(".form-b").each(function() {
    MyProject.FormB().initialize(this);
  });
});
4

2 に答える 2

2

両方のモジュールは、newの使用を妨げるオブジェクトを明示的に返します。

プロトタイプの継承は、このパターンでの達成を隠す方法とは実際には互換性がありません。確かに、validateメソッドが定義されたプロトタイプフォームオブジェクトを使用してこれを書き直すことはできますが、そうすると、このメソッドが表示され、カプセル化が失われます。

プロトタイプの低メモリフットプリントと迅速なオブジェクト初期化（共有メソッドは1回だけ存在し、インスタンス化は一定時間で実行されます）、またはわずかなパフォーマンスの低下を伴うモジュールパターンのカプセル化（複数定義された同一メソッド、すべてのメソッドを毎回作成する必要があるため、オブジェクトのインスタンス化が遅くなりました）

この場合、パフォーマンスの違いは重要ではないことをお勧めしますので、好きなものを選んでください。個人的には、それらの間にはあまりにも多くの重複があり、私はそれらを統合する傾向があると思います。本当にAがシングルトンである必要がありますか？誤って2回インスタンス化される危険性は何ですか？この問題は、おそらく過剰に設計されているようです。本当にシングルトンが必要な場合は、非シングルトン（B）クラスを次のようにラップします。

var getSingleton = function() {
    var form = MyProject.FormB();
    form.initialize("#form-a");
    console.log("This is the original function");
    getSingleton = function() {     
        console.log("this is the replacement function");
        return form;
    }
    return form;
}
于 2010-07-22T08:10:47.210 に答える
1

私はあなたが一種のjQプラグインを書く必要があると思います：

(function($) {
    $.fn.formValidator = function() {
        return $(this).each(function() {
            var $_domElement = $(this);
            $_domElement.click(function() {
                if($('inputfield', $_domElement).val() == 0) {
                    alert('Cannot enter 0!');
                }
            });
        });
    };
})(jQuery);

この場合、jQ要素メソッドモジュールを拡張し、ページ内の任意の数の要素に使用できるようになります（単一または複数の要素のコレクション用）。また、チェーン可能になります。

使用法：

$('#form-a').formValidator();
$('.form-b').formValidator();

または

$('#form-a, .form-b').formValidator();

もちろん、モジュールを使用してこの関数を格納できます。

ProjectModule.formValidator = function(selector) {
    return $(selector).each(function() {
        var $_domElement = $(this);
        $_domElement.click(function() {
            if ($('inputfield', $_domElement).val() == 0) {
                alert('Cannot enter 0!');
            }
        });
    });
};

使用法：

ProjectModule.formValidator('#form-a, .form-b');
于 2010-07-22T05:44:42.887 に答える