重构JS代码 - 让JS代码平面化

js中的嵌套函数用的很多，很牛叉，那为何要平面化?

• 易懂（自己及他人）
• 易修改（自己及他人）

平时Ajax调用写法(基于jQuery)

$.post('url', jsonObj,
                function (data) 
                {
                      if(data)
                      {
                           var tips = $.ligerDialog.tip({ title: 'Tip', content: 'Operation successful!' });
                           setTimeout(function () { tips.close(); }, 2000);
                      }
                      else
                      {
                            var tips = $.ligerDialog.tip({ title: 'Tip', content: 'Operation Failed!' });
                            setTimeout(function () { tips.close(); }, 2000);
                      }
                }
        );

 

缺点是什么？

1. 函数嵌套后，理解起来比较吃力
2. 函数嵌套后，一行函数调用写成了很多行，很容易因为逗号、括号等造成语法错误
3. jQuery和liger在应用代码中强耦合，要是以后要更换UI框架，需要进行地毯式搜索...

 

加入延迟特性 - Deferred

var ajaxHandler = $.post('url', params);
ajaxHandler.done(checkServerResponse);


var checkServerResponse=function(result)
{
      if(result)
       {
             var tips = $.ligerDialog.tip({ title: 'Tip', content: 'Operation successful!' });
              setTimeout(function () { tips.close(); }, 2000);
        }
        else
        {
                var tips = $.ligerDialog.tip({ title: 'Tip', content: 'Operation Failed!' });
                setTimeout(function () { tips.close(); }, 2000);
         }
}

 

释疑：

1. 改后的js与先前的没有很大区别：如果js采用了OO方式编写，再来看这段代码就很清晰了（可以简单的把checkServerResponse理解为一个private的class方法，这样会很容易理解编写意图）
2. 要是有多个ajax请求呢？可以写成$.when($.post('url1'), $.post('url2')).done(this.checkServerResponse);类似于合并的意思，并且checkServerResponse函数的参数是2个，分别对应2个ajax请求的result
3. 要是有多个后续请求呢？可以写成$.when($.post(url)).then(handler1).then(handler2).done(successHandler).always(alwaysHandler).fail(failHandler);

 

用jQuery的事件来解耦 - 不依赖具体技术

先要注册事件：

$(document).on("saveSuccess", onSaveSuccess);
$(document).on("saveFail", onSaveFail);

 

然后改造checkServerResponse函数：

var checkServerResponse= function (result) {
        if (result)
            $(document).trigger("saveSuccess");
        else
            $(document).trigger("saveFail");
    }

 

好处：

逻辑代码具体不依赖于具体技术，比如上面的onSaveSuccess和onSaveFail，可以是下面的ligerUI：

onSaveSuccess: function () {
        var tips = $.ligerDialog.tip({ title: 'Tip', content: 'OK！' });
        setTimeout(function () { tips.close(); }, 2000);
    },
    onSaveFail: function () {
        var tips = $.ligerDialog.tip({ title: 'Tip', content: 'Fail！' });
        setTimeout(function () { tips.close(); }, 2000);
    }

 

也可以是下面的：

onSaveSuccess: function () {
        alert("OK");
    },
    onSaveFail: function () {
        alert("Fail");
    },

 

其实就是接口隔离的原理。

 

用Pub/Sub模式来解耦 - 不依赖具体技术

这种方式比起上面jQuery原生的事件处理方式更加专业，比如：amplify。

使用方式就看基本类似，如下：

amplify.subscribe("saveSuccess", this.onSaveSuccess);
amplify.subscribe("saveFail", this.onSaveFail);


checkServerResponse: function (result) {
        if (result)
            amplify.publish("saveSuccess");
        else
            amplify.publish("saveFail");
}

 

amplify比jQuery原生的事件好的地方在于amplify支持优先级，并且可以在订阅函数中控制是否继续执行后续的订阅函数，具体用法大家可以参考amplify官网。