章节
问答
课签
笔记
评论
占位
占位

接口的设计优劣

从设计的层面上来考下,这种事件组合的方式是如何实现?有什么优势?

  1. Ajax 的参数回调
  2. 基于 deferred 方式的 done 回调
  3. 全局的自定义事件的回调

设计一:

tAjax({
    url: "php.html",
    complete: function(data) {
        console.log(data)
    }
})

如果要实现这种接口调用那么我们就需要封装下代码,把回调通过实参传递。

var tAjax = function(config) {
 //参考右图设计一
}

这样设计可以看做类似工厂模式的封装,好处不用多说在工厂模式里面包含了对象的创建等必要的逻辑,客户端根据传参选择动态的实例化相对的处理,对于客户端来去除了具体的依赖,当然 tAjax 你也可以看作一个外观模式提供的接口,其实就是隐藏了具体的复杂逻辑,提供一个简单的接口,从而降低耦合。


设计二:

tAjax({
    url: "php.html",
    complete: function(data) {
        console.log(data)
    }
}).done(function(data){
    console.log(data)
})

在之前加入了一个 done 链式处理,当然这里 done,其实是 deferred 的一个成功处理通知,如果之前没有接触,大家去了解一下关于 deferred 的概念,我们知道 jQuery 实现了链式,实现的原理无法就是返回本身对象的引用。

var ajax = tAjax({
    url: "php.html",
    complete: function(data) {
        console.log(data)
    }
})
ajax.done(function(){
    //.........
})

以上是分离的情况下,如果要合并成一条链式处理,只要在上一个方法中返回 this 即可。

var tAjax = function(config) {
   ///参考右图设计二
    return {
        done: function(ourfn) {
             doneFn = ourfn;
        }
    }
}

我们返回了一个 done 对象,这里一样要是对象,因为链式的原因我们看外部指定了内部的 done,从而把外部函数给引用到内部的 doneFn 上缓存起来 xhr.staturs 成功后一起执行,当然这种设计是有问题的,如果在 done 之后我再链式就肯定不行,因为对象的引用错了,那么 jQuery 是如何处理?

 

设计三:提供 document 对象的全局处理

$(document).ajaxComplete(function() {
    console.log('ajax请求成功')
})
tAjax({
    url: "php.html",
    complete: function(data) {
         console.log(data)
    }
}).done(function(data){
    console.log(data)
})
  • 这里的问题就是把 ajax 内部的事件,返回给全局捕获了,有点类似 css3 的全局动画事件
  • 这里的设计其实最简单了因为本身之间没有什么耦合,就是发送一个事件给 document 即可
  • jQuery 利用了 trigger 自定义事件触发的globalEventContext.trigger("ajaxComplete", [jqXHR, s]);
  • 具体每一种实现在后面的都会提到,在这里需要大家有个整体的印象

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?