在函數上調用函數-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（）更好，因為它不需要中間數組來保存值。

“成功”處理程序顯示“三元運算符”的使用，也稱為條件表達式。 您想知道要顯示的模態：這是您如何選擇它，然后執行一個且只有一個“ show”操作。 它更容易調試。

對於“錯誤”處理程序，每次設置消息時，只需使用JSON調用makeMessages（）並獲取所需的字符串數組即可。 因為您必須在alert-*-fields中找到messages字段，所以我調用end（），它將當前的jquery上下文彈出一次搜索（從“查找”到最初的$（）調用），然后調用“ show”代替它。

由於您在選定的成功操作結束時調用“返回”，因此根本不需要“其他”語句。 他們是噪音。 您的代碼要么執行其任務，要么進入下一階段。

您可以刪除我的fields = set操作，因為從性能角度來看，每個操作僅被調用一次，因此重復該操作是無害的。 但是，這可以清楚地表明您正在工作的區域。

如果您想瘋狂地處理自己正在做的事情，請將所有決策放在首位（要做什么，要顯示什么），然后將其余的代碼變成純機器，“如何”部分您的代碼。 “錯誤”處理程序變為：

    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() ，這樣代碼只發生一次並且也被很好地命名。