关注点分离和 JQuery AJAX 回调

Question

我正在开发一个用于债务人管理的 Web 应用程序，我正在重构代码并尝试遵守关注点分离原则。但是 AJAX 的异步性质让我很头疼。

从 jQuery 对话框中，用户可以为债务人设置一个标志，然后将其存储在数据库中。如果成功，对话框会显示一条通知。到目前为止，我处理了 jQuery Ajax 成功回调函数中的所有内容：验证输入、执行 ajax 请求和更新对话框的内容。

当然这会导致意大利面条代码。

因此我创建了一个 class AjaxHandler，它有一个用于设置标志的静态方法，由对话框调用。我认为对话框可以根据 AjaxHandler 的 return 值自行更新，但我没有考虑异步性。

以下问题有助于解决 return 值。

How do I return the response from an asynchronous call?

但是如何在不违反SoC原则的情况下更新对话框呢？

编辑

$("#button").on("click", function() {
    var returnValue = AjaxHandler.setFlag();
    if(returnValue) { $("#div").html("Flag set"); }
    else { $('#div").html("Error setting flag");
});

class AjaxHandler { 
    static setFlag(){
        $.ajax({
            type: "POST",
            url: "ajax/set_flag.php",
            success: function(returndata){
            return returndata; //I know this does not work because of                         
            //ASYNC,but that is not the main point.                                                                        


        }
        }
    })

Answer 1

考虑在这里使用事件？

$("#button").on("click", function() {
  $('body').trigger('getdata', ["", $('#div')]);
});
$('body').on('getdata', function(event, datasent, myelement) {
    var attach = event.delegateTarget;// the body here
    var getAjax = $.ajax({
        type: "POST",
        url: "ajax/set_flag.php",
        data: datasent // in case you need to send something
      })
      .done(function(data) {
        $(attach).trigger('gotdata', [data, myelement]);
      });
    getAjax.fail(function() {});

  })
  .on('gotdata', function(event, datathing, myelement) {
    myelement.html(!!datathing ? "Flag set", "Error setting flag");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

请注意，在这些事件处理程序中，您还可以调用一些函数，为该函数传递一个命名空间，基本上按照您的设计进行操作。

Answer 2

有很多方法可以处理异步响应，但是 jQuery 的方法略有不同，所以当您已经在使用 jQuery 时，请这样处理：

$('#button').on('click', AjaxHandler.setFlag)

class AjaxHandler {
  static setFlag () {
    this.loading = true
    this
      .asyncReq('ajax/set_flag.php')
      .done(function () {
        $('#div').html('Flag set')
      })
      .fail(function (err) {
        $('#div').html('Error setting flag. Reason: ' + err)
      })
      .always(function () {
        this.loading = false
      })
  }

  asyncReq (url) {
    return $.ajax({
      type: 'POST',
      url: url
    })
  }
})

关注点分离和 JQuery AJAX 回调

Separation of concerns and JQuery AJAX callbacks

javascript

ajax

jquery

design-principles

编辑