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

Posted

技术标签:

【中文标题】在应用程序中使用 jQuery 表单绑定代码的最佳实践【英文标题】:Best practices with jQuery form binding code in an application 【发布时间】:2010-09-07 06:36:43 【问题描述】:

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

    处理大量具有不同数据的表单的推荐方法是什么。现在正在尝试采用结构化方法为每个页面设置一个 js“类”,​​包括一个 init、wireClickEvents 等。试图让一切都符合要求。

    除了在 js 文件中抛出一堆函数之外,是否有创建重复 jQuery 代码或任何类型的推荐结构的“最佳实践”?

【问题讨论】:

【参考方案1】:

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

【讨论】:

【参考方案2】:

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

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

我在这件事上半夜起床吗? :)


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

【讨论】:

【参考方案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 表单绑定代码的最佳实践的主要内容,如果未能解决你的问题,请参考以下文章

在 Angular 12 反应形式中使用 patchValue 绑定表单数组的最佳方法

在 jQuery 中使用 BIND 或 ON 函数的最佳实践 [重复]

在后端 ASP.NET MVC (MEF) 上发布/绑定多个表单

使用 ASP.NET MVC 数据绑定视图模型显示 JQuery 对话框的最佳方式

jquery使用案例

求jquery绑定onkeyup代码