JQuery/JavaScript：重构嵌套函数

我有一个有趣的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
                }
            })

         })

       }}
   )
}

---

您可以轻松地重构它，使其更具可读性。要掌握的关键概念是，您可以在回调中引用命名函数，也可以在匿名函数中引用命名函数。例如：

function clickHandler() {
    alert("Link clicked");
}
$('a').click(clickHandler);

我倾向于根据函数的作用（例如，

loadImage

）来命名函数，而不是根据要触发它们的事件（例如，

clickLink

）来命名函数。这会使代码更清晰，并使以后的更改更容易。在这种情况下，我会这样构造代码：

$(document).ready(function(){
    $('a.edit').click(loadFormStart);

    function loadFormStart() { // get form
        $.ajax({
            success: loadFormEnd
        });
    }

    function loadFormEnd(data) { // add form & handler
        $('new_form').submit(handleFormStart);
    }

    function handleFormStart() { // submit form
        $.ajax({
            success: handleFormEnd
        });
    }

    function handleFormEnd(data) {  // receive form data
        //display message
    }
});

---

<>我也建议你读一个类似的方法，使用一个宾语文字。

有趣的问题。我个人不介意上面的评论。评论是关键的，所以你可以考虑用以下几个词来限定结尾括号：

            } //success: function(data)
        }) //$.ajax({
     }) //$(new_form).submit(

…等等

我还要看看如何正确对齐括号（首先，你的

}

有点神秘）

如果涉及到“通用”嵌套策略，我唯一的另一个建议是将代码移出其他函数。当然，这意味着您将函数标记在内存中，但可能会使其更可读

您也可以考虑与此代码相关的特定策略。例如，不是手动绑定<代码>提交< /代码>到<代码> NeXyFrase<代码>，您可以以某种方式使用<代码> Leave<代码>函数来确保它自动完成吗？< /P>

---

在一个完全不相关的注释中，您可能应该在括号中的每一行末尾添加一些

；

。

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

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

   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.
};

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

   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
};

---

重新使用$（）.live（）--请小心，因为Internet Explorer中的submit事件不会冒泡。据说jQuery解决了这个问题，但我发现我必须绑定到submit按钮的click事件，这显然不是最佳解决方案。我总是远离过度嵌套的构造。另外，任何像样的IDE都不需要文档关闭br阿克茨，那看起来真难看！