js高级篇--闭包和立即执行函数

先上一段代码

function formatter(value, row, index) {
         var status = row.STATUS;
         var plan_id = row.PLANID;
         var btn3 = '';
         var str = '';


       if (status == '0' || status == '1') {
           (function (v_plan_id) { //用立即执行函数没问题这里.
               $.ajax({
                   url: SUP_PLAN_CONF.AJAX_URL,
                   async: false,   //要想btn3正常获得新值.ajax请求必须要用同步才行!异步为了体验!同步才是正常顺序
                   data: {
                       'comm': 'getstatus',
                       'token_id': tokenid,
                       'planid': v_plan_id
                   },
                   type: "POST",
                   dataType: "json",
                   success: function success(data) {
                       if (data.code == '1') {
                           if (data.status == '1') { //计算完成了
                               btn3 = '<button class="btn btn-sm green" '
                                   + 'id="btn_calc' + row.PLANID + '" '
                                   + 'οnclick="openCalcWin(' + JSON.stringify(row).replace(/\"/g, "'")
                                   + ' )">指标计算</button>';
                           }
                           else if (data.status == '0') {  //在计算中...
                               btn3 = '<button class="btn btn-sm green" disabled="disabled" '
                                   + 'οnclick="openCalcWin(' + JSON.stringify(row).replace(/\"/g, "'")
                                   + ' )">计算中...</button>';
                           }

                       } else if (data.code == '0') {
                           recordError(LOGINNAME, LOGINIP, 'getstatus', v_planid + '计算错误');
                       }
                   },
                   error: function error(jqXHR) {
                       recordError(LOGINNAME, LOGINIP, 'getstatus', v_planid + 'AJAX请求error');
                   }
               });
           })(plan_id);
       }
       else if (status == '2' || status == '3' || status == '5') {
           btn3 = '<button class="btn btn-sm" disabled="disabled" '
               + 'οnclick="openCalcWin(' + JSON.stringify(row).replace(/\"/g, "'")
               + ' )">指标计算</button>';
       }

       str += btn3;
       return str;
}

代码的目的是: status==0或1时,发送ajax请求getstatus,返回的另一个status=0,就显示"计算中…"按钮; 是1,就显示"计算"按钮,意思是计算完成了.

如果不用闭包的话,只能通过全局变量,然后保存的办法来办了.这样不是很好,因为污染了全局变量,而且看起来low!

我就找了资料,用闭包(formatter里再套个内部函数function (v_plan_id),然后正常的是先定义内部函数,然后调用. 好!理解了这里你不错,这是第二个层次了! 你已经超越一大波人了.

接着是立即执行函数: 你不要以为是什么ES6的新功能,其实不是的,早在ES5时就有了. 只不过你没听过罢了.
它的作用就是,让这被()括起来的一段代码 立即被执行,可以传参. 而且啊,不用先定义,再调用了. 简化咱们的书写!NB不NB?!英霸不英霸?!

最后一个关键点,普通的函数里,这么写就够了. 但是我这个代码里,逻辑都在ajax的success里处理的,要正常让btn3获得新值,必须要用同步! 执行的才是正常代码逻辑,如若不然,你试下,会发现btn3每次返回的都是undefined.
ajax异步只是为了增强用户的体验感!!

总结: ajax要同步; 为了避免污染全局变量,利用闭包; 为了简化函数的书写,利用 立即执行函数.