JQuery/JavaScript:重构嵌套函数

Question

我有这个有趣的jQuery函数.它基本上添加了一个链接的点击处理程序,当点击它时,它将加载一个表单以允许用户编辑内容.表单由AJAX提交,并在完成后显示成功消息.

大纲如下; 不用说,这很乱.我可以将每个回调作为类方法.还有哪些方法可以重构嵌套函数？我也有兴趣看看是否有一些方法,在父函数中声明变量仍然保留其值到重构后的嵌套函数

$('a.edit').click( function() {

   // ..snipped..
   // get form
   $.ajax({
       success: function() {

         // add form
         // submit handler for form
         $(new_form).submit(function() {

            // submit via ajax
            $.ajax({

                success: function(data) {
                    // display message
                }
            })

         })

       }}
   )
}

Answer 1

我想你的问题有趣的部分是如何在不失去对闭包变量的访问的情况下进行重构。这是我的建议：

版本一：嵌套，带有闭包和变量访问：

   var a;
    $('a.edit').click( function() {
      var b;
      $.ajax({
        success: function() {
          var c;
          $(new_form).submit(function() {
            var d;
            $.ajax({
                success: function(data) {
                   // a,b,c,d are all visible here.
                   // note that a references the same object for all calls of the success function, whereas d is a different variable for each call of submit.
                   // this behaviour is called closure: the 'enclosed' function has access to the outer var
                }
            })
          })
        }
      })
    })

版本二：嵌套较少，但没有闭包，也没有变量访问：

var a;
$('a.edit').click(onEdit);

var onEdit = function() {
  var b;
  $.ajax({success: onEditSuccess});
};

var onEditSuccess = function() {
  var c;
  $(new_form).submit(onSubmit);
};

var onSubmit = function() {
  var d;
  $.ajax({success: onSubmitSuccess});
}

var onSubmitSuccess = function(data) {
  // a is visible (global var)
  // b,c,d NOT visible here.
};

版本三：更少嵌套并使用未命名函数和参数来访问闭包变量：

var a;
$('a.edit').click(function(){onEdit(a)});

var onEdit = function(a) {
  var b;
  $.ajax({success: function(){onEditSuccess(a,b)}});
};

var onEditSuccess = function(a,b) {
  var c;
  $(new_form).submit(function(){onSubmit(a,b,c)});
};

var onSubmit = function(a,b,c) {
  var d;
  $.ajax({success: function(data){onSubmitSuccess(data,a,b,c,d)}});
}

var onSubmitSuccess = function(data,a,b,c,d) {
  // a,b,c,d are visible again
  // nice side effect: people not familiar with closures see that the vars are available as they are function parameters
};