在應用程序中使用jQuery表單綁定代碼的最佳做法

我們有一個具有大量jQuery JSON調用的服務器端代碼的應用程序。因此，我們有大量的綁定代碼來解析響應並將適當的值綁定到表單。這是一個兩部分問題。在應用程序中使用jQuery表單綁定代碼的最佳做法

什麼是reccomended方法來處理大量的表單都有不同的數據。現在正試圖採取一種結構化的方法爲每個頁面設置一個js「類」，並使用init，wireClickEvents等嘗試讓所有內容都符合規範。
是否有任何「最佳實踐」與創建重複的jQuery代碼或任何類型的reccomended結構，而不是隻是拋出一堆js文件中的函數？

來源

2008-08-29 Sean Chambers

不是100％肯定例如你問什麼，但就個人而言，我用MochiKit，我創建JavaScript的「類」（或窗口小部件，如果你喜歡）爲每顯著客戶端UI結構。當然，這些知道如何用數據填充自己。

我不知道還有什麼可說的 - 就我而言，在JavaScript中爲瀏覽器編寫UI代碼與爲其他類型的應用編寫UI代碼沒有什麼不同。根據需要構建類並實例化它們，使用數據填充它們，讓它們拋出事件等。等等。

我在這上夜嗎？ :)

編輯：換句話說，是的 - 做你在做什麼，大部分。我看到太多新手JavaScript黑客寫了一堆不協調的功能，除了它們都在單個文件中之外，它們看起來並不屬於任何特定的部分。希望這是有道理的。

來源

2008-08-29 17:05:14

我認爲你有多個挑戰。第一個問題是如何構建的javascript代碼，即如何構建命名空間，這樣你就不會打的名字衝突或有命名您的功能，如

form1validate 
form1aftersubmit 
form2validate 
form2aftersubmit

一個成熟的模式在JavaScript的模塊是使用一個匿名函數來構建一個新的命名範圍。其基本思想是在下面的代碼

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

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

SHON我覺得這是blog entry一個很好的介紹。

你面對的第二個問題是如何避免在JavaScript代碼中的所有重複。對此有幾件武器。

函數 - 這個接縫顯而易見，但它經常被遺忘將通用代碼重構成可以完成的功能。在你的情況下，這將是函數將JSON響應中的值複製到表單中，並且像這樣高級函數 - 或函數作爲數據 - 或回調函數，因爲它們通常在javascript中調用。這些是javascript中最強大的武器。在表單和ajax處理的情況下，您可以使用回調來避免表單控制流中的重複。

讓我構建一個例子從我的頭（使用convinence 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-07 19:31:57 ordnungswidrig

你或許應該考慮像knockout.js這樣你就可以只更新模型的框架和形式將更新自動。

來源

2011-01-07 19:57:55

很好的建議，謝謝！ – 2011-04-05 13:41:56

在應用程序中使用jQuery表單綁定代碼的最佳做法

回答

相關問題