6

サーバー側コードへの大量の jQuery JSON 呼び出しを含むアプリケーションがあります。このため、応答を解析して適切な値をフォームにバインドするためのバインド コードが大量にあります。これは 2 つの部分からなる質問です。

  1. すべてが異なるデータを持つ多数のフォームを処理するための推奨されるアプローチは何ですか。現在、init、wireClickEvents などを使用して、各ページの js「クラス」を設定する際に構造化されたアプローチを取り、すべてを準拠させようとしています。

  2. js ファイルに一連の関数を投げるだけでなく、反復的な jQuery コードや推奨される構造を作成する際の「ベスト プラクティス」はありますか?

4

3 に答える 3

5

おそらく、knockout.jsのようなフレームワークを調べる必要 があります。この方法では、モデルを更新するだけで、フォームが自動的に更新されます。

于 2011-01-07T19:57:55.947 に答える
3

あなたが何を求めているのか100％確実な例ではありませんが、個人的にはMochiKitを使用して、重要なクライアント側UI構造ごとにJavaScript「クラス」（または必要に応じてウィジェット）を作成します。もちろん、これらは自分自身にデータを入力する方法を知っています。

これ以上何を言うべきかわかりません.JavaScriptでブラウザのUIコードを書くことは、私に関する限り、他の種類のアプリのUIコードを書くことと何ら変わりはありません。クラスを構築し、必要に応じてインスタンス化し、データを入力し、イベントをスローさせます。

私はこれで夜中に起きていますか？:)

編集: 言い換えれば、はい - ほとんどの場合、あなたがしていることをしてください。非常に多くの初心者の JavaScript ハッカーが、すべてが 1 つのファイルに含まれていること以外、特定の何かの一部であるとは思えないまとまりのない一連の関数を作成しているのを目にします。それが理にかなっていることを願っています。

于 2008-08-29T17:05:14.733 に答える
0

あなたの課題はたくさんあると思います。最初の質問は、javascript コードをどのように構築するか、つまり、名前の衝突と戦ったり、関数に次のような名前を付けたりしないように名前空間を構築する方法です。

form1validate
form1aftersubmit
form2validate
form2aftersubmit

JavaScript のモジュールで実証済みのパターンの 1 つは、匿名関数を使用して新しい名前付けスコープを構築することです。基本的な考え方は、次のコードで示されています

(function() {
  var foo = 1;
})();

(function() {
  if(foo == 1) alert("namespace separation failed!")
})();

このブログエントリは良い紹介だと思います。

直面する 2 番目の質問は、JavaScript コードでの繰り返しをすべて回避する方法です。これに対していくつかの武器があります。

  1. 関数 - これは明らかな継ぎ目ですが、一般的なコードを実行可能な関数にリファクタリングすることを忘れがちです。あなたの場合、これはjson応答からフォームに値をコピーする関数などになります
  2. 高階関数 (またはデータとしての関数) またはコールバック (JavaScript で頻繁に呼び出されるため)。これらは JavaScript の最強の武器です。フォームと ajax の処理の場合、コールバックを使用して、フォームの制御フローでの繰り返しを避けることができます。

頭から例を作成しましょう（説得力のためにjqueryを使用）

// this is a validator for one form
   var form1validator = function() {
     if($("input[name=name]",this).attr("value").length < 1 &&
        $("input[name=organisation]",this).attr("value").length < 1)
       return "Either name or organisation required" 
   }

   // and this for a second form
   var form2validator = function() {
     if($("input[name=age]",this).attr("value").length < 21
       return "Age of 21 required"
   }

   // and a function to display a validation result
   var displayResult = function(r) {
     $(this).prepend("<span></span>").text(r);
   }

   // we use them as higher order functions like that

   $("#form1").onSubmit(validator(form1validator, displayResult, function() {
     //on submit
     ...send some xhr request or like that
   });

   $("#form2").onSubmit(validator(form2validator, displayResult, function() {
     this.submit() // simply submit form
   });

   $("#form1b").onSubmit(validator(form1validator, function(r) {
     alert("There was an validation error " + r);
   }, function() {
     //on submit
     ...send some xhr request or like that
   });


   // the validator function itself would be defined as

   function validator(formValidator, displayResult, onSubmit) {
     var r = formValidator.apply(this)
     if(typeof(r) === 'undefined')
       onSubmit(this)
     else
       displayResult(r)
   }
于 2011-01-07T19:31:57.103 に答える