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

Question

我們有一個應用程序，它對服務器端代碼進行了大量的jQuery JSON調用。 因此，我們有大量的綁定代碼來解析響應並將適當的值綁定到表單。 這是一個兩部分問題。

1. 處理大量具有不同數據的表單的建議方法是什么？ 現在正在嘗試采用結構化方法為每個頁面設置一個js“類”，​​使用init，wireClickEvents等來嘗試讓所有內容都符合。

2. 是否有任何“最佳實踐”創建重復的jQuery代碼或任何類型的reccomended結構，而不僅僅是在js文件中拋出一堆函數？

Answer 1

你可能應該研究一下像knockout.js這樣的框架。這樣你就可以更新你的模型，表格會自動更新。

Answer 2

不是100％確定你要問的例子，但就個人而言，我使用MochiKit，我為每個重要的客戶端UI結構創建JavaScript“類”（或小部件，如果你願意）。 當然，這些知道如何用數據填充自己。

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

我這個晚上起來了嗎？ :)

---

編輯：換句話說，是的 - 在大多數情況下做你正在做的事情。 我看到有太多新手JavaScript黑客編寫了一堆內容不完整的功能，除了它們都在一個文件中之外，似乎不是任何特定功能的一部分。 希望有道理。

Answer 3

我認為你有多種挑戰。 第一個問題是如何構建javascript代碼，即如何構建命名空間，以便您不打擊名稱沖突或必須將您的函數命名為

form1validate
form1aftersubmit
form2validate
form2aftersubmit

javascript中模塊的一種經過驗證的模式是使用匿名函數來構建新的命名范圍。 基本思想是在以下代碼中

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

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

我認為這篇博文是一個很好的介紹。

您面臨的第二個問題是如何避免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)
   }