知识大全 重构JS代码 - 让JS代码平面化

Posted 函数

篇首语:不担三分险,难练一身胆。本文由小常识网(cha138.com)小编为大家整理,主要介绍了知识大全 重构JS代码 - 让JS代码平面化相关的知识,希望对你有一定的参考价值。

重构JS代码 - 让JS代码平面化  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!

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

  易懂(自己及他人)

  易修改(自己及他人)

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

  $ post( url jsonObj function (data) if(data) var tips = $ ligerDialog tip( title: Tip content: Operation successful! ); setTimeout(function () tips close(); ); else var tips = $ ligerDialog tip( title: Tip content: Operation Failed! ); setTimeout(function () tips close(); ); );

  缺点是什么?

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

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

  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(); ); else var tips = $ ligerDialog tip( title: Tip content: Operation Failed! ); setTimeout(function () tips close(); );

  释疑

  改后的js与先前的没有很大区别 如果js采用了OO方式编写 再来看这段代码就很清晰了(可以简单的把checkServerResponse理解为一个private的class方法 这样会很容易理解编写意图)    要是有多个ajax请求呢?可以写成$ when($ post(&# ;url &# ;) $ post(&# ;url &# ;)) done(this checkServerResponse);类似于合并的意思 并且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 = $ ligerDialog tip( title: Tip content: OK! ); setTimeout(function () tips close(); ); onSaveFail: function () var tips = $ ligerDialog tip( title: Tip content: Fail! ); setTimeout(function () tips close(); );

  也可以是下面的

  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 );

cha138/Article/program/Web/201404/30638

相关参考

知识大全 简约JS日历控件代码

简约JS日历控件代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!这篇文章介绍了一款简约JS日历控

知识大全 JS特效代码--一个很Cool的JS菜单效果

JS特效代码--一个很Cool的JS菜单效果  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  &l

知识大全 控制字体大小JS代码

控制字体大小JS代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! <script

知识大全 页面自动最大化特效JS代码

页面自动最大化特效JS代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  代码最常用的代码比较简

知识大全 一段表单JS验证代码

一段表单JS验证代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  <scriptLang

知识大全 Js鼠标跟随代码小手点击

Js鼠标跟随代码小手点击  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!<xmlns="<

知识大全 js正则解析URL参数示例代码

js正则解析URL参数示例代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!URL参数使用js正则

知识大全 JS防止用户多次提交的简单代码

JS防止用户多次提交的简单代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!这篇文章介绍了JS防止

知识大全 JS特效代码--下拉透明菜单

JS特效代码--下拉透明菜单  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  <script

知识大全 一些有关检查数据的JS代码

一些有关检查数据的JS代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!cha138/A