iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 27
5
Modern Web

30 天精通 RxJS系列 第 27 篇

30 天精通 RxJS(26)：簡易實作 Observable(一)

2017鐵人賽 rxjs observable observer javascript
18121 瀏覽

  • 分享至 

  • xImage
    •  

本篇文章搬家囉！ 這裡不再回覆留言，請移至 https://blog.jerry-hong.com/series/rxjs/thirty-days-RxJS-26/

30 天精通 RxJS(26)：簡易實作 Observable(一)

因為實在太多讀者在問要如何實作 Observable，所以特別調整了本系列文章最後幾篇的內容，空出一天的位置來寫如何簡易實作 Observable。

為什麼是簡易實作而不完整實作呢？ 當然這個系列的文章是希望讀者能學會如何使用 RxJS，而 實作 Observable 其實只是幫助我們理解 Observable 的運作方式，所以這篇文章會盡可能地簡單，一來讓讀者容易理解及吸收，二來有興趣的讀者可以再沿著這篇文章的內容去完整的實作。

重點觀念

Observable 跟 Observer Pattern 是不同的，Observable 內部並沒有管理一份訂閱清單，訂閱 Observable 就像是執行一個 function 一樣！

所以實作過程的重點

  • 訂閱就是執行一個 funciton
  • 訂閱接收的物件具備 next, error, complete 三個方法
  • 訂閱會返回一個可退訂(unsubscribe)的物件

基本 observable 實作

先用最簡單的 function 來建立 observable 物件

function create(subscriber) {
    var observable = {
        subscribe: function(observer) {
            subscriber(observer)
        }       
    };
    return observable;
}

上面這段程式碼就可以做最簡單的訂閱，像下面這樣

function create(subscriber) {
    var observable = {
        subscribe: function(observer) {
            subscriber(observer)
        }       
    };
    return observable;
}

var observable = create(function(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
})

var observer = {
  next: function(value) {
    console.log(value)
  }
}

observable.subscribe(observer)
// 1
// 2
// 3

JSBin

這時我們已經有最簡單的功能了，但這裡有一個大問題，就是 observable 在結束(complete)就不應該再發送元素

var observable = create(function(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
  observer.next('still work');
})

var observer = {
  next: function(value) {
    console.log(value)
  },
  complete: function() {
    console.log('complete!')
  }
}

observable.subscribe(observer)
// 1
// 2
// 3
// "complete!"
// "still work"

JSBin

從上面的程式碼可以看到 complete 之後還是能送元素出來，另外還有一個問題就是 observer，如果是不完整的就會出錯，這也不是我們希望看到的。

var observable = create(function(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete(); // error: complete is not a function 
})

var observer = {
  next: function(value) {
    console.log(value)
  }
}

observable.subscribe(observer)
// 1
// 2
// 3
// "complete!"
// "still work"

JSBin

上面這段程式碼可以看出來，當使用者 observer 物件沒有 complete 方法時，就會報錯。
我們應該修正這兩個問題！

實作簡易 Observer

要修正這兩個問題其實並不難，我們只要實作一個 Observer 的類別，每次使用者傳入的 observer 都會利用這個類別轉乘我們想要 Observer 物件。

首先訂閱時有可能傳入一個 observer 物件，或是一到三個 function(next, error, complete)，所以我們要建立一個類別可以接受各種可能的參數

class Observer {
  constructor(destinationOrNext, error, complete) {
    switch (arguments.length) {
      case 0:
        // 空的 observer
      case 1:
        if (!destinationOrNext) {
          // 空的 observer
        }
        if (typeof destinationOrNext === 'object') {
          // 傳入了 observer 物件
        }
      default:
        // 如果上面都不是，代表應該是傳入了一到三個 function
        break;
    }
  }
}

寫一個方法(safeObserver)來回傳正常的 observer

class Observer {
  constructor(destinationOrNext, error, complete) {
    // ... 一些程式碼
  }
  safeObserver(observerOrNext, error, complete) {
    let next;

    if (typeof (observerOrNext) === 'function') {
      // observerOrNext 是 next function
      next = observerOrNext;
    } else if (observerOrNext) {
      // observerOrNext 是 observer 物件
      next = observerOrNext.next || () => {};
      error = observerOrNext.error || function(err) { 
        throw err 
      };
      complete = observerOrNext.complete || () => {};
    }
    // 最後回傳我們預期的 observer 物件
    return {
      next: next,
      error: error,
      complete: complete
    };
  }
}

再把 constructor 完成

// 預設空的 observer 
const emptyObserver = {
  next: () => {},
  error: (err) => { throw err; },
  complete: () => {}
}

