是這樣的，這天，我接到了一個(gè) BUG，當(dāng)然這個(gè) BUG 不是我寫的，是這樣的有兩個(gè)頁面：ZQQ28資訊網(wǎng)——每日最新資訊28at.com

• 頁面 A：有同步代碼，有異步代碼
• 頁面 B：全是同步代碼

ZQQ28資訊網(wǎng)——每日最新資訊28at.com

注意：此項(xiàng)目是老項(xiàng)目，沒有全局狀態(tài)管理工具！??！ZQQ28資訊網(wǎng)——每日最新資訊28at.com

// 頁面Aconsole.log(1)console.log(2)http.get(url).then(res => {  console.log(3)  localStorage.setItem(key, res)})// 頁面Bconsole.log(  localStorage.getItem(key))

然后這兩個(gè)頁面是先后加載的，那么我們可以得出輸出順序是：ZQQ28資訊網(wǎng)——每日最新資訊28at.com

1 // 頁面A2 // 頁面Aundefined // 頁面Bconsole.log(3) // 頁面A

因?yàn)檎埱笫钱惒降?，?dǎo)致頁面B那邊拿不到 localStorage 里面的東西，而無法完成很多操作，導(dǎo)致了出現(xiàn) BUG。所以得想想怎么去解決這個(gè) BUG。ZQQ28資訊網(wǎng)——每日最新資訊28at.com

定時(shí)器

最簡單的就是利用定時(shí)器去解決：ZQQ28資訊網(wǎng)——每日最新資訊28at.com

// 頁面BsetTimeout(() => {  console.log(  localStorage.getItem(key)  )})

但是這樣是不對(duì)的，不好維護(hù)，濫用定時(shí)器會(huì)導(dǎo)致以后可能會(huì)有新的 BUG 出現(xiàn)?。?！ZQQ28資訊網(wǎng)——每日最新資訊28at.com

發(fā)布訂閱模式

所以還是使用發(fā)布訂閱，首先實(shí)現(xiàn)一個(gè)發(fā)布訂閱中心，以下是簡單實(shí)現(xiàn)：ZQQ28資訊網(wǎng)——每日最新資訊28at.com

type Callback<T> = (data: T) => void;class PubSub<T> {  private subscribers: Callback<T>[] = [];  subscribe(callback: Callback<T>): void {    this.subscribers.push(callback);  }  unsubscribe(callback: Callback<T>): void {    this.subscribers = this.subscribers.filter(fn => fn !== callback);  }  publish(data: T): void {    this.subscribers.forEach(fn => fn(data));  }}export const ps = new PubSub();

接著就可以用它來解決我們那個(gè) BUG 了??！ZQQ28資訊網(wǎng)——每日最新資訊28at.com

// 頁面Aconsole.log(1)console.log(2)http.get(url).then(res => {  console.log(3)  localStorage.setItem(key, res)  ps.publish(res)})// 頁面B// 訂閱ps.subscribe((res) => {  console.log(res)  console.log(    localStorage.getItem(key)  )})

現(xiàn)在的輸出順序就是：ZQQ28資訊網(wǎng)——每日最新資訊28at.com

1 // 頁面A2 // 頁面Aconsole.log(3) // 頁面Ares // 頁面Bres // 頁面B

小結(jié)

這就是利用了 發(fā)布訂閱模式 這種設(shè)計(jì)模式，來解決我們?nèi)粘５囊恍┖唵螛I(yè)務(wù)，所以大家可以多用，這樣在面試時(shí)就不怕面試官問你啦！ZQQ28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-95149-0.html使用「設(shè)計(jì)模式」巧妙解決 BUG 的經(jīng)歷，妙啊~

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： C++模板增強(qiáng)，模板編程更上一層樓

下一篇： 用 Python 代替 xftp 從 Linux 服務(wù)器下載文件