重构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官网。