脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-重构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官网。
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-重构JS代码 - 让JS代码平面化全部内容,希望文章能够帮你解决javascript代码实例教程-重构JS代码 - 让JS代码平面化所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。