Question

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

处理大量具有不同数据的表单的建议方法是什么？现在正在尝试采用结构化方法为每个页面设置一个js“类”，使用init，wireClickEvents等来尝试使所有内容符合。
除了在js文件中抛出一堆函数之外，是否存在创建重复jQuery代码或任何类型的结构化结构的“最佳实践”？

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!")
})();

我认为blog entry是一个很好的介绍。

您面临的第二个问题是如何避免javascript代码中的所有重复。你有几种武器可以解决这个问题。

函数 - 这种接缝显而易见，但经常忘记将公共代码重构为可以完成的函数。在您的情况下，这将是将json响应中的值复制到表单中的功能，就像
高阶函数 - 或作为数据 - 或回调函数，因为它们通常在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)
   }

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

3 个答案: