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

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

易懂（自己及他人）

易修改（自己及他人）

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

$post(url jsonObj function (data) { if(data) { var tips = $ligerDialogtip({ title: Tip content: Operation successful! }); setTimeout(function () { tipsclose(); } ); } else { var tips = $ligerDialogtip({ title: Tip content: Operation Failed! }); setTimeout(function () { tipsclose(); } ); } } );

缺点是什么？

函数嵌套后理解起来比较吃力

函数嵌套后一行函数调用写成了很多行很容易因为逗号括号等造成语法错误

jQuery和liger在应用代码中强耦合要是以后要更换UI框架需要进行地毯式搜索

加入延迟特性 Deferred

var ajaxHandler = $post(url params);ajaxHandlerdone(checkServerResponse); var checkServerResponse=function(result){ if(result) { var tips = $ligerDialogtip({ title: Tip content: Operation successful! }); setTimeout(function () { tipsclose(); } ); } else { var tips = $ligerDialogtip({ title: Tip content: Operation Failed! }); setTimeout(function () { tipsclose(); } ); }}

释疑

改后的js与先前的没有很大区别如果js采用了OO方式编写再来看这段代码就很清晰了（可以简单的把checkServerResponse理解为一个private的class方法这样会很容易理解编写意图）
要是有多个ajax请求呢？可以写成$when($post(&#;url&#;) $post(&#;url&#;))done(thischeckServerResponse);类似于合并的意思并且checkServerResponse函数的参数是个分别对应个ajax请求的result
要是有多个后续请求呢？可以写成$when($post(url))then(handler)then(handler)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 = $ligerDialogtip({ title: Tip content: OK！ }); setTimeout(function () { tipsclose(); } ); } onSaveFail: function () { var tips = $ligerDialogtip({ title: Tip content: Fail！ }); setTimeout(function () { tipsclose(); } ); }

也可以是下面的

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

其实就是接口隔离的原理

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

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

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

amplifysubscribe(saveSuccess thisonSaveSuccess);amplifysubscribe(saveFail thisonSaveFail); checkServerResponse: function (result) { if (result) amplifypublish(saveSuccess); else amplifypublish(saveFail);}

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