javascript代码实例教程-重构JS代码 - 让JS代码平面化

发布时间:2019-02-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。