class Observer {
  constructor(destinationOrNext, error, complete) {
    switch (arguments.length) {
      case 0:
        // 空的 observer
        this.destination = this.safeObserver(emptyObserver);
        break;
      case 1:
        if (!destinationOrNext) {
          // 空的 observer
          this.destination = this.safeObserver(emptyObserver);
          break;
        }
        if (typeof destinationOrNext === 'object') {
          // 傳入了 observer 物件
          this.destination = this.safeObserver(destinationOrNext);
          break;
        }
      default:
        // 如果上面都不是，代表應該是傳入了一到三個 function
        this.destination = this.safeObserver(destinationOrNext, error, complete);
        break;
    }
  }
  safeObserver(observerOrNext, error, complete) {
    // ... 一些程式碼
  }
}

JSBin

這裡我們把真正的 observer 塞到 this.destination，接著完成 observer 的方法。

Observer 的三個主要的方法(next, error, complete)都應該結束或退訂後不能再被執行，所以我們在物件內部偷塞一個 boolean 值來作為是否曾經結束的依據。

class Observer {
  constructor(destinationOrNext, error, complete) {
    // ... 一些程式碼
  }
  safeObserver(observerOrNext, error, complete) {
    // ... 一些程式碼
  }
  unsubscribe() {
    this.isStopped = true; // 偷塞一個屬性 isStopped
  }
}

接著要實作三個主要的方法就很簡單了，只要先判斷 isStopped 在使用 this.destination 物件來傳送值就可以了

class Observer {
  constructor(destinationOrNext, error, complete) {
    // ... 一些程式碼
  }
  safeObserver(observerOrNext, error, complete) {
    // ... 一些程式碼
  }
  
  next(value) {
    if (!this.isStopped && this.next) {
      // 先判斷是否停止過
      try {
        this.destination.next(value); // 傳送值
      } catch (err) {
        this.unsubscribe();
        throw err;
      }
    }
  }
  
  error(err) {
    if (!this.isStopped && this.error) {
      // 先判斷是否停止過
      try {
        this.destination.error(err); // 傳送錯誤
      } catch (anotherError) {
        this.unsubscribe();
        throw anotherError;
      }
      this.unsubscribe();
    }
  }

  complete() {
    if (!this.isStopped && this.complete) {
      // 先判斷是否停止過
      try {
        this.destination.complete(); // 發送停止訊息
      } catch (err) {
        this.unsubscribe();
        throw err;
      }
      this.unsubscribe(); // 發送停止訊息後退訂
    }
  }
  
  unsubscribe() {
    this.isStopped = true;
  }
}

JSBin

到這裡我們就完成基本的 Observer 實作了，接著讓我們拿到基本版的 observable 中使用吧。

function create(subscriber) {
    const observable = {
        subscribe: function(observerOrNext, error, complete) {
            const realObserver = new Observer(observerOrNext, error, complete)
            subscriber(realObserver);
            return realObserver;
        }       
    };
    return observable;
}

var observable = create(function(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
  observer.next('not work');
})

var observer = {
  next: function(value) {
    console.log(value)
  },
  complete: function() {
      console.log('complete!')
  }
}

observable.subscribe(observer);
// 1
// 2
// 3
// complete!

JSBin

到這裡我們就完成最基本的 observable 了，至少基本的行為都跟我們期望的一致，我知道讀者們仍然不會放過我，你們會希望做出一個 Observable 型別以及至少一個 operator 對吧？ 不用擔心，我們下一篇就會講解如何建立一個 Observable 型別和 operator 的方法！

今日小結

今天我們複習了 Observable 的重要概念，並用這些重要的概念實作出了基本的 observable 以及 Observer 的類別。

不知道今天讀者們有沒有收穫呢？ 如果有任何問題，歡迎在下方留言給我，謝謝！


上一篇
30 天精通 RxJS(25)：Subject 總結
下一篇
30 天精通 RxJS(27)：簡易實作 Observable(二)
系列文
30 天精通 RxJS 共 30 篇
  1. 26
    30 天精通 RxJS(25)：Subject 總結
  2. 27
    30 天精通 RxJS(26)：簡易實作 Observable(一)
  3. 28
    30 天精通 RxJS(27)：簡易實作 Observable(二)
  4. 29
    30 天精通 RxJS(28)：Scheduler 基本觀念
  5. 30
    30 天精通 RxJS(29)：30 天感言
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

3 則留言

2
connie107
iT邦新手 5 級 ‧ 2017-08-11 09:16:21

非常精彩，謝

JerryHong iT邦新手 5 級 ‧ 2018-01-04 09:09:55 檢舉

謝謝＾＾

登入發表回應
1
wenqi73
iT邦新手 5 級 ‧ 2018-05-28 17:01:32

每个实例都很棒啊，感谢博主

JerryHong iT邦新手 5 級 ‧ 2019-05-09 15:30:17 檢舉

謝謝＾＾

登入發表回應
0
JerryHong
iT邦新手 5 級 ‧ 2019-05-09 15:30:22

本篇文章搬家囉！ 這裡不再回覆留言，請移至 https://blog.jerry-hong.com/series/rxjs/thirty-days-RxJS-26/

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22200 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