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

关键词：

【中文标题】在应用程序中使用 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)
   

【讨论】：

如何绑定到表单的 ajax：使用 JQuery/Rails UJS 在 typescript 中取得成功

】如何绑定到表单的ajax：使用JQuery/RailsUJS在typescript中取得成功【英文标题】：Howtobindtoaform\'sajax:successintypescriptwithJQuery/RailsUJS【发布时间】：2021-06-3015:00:42【问题描述】：我正在使用Rails6、webpacker和ts-loader。我安装了@types/jquery... 查看详情

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

】在jQuery中使用BIND或ON函数的最佳实践[重复]【英文标题】：BestpracticeusingBINDorONfunctionsinjQuery[duplicate]【发布时间】：2013-04-1202:24:15【问题描述】：最近jQuery团队开始推荐使用on而不是bind将事件绑定到DOM。我想知道它们之间是否... 查看详情

表单在 Django 中没有绑定

...与数据绑定。我不完全确定为什么会这样。我正在开发的应用程序使用Angular作为前端，所以我没有在我的HTML中使用Django的表单类，但它应该没关系，因为Django的表单类只是创建HTML小部件？login.h 查看详情

Java 数据绑定最佳实践

...用的所有最佳实践。特别是我现在正在开发一个Java桌面应用程序（在UI层使用Swing），我对与Swing组件进行数据绑定的最佳实践特别感兴趣。例如，我可以在模型层有一个模型对象列表，我需要在JTabl 查看详情

如何在 ajax 帖子上使用 jquery 验证模型绑定表单？

】如何在ajax帖子上使用jquery验证模型绑定表单？【英文标题】：Howtovalidatemodelboundformusingjqueryonajaxpost?【发布时间】：2019-11-1401:04:53【问题描述】：我正在使用具有必需标签的模型绑定字段的mvc表单。但是通过序列化表单使用ajax... 查看详情

vue.js表单控件绑定(代码片段)

Vue.js表单控件绑定在Web应用中，我们经常会使用表单向服务端提交一些数据，而通常也会在表单项中绑定一些如input、change等事件对用户输入地数据进行校验、更新等操作。在Vue.js中、我们可以使用v-model指令同步用户输... 查看详情

如何在淘汰赛 foreach 绑定中使用表单

】如何在淘汰赛foreach绑定中使用表单【英文标题】：Howtouseforminsideknockoutforeachbinding【发布时间】：2019-07-2505:45:57【问题描述】：我有一个显示作者列表的页面，我希望能够为每个作者上传他们的图片。我在foreach中有一个表单（... 查看详情

存储库模式的最佳实践？

...】：2015-03-0919:42:00【问题描述】：repositorypattern用于MVCWeb应用程序框架的上下文中，以将特定的存储检索机制与控制器分离。每当我最终使用这种模式时，每个唯一查询都会导致存储库类中的方法爆炸式增长。例如，在我之前链... 查看详情

jquery使用案例

表单验证Dom实现表单验证通过在form标签的submit上绑定一个onclick事件，用户点击事，触发这个事件，执行Checkvalid()函数进行对表单中的元素值验证，验证通过之后，继续让submit之行自己的事件，post表单内容到服务器，如果验证不... 查看详情

使用淘汰赛动态更新 Jquery Mobile SPA 中的详细信息页面的最佳方法

...：2015-03-3015:49:30【问题描述】：我使用JqueryMobile构建单页应用程序(SPA)，我使用Knockout.js进行模型和数据绑定。在应用程序中，我有一个列表视图来显示食物菜单。 查看详情

微信小程序复杂对象的双向绑定(附代码可直接使用)(代码片段)

...和父组件双向绑定。但是这里却出现了问题，本人先使用vue的方式将list直接做整体绑定。<k-input-group2mode 查看详情

微信小程序复杂对象的双向绑定(附代码可直接使用)(代码片段)

...和父组件双向绑定。但是这里却出现了问题，本人先使用vue的方式将list直接做整体绑定。<k-input-group2mode 查看详情

如何在 JQuery 表单构建器中使用 JSON 呈现表单

...时间】：2021-10-2220:21:34【问题描述】：我有一个简单的Web应用程序，我可以在其中创建表单并将其JSON保存在数据库中，然后获取相同的JSON并将其渲染回来，所有这些都是使用在线提供的JqueryFormBuilder构建的。现在，我正在努力... 查看详情

我的未绑定（菜单）子表单出现在数据表中

...3-03-2517:58:22【问题描述】：我使用未绑定的表单作为我的应用程序的菜单/导航。菜单表单具有标签的VBA“点击”事件。就是这样。当我将其作为子表单添加到绑定到其中一个表的拆分表单时，“菜单”子表单将显示为子数据表... 查看详情

应用程序设置绑定最佳实践

】应用程序设置绑定最佳实践【英文标题】：Applicationsettingsbindingbestpractices【发布时间】：2017-05-2510:50:59【问题描述】：我一直在努力研究如何最好地与WinRT/UWP应用程序中绑定级别的设置“交互”。我一直在寻找这方面的最佳实... 查看详情

在 html 表单提交上发布有序列表内容的最佳方式是啥？

...【发布时间】：2011-04-1709:36:54【问题描述】：过去我一直使用隐藏字段，在提交按钮onClick事件中，我使用自定义代码将列表内容（li元素的文本）填充到隐藏表单字段中， 查看详情

在 Laravel 5.4 中创建表单的最佳方法是啥？

...、最有效的方法是什么？我正在创建一个包含许多表单的应用程序，并且大多数字段看起来都一样：<labelfor="n 查看详情

使用 Spring MVC 的动态表单和数据绑定

...发布时间】：2014-06-0923:15:24【问题描述】：在我的SpringMVC应用程序中，我需要实现一个动态问卷表单：我有N个问题，每个问题有3个选项。所以在我的页面中我会有这样的东西：|Question1|1|2|3||Question2|1|2|3||Question3|1|2|3||... 查看详情