重构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); } } );
缺点是什么？
函数嵌套后，理解起来比较吃力函数嵌套后，一行函数调用写成了很多行，很容易因为逗号、括号等造成语法错误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); }}
释疑：
改后的js与先前的没有很大区别：如果js采用了OO方式编写，再来看这段代码就很清晰了（可以简单的把checkServerResponse理解为一个PRivate的class方法，这样会很容易理解编写意图）要是有多个ajax请求呢？可以写成$.when($.post('url1'), $.post('url2')).done(this.checkServerResponse);类似于合并的意思，并且checkServerResponse函数的参数是2个，分别对应2个ajax请求的result要是有多个后续请求呢？可以写成$.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官网。