文科少女學程式

之前偶爾會在公司的專案碰到前人用Rx.js寫的內容，但是天資愚鈍的我幾次自己嘗試去理解Rx.js的概念，都好像通了，又好像沒通。直到前陣子讀書會上，Ken大大分享觀察者模式(Observer Pattern)，這個Rx.js主要運用到的設計模式，才感覺自己應該有比較通了，所以想說這次就試著從上次讀書會中學習到的內容，延伸做一個Rx.js基本概念的學習筆記。

觀察者模式(Observer Pattern)是什麼？
如果去查相關資料的話，可能會查到類似的說明「observer訂閱observable後，當事件發生，observable就會去通知訂閱這個observable的observer。」
(這不是在繞口令，但看起來很像在繞口令)
雖然這句話，看起來不太難懂，但是對於當初第一次碰到這個pattern的我來說，observer(觀察者)和obervable(可觀察者)這兩個詞其實很抽象。等比較理解了之後，才發現其實沒那麼難。

關於觀察者模式的概念，我們可以先來閱讀一段小文章XD
「有一位「蔡依林」的鐵粉，因為想要即時收到蔡依林的所有動態，所以對蔡依林的粉絲團、Youtube頻道按讚、訂閱、開啟小鈴鐺。每當粉絲團有新貼文，或是頻道有上新的影片，這位鐵粉就能在第一時間被通知，不需要自己點到粉絲團或頻道上查看有沒有新資訊。」
在這段文字中，分別有這些重要名詞及重要動作
人物：
1. 鐵粉
2. 蔡依林的粉絲團、youtube頻道
動作：
1. 訂閱
2. 發送通知
這裡我們再來回顧一下前面那句簡單卻不好懂的句子，一樣把主要的名詞和動詞列出來。
「observer訂閱observable後，當事件發生，observable就會去通知訂閱這個observable的observer。」
人物：
1. observer
2. observable
動作：
1. 訂閱
2. 通知

有沒有發現雷同之處呢？

其實概念就是我們生活中，會去做的「訂閱」的這個動作。

觀察者模式(Observer Pattern)的相關名詞
理解整體的概念後，接著再來認識觀察者模式相關的名詞。
1. observable (subject)：被觀察者，也是被訂閱者，等同於前面小文章內的「蔡依林粉絲團」、「蔡依林Youtube頻道」。
2. observer：觀察者，也是訂閱者，等同於前面小文章內的「鐵粉」。
=> 實際使用時，會是一個function。如果轉換成大部分的人都比較熟悉的addEventListener的用法，這個部分就會是addEventListener()裡面的callback function。
*這個部分其實是我一開始最搞不清楚的地方，因為觀察者感覺會是個名詞，但是在Observer Pattern裡，卻是一個動作。後來理解的方式是「雖然實際上Observer是一個function，但其實它就是要被通知才執行的動作(對象)」。
3. subscribe：訂閱的動作，訂閱才可以將觀察者放入觀察者列陣列裡面。
=> 如果轉換成大部分的人都比較熟悉的addEventListener的用法，這個部分就會是addEventListener()。
4. unsubscribe：取消訂閱的動作，將觀察者從觀察者陣列中移除。
=> 如果轉換成大部分的人都比較熟悉的addEventListener的用法，這個部分就會是removeEventListener()。
5. notify：通知訂閱者的動作。

觀察者模式(Observer Pattern)的實作方式
再來直接看一下實際實作的方式，直接上code！！
一，創建一個class，裡面定義了subscribe、unsubscibe、notify。

二、在要使用的地方，先subscribe，接著在需要通知observer的事件執行notify的動作。
Vue

React

Rx.js
了解完Observer Pattern後，最後來看看Rx.js的相關名詞有哪些？還有實際上怎麼使用？
相關名詞
1. observable：一樣是被觀察者、被訂閱者。
2. observer：觀察者，可以是一個含有三個方法的物件(分別是next、error、complete的object)，也可以是一個callback function。
3. operator：操作符，可以針對observable進行處理，回傳新的物件，像是filter、map等...(會再另外寫一篇筆記，這次就跳過這部份了)
4. subscribe：訂閱，會return出subscription物件。
5. unsubscribe：取消訂閱。
6. subscription：subscribe後會return出的物件，用來取消訂閱。

參考實作
範例一、
在這個例子中，new Observable 裡的callback function的observer就是subscribe時帶入的observer object。

範例二、
在這個例子中，是透過rxjs.interval()產生observable，固定隔一個時間執行一次observer。

總結
最後透過回顧最前面說的Observer Pattern和最後提到的Rx.js基本用法來想想看有哪些地方不太一樣的地方來做個小總結。
1. Rx.js在subscribe後，會return subscription，這個subscription可以用來unsubscrbe。
2. Rx.js在new Observable的時候，需要去定義subscribe後，要怎麼執行observer，基本的Observer Pattern單純只會在訂閱時，把observer帶入。
3. Rx.js有更多不同變化的用法，像是operator、subject等...。

這次只是簡單地透過寫筆記，來重新又重新地思考Rx的概念，其實還有更深入的用法需要去了解，更深入的部分就等我自己又有一些新體悟的時候再來寫筆記文啦！
好啦！這次的小菜菜筆記就先到這告一段落了，掰餔。