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

重构JS代码：让JS代码平面化2014-06-10 cnblogs Aaronjs中的嵌套函数用的很多，很牛叉，那为何要平面化？

易懂（自己及他人）

易修改（自己及他人）

平时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）;