從設計的層面上來考下,這種事件組合的方式是如何實現(xiàn)?有什么優(yōu)勢?
設計一:
tAjax({ url: "php.html", complete: function(data) { console.log(data) } })
如果要實現(xiàn)這種接口調(diào)用那么我們就需要封裝下代碼,把回調(diào)通過實參傳遞。
var tAjax = function(config) { //參考右圖設計一 }
這樣設計可以看做類似工廠模式的封裝,好處不用多說在工廠模式里面包含了對象的創(chuàng)建等必要的邏輯,客戶端根據(jù)傳參選擇動態(tài)的實例化相對的處理,對于客戶端來去除了具體的依賴,當然 tAjax 你也可以看作一個外觀模式提供的接口,其實就是隱藏了具體的復雜邏輯,提供一個簡單的接口,從而降低耦合。
設計二:
tAjax({ url: "php.html", complete: function(data) { console.log(data) } }).done(function(data){ console.log(data) })
在之前加入了一個 done 鏈式處理,當然這里 done,其實是 deferred 的一個成功處理通知,如果之前沒有接觸,大家去了解一下關于 deferred 的概念,我們知道 jQuery 實現(xiàn)了鏈式,實現(xiàn)的原理無法就是返回本身對象的引用。
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 對象,這里一樣要是對象,因為鏈式的原因我們看外部指定了內(nèi)部的 done,從而把外部函數(shù)給引用到內(nèi)部的 doneFn 上緩存起來 xhr.staturs 成功后一起執(zhí)行,當然這種設計是有問題的,如果在 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) })
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報