javascript - 在函数上调用函数 - Jquery

Question

我编写了一个 JavaScript 文件:

$(function() {
  return $(".ajax-form").on("ajax:success", function(e, data, status, xhr) {
    var model_name;
    model_name = $(this).data('model-name');
    console.log('ajax form success');
    if (model_name === 'contact') {
      return $('#modal-alert-contact').modal('show');
    } else {
      return $('#modal-alert-demo').modal('show');
    }
  }).bind("ajax:error", function(e, xhr, status, error) {
    var elm, messages, model_name;
    model_name = $(this).data('model-name');
    console.log('ajax form error');
    console.log(model_name);
    if (model_name === 'contact') {
      if (xhr.responseJSON["email"]) {
        elm = $('.alert-contact-fields');
        messages = [];
        $.each(xhr.responseJSON, function(id, error_messages) {
          return messages.push(("<li><strong class='titleize'>" + id + "</strong> - can't be blank</li>").replace(/_/g, " "));
        });
        elm.find('.messages').html(messages);
        return elm.removeClass('hide');
      } else {
        elm = $('.alert-contact-fields');
        return elm.addClass('hide');
      }
    } else {
      if (xhr.responseJSON["company_name"]) {
        elm = $('.alert-demo-fields');
        messages = [];
        $.each(xhr.responseJSON, function(id, error_messages) {
          return messages.push(("<li><strong class='titleize'>" + id + "</strong> - can't be blank</li>").replace(/_/g, " "));
        });
        elm.find('.messages').html(messages);
        return elm.removeClass('hide');
      } else {
        elm = $('.alert-demo-fields');
        return elm.addClass('hide');
      }
    }
  });
});

我发现它很困惑，并且重复相同的代码。我想做的是这部分:

        messages = [];
        $.each(xhr.responseJSON, function(id, error_messages) {
          return messages.push(("<li><strong class='titleize'>" + id + "</strong> - can't be blank</li>").replace(/_/g, " "));
        });
        elm.find('.messages').html(messages);
        return elm.removeClass('hide');

我希望该部分成为一个函数，完成此操作后，我将调用该函数以在我的函数中使用它。是否有可能或者有一些技术可以改进我的编码结构？

谢谢!

Answer 1

我想你想要这样的东西:

$(function() {
    var myform = $(".ajax-form");

    var makeMessages = function(json) {
        return $.map(json, function(error_messages, id) {
            return ("<li><strong class='titleize'>" + id + "</strong> - can't be blank</li>").replace(/_/g, " ");
        });
    };

    myform.on('ajax:success', function(e, data, status, xhr) {
        var modal_to_show = ($(this).data('model-name') === 'contact') ? '#modal-alert-contact' : '#modal-alet-demo';
        return $(modal_to_show).modal('show');
    });

    myform.on('ajax:error', function(e, xhr, status, error) {
        var fields;
        if ($(this).data('model-name') === 'contact') {
            fields = $('.alert-contact-fields');
            if (xhr.responseJSON["email"]) {
                return fields.find('messages').html(makeMessages(xhr.responseJSON)).end().removeClass('hide');
            }
            return fields.addClass('hide');
        } 

        fields = $('.alert-demo-fields');
        if (xhr.responseJSON["company_name"]) {
            return fields.find('.messages').html(makeMessages(xhr.responseJSON)).end().removeClass('hide');
        }
        return fields.addClass('hide');
    });
});

makeMessages 是一个函数，它接受 json 对象并返回一组字符串； map() 是一个比each() 更好的函数，因为它不需要中间数组来保存值。

“成功”处理程序显示了“三元运算符”(也称为条件表达式)的使用。您想知道要显示哪个模式:这就是您选择它的方式，然后进行一个且只有一个“显示”操作。调试起来更容易。

对于“错误”处理程序，每次设置消息时，只需使用 JSON 调用 makeMessages() 即可获取所需的字符串数组。因为您必须在alert-*-fields中找到messages字段，所以我调用end()，它将当前jquery上下文弹出一次搜索(从'find'到最初的$()调用)，然后调用'show'而是在它上面。

由于您在所选成功操作结束时调用“return”，因此根本不需要“else”语句。它们是噪音。您的代码要么完成其任务，要么进入下一阶段。

您可以删除我的 fields = 设置操作，因为从性能 Angular 来看，每个操作只会被调用一次，因此重复操作是无害的。但这明确了您在哪个区域工作。

如果你想对自己正在做的事情变得疯狂，那么就把所有的决策放在首位(做什么工作，展示什么)，并使代码的其余部分纯粹是机械的，即“如何做” ' 你的代码的一部分。 “错误”处理程序变成这样:

    myform.on('ajax:error', function(e, xhr, status, error) {
        var handler = (($(this).data('model-name') === 'contact') ? 
                       { 'fieldclass': '.alert-contact-fields', 'objname': 'email' } :
                       { 'fieldclass': '.alert-demo-fields', 'objname': 'company_name' });

        var fields = $(handler.fieldclass);
        if (xhr.responseJSON[handler.objname]) {
            return fields.find('.messages').html(makeMessages(xhr.responseJSON)).end().removeClass('hide');
        }
        return fields.addClass('hide');
    });

此时“makeMessages()”就变成了一个很好、方便的函数，因为它显示了(和名称!好的名称对于维护总是很重要)您正在对 JSON 对象执行的操作。

最后一个(好吧，两个)替代方案:

    myform.on('ajax:error', function(e, xhr, status, error) {
        var drawResults = function(fieldclass, objname) {
            var fields = $(fieldclass);
            if (xhr.responseJSON[objname]) {
                return fields.find('messages').html(makeMessages(xhr.responseJSON)).end().removeClass('hide');
            }
            return fields.addClass('hide');
        };

        return ($(this).data('model-name') === 'contact' ?
                drawResults('.alert-contact-fields', 'email') :
                drawResults('.alert-data-fields', 'company_name'));

        /* Absolutely minimal alternative, but some people find
         * using the apply method obfuscating. */

        return drawResults.apply(this, $(this).data('model-name') === 'contact' ?
                                 ['.alert-contact-fields', 'email'] :
                                 ['.alert-data-fields', 'company_name']);
    });

这不是预先使用字段和决策，而是将所有决策放在最后，并描述一旦预先做出决策将会发生什么。这使用了更熟悉的调用函数的语法。重要的是要看到，drawResults() 已经可以访问 xhr 对象，因此没有必要将其传入。

最后一个可能的提取是将 $(this).data('model-name') === 'contact' 转换为一个函数，例如 isDemo()，这样代码只发生一次，而且命名也很好。