应用程序中 jQuery 表单绑定代码的最佳实践

Question

我们有一个应用程序，其中包含大量对服务器端代码的 jQuery JSON 调用。 因此，我们有大量的绑定代码来解析响应并将适当的值绑定到表单。 这是一个由两部分组成的问题。

1. 处理大量具有不同数据的表单的推荐方法是什么。 现在我们正在尝试采用结构化方法为每个页面设置一个 js“类”，​​其中包含 init、wireClickEvents 等，以尝试使所有内容都一致。

2. 除了在 js 文件中添加一堆函数之外，是否有创建重复 jQuery 代码或任何类型的推荐结构的“最佳实践”？

Answer 1

您可能应该研究像 knockout.js 这样的框架，这样您只需更新模型，表单就会自动更新。

Answer 2

不是 100% 确定您所要求的示例，但就我个人而言，我使用 MochiKit，为每个重要的客户端 UI 结构创建 JavaScript“类”（或小部件，如果您愿意）。 当然，它们知道如何用数据填充自己。

我不知道还有什么可说的——就我而言，用 JavaScript 为浏览器编写 UI 代码与为其他类型的应用程序编写 UI 代码没有什么不同。 构建类并根据需要实例化它们，用数据填充它们，让它们抛出事件等等。

我是否为此彻夜未眠？ :)

---

编辑：换句话说，是的 - 大多数情况下，做你正在做的事情。 我看到太多的 JavaScript 新手编写了一堆内聚性很差的函数，这些函数似乎不是任何特定内容的一部分，除了它们都在一个文件中之外。 希望这是有道理的。

Answer 3

我认为您面临多种挑战。 第一个问题是如何构建 javascript 代码，即如何构建名称空间，这样您就不会遇到名称冲突或必须像这样命名您的函数。javascript

form1validate
form1aftersubmit
form2validate
form2aftersubmit

中模块的经过验证的模式之一是使用匿名函数来构建新的函数。命名范围。 基本思想在以下代码中

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

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

我认为这个 博客条目< /a> 是一个很好的介绍。

您面临的第二个问题是如何避免 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)
   }