アプリケーションでのjQueryフォームバインディングコードのベストプラクティス

Question

私たちは、サーバーサイドコードに対するjQuery JSON呼び出しの量が多いアプリケーションを用意しています。このため、レスポンスを解析して適切な値をフォームにバインドするための大量のバインディングコードがあります。これは2つの部分の質問です。

1. すべてが異なるデータを持つ多数のフォームを処理するために推奨されるアプローチは何ですか。今は、init、wireClickEventsなど、各ページのjs "クラス"を設定する際の構造化アプローチをとって、すべてのものを順応させようとしています。

2. jsファイルに一連の関数を投げる以外に、繰り返しjQueryコードや任意の種類の推奨構造を作成する際の「ベストプラクティス」はありますか？

Answer 1

ない100％（あなたが好む場合、またはウィジェット）をすべての重要なクライアント側のUI構造のために、あなたが求めているが、個人的に、私は私がJavaScriptの「クラス」を作成し、MochiKitを使用するかわから例。これらは、もちろん、どのように自分自身にデータを設定するかを知っています。

JavaScriptでブラウザ用のUIコードを記述することは、他の種類のアプリケーション用のUIコードを書くことと変わりありません。クラスを作成し、必要に応じてインスタンスを生成し、データを入力したり、イベントなどをスローさせたりします。

私はこれを夜中にしていますか？ :)

---

EDIT：言い換えれば、ほとんどの場合、あなたがやっていることをやってください。あまりにも多くの初心者がいるJavaScriptのハッカーは、1つのファイル内にあるもの以外の特定のものの一部ではないように見える不十分な機能をたくさん書いています。希望は意味をなさない。

Answer 2

私はあなたのために複数の挑戦があると思います。最初の質問あなたが名前の衝突を戦うか、JavaScriptでのモジュールのための実証済みのパターンの

form1validate 
form1aftersubmit 
form2validate 
form2aftersubmit 

一つのようなあなたの関数に名前を付ける必要がないように名前空間を構築する方法、すなわち、javascriptのコードを構造化する方法であるが、使用することです新しい命名スコープを構築するための無名関数。基本的な考え方は、私はこのblog entryが良い入門と思い、次のコード

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

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

でSHONです。

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

1. 機能 - この継ぎ目ははっきりしていますが、一般的なコードを機能をリファクタリングすることを忘れることがよくあります。あなたの場合、これはjsonレスポンスの値をフォームにコピーする関数になります。
2. 高次関数またはデータとして機能します。コールバックはJavaScriptでよく呼ばれます。これらはJavaScriptの中で最も強力な武器です。フォームとAjaxの処理の場合は、コールバックを使用してフォームの制御フローの繰り返しを避けることができます。

私は私の頭のうちの一例を構築してみましょうあなたはおそらくknockout.jsあなたは自分のモデルを更新することができますこの方法のようなフレームワークになりますと、フォームが更新されます

// 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) 
    } 

Answer 3

（convinenceのためのjQueryを使用して）自動的に。