将方法存储在将在“if”条件下使用的变量中是不好的做法还是不正确？

Posted 2023-05-09

【中文标题】将方法存储在将在“if”条件下使用的变量中是不好的做法还是不正确？

【英文标题】：Is it bad practice or incorrect to store a method in a variable which will be used in an "if" condition?

【发布时间】：2021-05-10 20:51:50

【问题描述】：

这是我在处理基本的 jquery 联系表单验证时遇到的一个普遍问题，我似乎找不到答案。

这是我的意思的一个例子：

（表单动作在此页面开发中设置，稍后更改为消息服务url）

    <form name="contact_form" action="#">
       <input id="name_field" name="name" type="text" required>
       <input id="email_field" name="email" type="email" inputmode="email" required pattern="^\b[\w\.-]+@1[\w\.-]+\.\w2,6\b">
       <textarea id="message_field" name="message" type="text" required>
       <input id="submit" type="submit" value="SUBMIT">
    </form>

下面是我一直在使用的 Jquery 的概括。

 $(function()
    var emailF = $('#email_field');
    var emailStr = emailF.val();
    var nameF = $('#name_field');
    var nameStr = nameF.val();
    var msgF = $('#message_field');
    var msgStr = msgF.val();
    var regex = new RegExp(/^\b[\w\.-]+@1[\w\.-]+\.\w2,6\b/i);

    function blankCheck()
    
    // BELOW line is where the issue happens
       if (nameStr != "" && emailStr != "" && msgStr != "")
          alert ('blankCheck PASS!!!');
          return true;
        else 
          alert ('blankCheck FAIL!!!');
          return false;
       ;
    );


    $('#submit').on('submit',function(e)
       function validateAll()
          if ( blankCheck() && regex.test(emailStr) )
             alert('validateAll PASS!!!');
             $('#submit').val("SENDING...");
      // This is followed by many setTimeout functions that animate elements on current page
           else 
             $('#submit').css('background-color':'red');
             alert('validateAll FAIL!!!');
      // Wanted to include some UX negative feedback animation on button, but browser validation (from html) prevents it from executing (other than ui:error type pseudoclasses)
          ;
       );

       validateAll();

       $.when(validateAll).done(function()
           e.preventDefault();
           var href = $('#contact_form').attr("action");
           $.ajax(
               type: "POST",
               dataType: "json",
               url: href,
               data: $('#contact_form').serialize(),
           );
       );
    );
 );

这会导致首次/初始加载/访问联系页面时出现问题，并将 blankCheck 函数返回为 false。如果正确填写了所有输入，则在页面刷新时，值会保留，并且 blankCheck 测试会通过刷新前失败的相同输入。

...但是！...如果我将blankCheck函数更改为：

    function blankCheck()
       if (emailF.val()!="" && nameF.val()!="" && msgF.val()!="") 
          alert('blankCheck PASS!!!');
          return true;
        else 
          alert('BLANK FAIL!!!');
          return false;
       ;
    );

...它似乎按预期工作。 blankCheck 无需刷新页面即可通过。

所以这让我想知道：将方法存储在将在“if”条件下使用的变量中是不好的做法吗？

这种性质的 Jquery/JS“if”条件中是否需要一个方法，或者是否可以在“if”条件中使用带有存储方法的变量（如第一个示例if (nameStr != "" && emailStr != "" && msgStr != "")）？

我的直觉告诉我，在上面的 jquery 中我的作用域（变量、函数调用等）存在问题，但我仍然是初学者，所以请谨慎对待。

有人对为什么会发生这种情况有很好的解释吗？

【问题讨论】：

您没有存储方法。每次检查变量时，您都不会检查“方法返回值”。您当时正在存储该值，并且将始终是相同的值，尽管该方法返回不同的值。

谢谢豪尔赫。因此，如果要在脚本中使用方法，仅在需要时/在需要时使用它，或者在需要结果值时调用包含该方法的函数？

【参考方案1】：

如果值在测试之前发生更改，则不能在使用之前存储它。

像示例 2 中那样将这些移动到测试内部。这就是这样做的方法

var emailStr = emailF.val();
var nameStr = nameF.val();
var msgStr = msgF.val();

哦，永远不要在表单中调用任何提交 如果您想使用脚本提交表单，那么 form.submit 将被该名称或 ID 覆盖

您需要立即重命名按钮并使用 FORM ID 来附加提交事件：

  $('#contact_form').on('submit',function(e)

使用

<form id="contact_form">
...
 <input type="submit" value="SUBMIT">
</form>

【讨论】：

感谢您的快速回复。第二个例子是我目前在我的脚本中使用的。我只是想知道这两次尝试之间有什么区别。对于一个新人来说，这些似乎是一样的......所以你是说我应该重命名我的提交按钮/输入的ID？

1.删除ID，不需要。 2.将表单NAME改成ID，使用表单ID给提交事件添加evnt监听

您的第一个示例只是在页面加载时存储值，并且不再查看更改的字段值

非常好，谢谢...这是有道理的，为什么在添加有效输入后，blankCheck 在页面刷新之前失败。加载页面的第一个实例读取空白字段，因此空白字段测试失败。