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官網
From:http://tw.wingwit.com/Article/program/Web/201404/30638.html
