您好,登錄后才能下訂單哦!
這篇文章主要介紹了怎么在JavaScript中實現(xiàn)一個適配器功能,此處通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考價值,需要的朋友可以參考下:
JavaScript是一種直譯式的腳本語言,其解釋器被稱為JavaScript引擎,是瀏覽器的一部分,JavaScript是被廣泛用于客戶端的腳本語言,最早是在HTML網(wǎng)頁上使用,用來給HTML網(wǎng)頁增加動態(tài)功能。
接入多個第三方SDK
舉個日常開發(fā)中的例子,我們在做一個微信公眾號開發(fā),里邊用到了微信的支付模塊,經(jīng)過長時間的聯(lián)調(diào),終于跑通了整個流程,正當(dāng)你準(zhǔn)備開心的打包上線代碼的時候,得到了一個新需求:
我們需要接入支付寶公眾號的SDK,也要有支付的流程
為了復(fù)用代碼,我們可能會在腳本中寫下這樣的邏輯:
if (platform === 'wechat') { wx.pay(config) } else if (platform === 'alipay') { alipay.pay(config) } // 做一些后續(xù)的邏輯處理
但是一般來說,各廠的SDK所提供的接口調(diào)用方式都會多多少少有些區(qū)別,雖說有些時候文檔可能用的是同一份,致敬友商。
所以針對上述的代碼可能是這樣的:
// 并不是真實的參數(shù)配置,僅僅舉例使用 const config = { price: 10, goodsId: 1 } // 還有可能返回值的處理方式也不相同 if (platform === 'wechat') { config.appId = 'XXX' config.secretKey = 'XXX' wx.pay(config).then((err, data) => { if (err) // error // success }) } else if (platform === 'alipay') { config.token = 'XXX' alipay.pay(config, data => { // success }, err => { // error }) }
就目前來說,代碼接口還算是清晰,只要我們寫好注釋,這也不是一個太糟糕的代碼。
但是生活總是充滿了意外,我們又接到了需求需要添加QQ的SDK、美團(tuán)的SDK、小米的SDK,或者某些銀行的SDK。
此時你的代碼可能是這樣的:
switch (platform) { case 'wechat': // 微信的處理邏輯 break case 'QQ': // QQ的處理邏輯 break case 'alipay': // 支付寶的處理邏輯 break case 'meituan': // 美團(tuán)的處理邏輯 break case 'xiaomi': // 小米的處理邏輯 break }
這已經(jīng)不是一些注釋能夠彌補(bǔ)的問題了,這樣的代碼會變得越來越難維護(hù),各種SDK千奇百怪的調(diào)用方式,如果其他人也要做類似的需求,還需要重新寫一遍這樣的代碼,那肯定是很浪費(fèi)資源的一件事兒。
所以為了保證我們業(yè)務(wù)邏輯的清晰,同時也為了避免后人重復(fù)的踩這個坑,我們會將它進(jìn)行拆分出來作為一個公共的函數(shù)來存在:
找到其中某一個SDK的調(diào)用方式或者一個我們約定好的規(guī)則作為基準(zhǔn)。
我們來告訴調(diào)用方,你要怎么怎么做,你能怎樣獲取返回數(shù)據(jù),然后我們在函數(shù)內(nèi)部進(jìn)行這些各種骯臟的判斷:
function pay ({ price, goodsId }) { return new Promise((resolve, reject) => { const config = {} switch (platform) { case 'wechat': // 微信的處理邏輯 config.price = price config.goodsId = goodsId config.appId = 'XXX' config.secretKey = 'XXX' wx.pay(config).then((err, data) => { if (err) return reject(err) resolve(data) }) break case 'QQ': // QQ的處理邏輯 config.price = price * 100 config.gid = goodsId config.appId = 'XXX' config.secretKey = 'XXX' config.success = resolve config.error = reject qq.pay(config) break case 'alipay': // 支付寶的處理邏輯 config.payment = price config.id = goodsId config.token = 'XXX' alipay.pay(config, resolve, reject) break } }) }
這樣無論我們在什么環(huán)境下,只要我們的適配器支持,就可以按照我們約定好的通用規(guī)則進(jìn)行調(diào)用,而具體執(zhí)行的是什么SDK,則是適配器需要關(guān)心的事情:
// run anywhere await pay({ price: 10, goodsId: 1 })
對于SDK提供方,僅僅需要知道自己所需要的一些參數(shù),然后按照自己的方式進(jìn)行數(shù)據(jù)返回。
對于SDK調(diào)用方,僅僅需要我們約定好的通用的參數(shù),以及按照約定的方式進(jìn)行監(jiān)聽回調(diào)處理。
整合多個第三方SDK的任務(wù)就交由適配器來做,然后我們將適配器的代碼壓縮,混淆,放在一個看不見的角落里去,這樣的代碼邏輯就會變得很清晰了 :)。
適配器大致就是這樣的作用,有一點一定要明確,適配器不是銀彈,__那些繁瑣的代碼始終是存在的,只不過你在寫業(yè)務(wù)的時候看不到它罷了__,眼不見心不煩。
一些其他的例子
個人覺得,jQuery中就有很多適配器的例子,包括最基礎(chǔ)的$('selector').on,這個不就是一個很明顯的適配器模式么?
一步步的進(jìn)行降級,并且抹平了一些瀏覽器之間的差異,讓我們可以通過簡單的on來進(jìn)行在主流瀏覽器中進(jìn)行事件監(jiān)聽:
// 一個簡單的偽代碼示例 function on (target, event, callback) { if (target.addEventListener) { // 標(biāo)準(zhǔn)的監(jiān)聽事件方式 target.addEventListener(event, callback) } else if (target.attachEvent) { // IE低版本的監(jiān)聽方式 target.attachEvent(event, callback) } else { // 一些低版本的瀏覽器監(jiān)聽事件方式 target[`on${event}`] = callback } }
或者在Node中的這樣的例子更是常見,因為早年是沒有Promise的,所以大多數(shù)的異步由callback來完成,且有一個約定好的規(guī)則,Error-first callback:
const fs = require('fs') fs.readFile('test.txt', (err, data) => { if (err) // 處理異常 // 處理正確結(jié)果 })
而我們的新功能都采用了async/await的方式來進(jìn)行,當(dāng)我們需要復(fù)用一些老項目中的功能時,直接去修改老項目的代碼肯定是不可行的。
這樣的兼容處理需要調(diào)用方來做,所以為了讓邏輯代碼看起來不是太混亂,我們可能會將這樣的回調(diào)轉(zhuǎn)換為Promise的版本方便我們進(jìn)行調(diào)用:
const fs = require('fs') function readFile (fileName) { return new Promise((resolve, reject) => { fs.readFile(fileName, (err, data) => { if (err) reject(err) resolve(data) }) }) } await readFile('test.txt')
因為前邊也提到了,這種Error-first callback是一個約定好的形式,所以我們可以很輕松的實現(xiàn)一個通用的適配器:
function promisify(func) { return (...args) => new Promise((resolve, reject) => { func(...args, (err, data) => { if (err) reject(err) resolve(data) }) }) }
然后在使用前進(jìn)行對應(yīng)的轉(zhuǎn)換就可以用我們預(yù)期的方式來執(zhí)行代碼:
const fs = require('fs') const readFile = promisify(fs.readFile) await readFile('test.txt')
到此這篇關(guān)于怎么在JavaScript中實現(xiàn)一個適配器功能的文章就介紹到這了,更多相關(guān)怎么在JavaScript中實現(xiàn)一個適配器功能的內(nèi)容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。