jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JQuery/JavaScript:重构嵌套函数大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个有趣的jQuery函数.它基本上添加一个链接的点击处理程序,当点击它时,它将加载一个表单以允许用户编辑内容.表单由 AJAX提交,并在完成后显示成功消息.

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

$('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
                }
            })

         })

       }}
   )
}

解决方法

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

版本一:嵌套,带闭包和变量访问:@H_772_7@

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

第二版:较少嵌套,但没有闭包且没有变量访问:@H_772_7@

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,d NOT visible here.
};

版本3:较少嵌套且具有未命名的函数和参数以访问闭包变量:@H_772_7@

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,C)});
};

var onSubmit = function(a,C) {
  var d;
  $.ajax({success: function(data){onSubmitsuccess(data,a,d)}});
}

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

大佬总结

以上是大佬教程为你收集整理的JQuery/JavaScript:重构嵌套函数全部内容,希望文章能够帮你解决JQuery/JavaScript:重构嵌套函数所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。