在应用程序中使用 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) 上发布/绑定多个表单