Clicked and Then ...

文章目錄

1. 1. 所謂 pattern
2. 2. 基本構成
3. 3. pseudo code
   1. 3.1. part 1
   2. 3.2. part2
   3. 3.3. part3
4. 4. sample code
5. 5. 結論

(趁著還有記憶，趕快填坑！)

絕大多數的行為(姑且不論操作動向)，都是一個 click 、接著一個反應，但是、有各種不同名稱 ，有時候、我搞不清楚哪個名字的行為是什摸，因為對我來說，就是 click 然後…。

也就是說、這是個很好入手、不入手絕對會後悔的 pattern 阿！！！！

所謂 pattern

程式嘛~ 寫多了、寫久了，就會有各種像小時候學校說的 看到A 尼就回答 B，這種無趣的公式解，很無趣沒錯、但是、他可以讓尼把時間花在更有趣的事情上，所以身上一定要累積了各種 pattern，好處就是… 就跟玩樂高一樣、隨便組、就是一個新東西，好像很厲害的樣子。

而既然會說是 pattern 那代表… 很有可能其他語言也可以用啊！所以、pattern 當然累積的越多越好啊！

不過前提是請記得久久更新一次腦海裡的 pattern，我認為不管哪種語言也都有所謂的流行、也會修正一些所謂大家都不會有 bug 但其實可能有問題的 pattern (跟隨著演進、以前沒有 bug ，不代表以後沒有…)。

基本構成

click 然後發生某些事情，基本上在 web 界就是 不 click 不然要幹麻...，這摸理所當然的事情。撇開各種前情提要的操作， click 後會發生什摸事呢？的確有些看起來很難、但事實上就只是 click 、然後…。

以現在到處都要用一下的 bootstrap 來說：

• modal
• dropdown
• tab
• popover
• collapse
• carousel

扣掉長得很複雜、也許還有很多的設定，整個拆出來看、都是很基本的 click 一個東西、然後發生什摸事的操作。在更精確一點，不只是 click 發生什摸事情這樣的 pattern。還幾乎都是 —–

click 1 element
show/hide other element

以 modal 來說：
click 一個按鈕，燈箱出現。click 某個地方，燈箱消失。

以 dropdown 來說：
click 一個按鈕，menu 出現。click 某個地方，menu 消失。

以 tab 來說：
click 一個tab，content 出現。

以 popover 來說：
click 一個按鈕，提示出現。click 某個地方，提示消失。

以 collapse 來說：
click 一個按鈕，content 出現。click 某個地方，content (可以)消失。

以 carousel 來說：
click next，content 往前，click previous，content 往後。

^^^^^ 很明顯的規律對吧！相較於複雜到不行的 layout 、 css ，各種眼花撩亂的設計和內容，程式(js) 有沒有超單純！更不用提、其實像 popover 跟 bootstrap-tooltip 兩個超像、只是 tooltip 一般都是用 hover 控制，沒錯、其實很多東西抽象化後都可以當一家人的！

pseudo code

根據上一段，我們可以稍微整理出一些樣板了。

part 1

最簡單版

def button_click
  then view shows

def document_click
  then view hides

part2

補上幾個 customer event

def button_click
  before view shows
  then view shows
  after view shows

def document_click
  before view hides
  then view hides
  after view hides

part3

把他們合在一起一下。

def click_pattern
  button listen click
    before view shows
    then view shows
    after view shows
  document listen click
    before view hides
    then view hides
    after view hides

撇開細節、就差不多完整囉~！

sample code

直接用 code 來看看一些細節吧~

使用 options 並且設定 onShow 、 onHide 可以讓 trigger 和後續行為拆開，不會讓他們因為畫面受限。這其實是很基本的寫法，很多經典的 jquery widget 還有 twitter-bootstrap 也是採用這樣的寫法。當然、根據需求肯定會有更多的設定，像是：interval、active style 之類的，當然也可能有更多樣的 event callback。

class Pattern {
  constructor(elm, options = {}) {
    const defaultOpts = {
      onShow() {},
      onHide() {},
    };

    this.options = Object.assign({}, defaultOpts, options);
    this.bindEvt(elm, this.options);
  }

  bindEvt(elm, opts) {
    elm.addEventListener('click', () => opts.onShow);
    document.addEventListener('click', () => opts.onHide);
  }
}

歐、補充一下、上面這段不用是 class 啦~ 其實… 只要是個 function 就可以了。

更具體一點，上面這段其實是在定義 trigger ，也就是說、他根本就沒有在管後續要做什摸的。所以、上面這段 pattern 真的很好用。也許大家開始疑惑了，那… 只定義了 trigger 那後續要怎摸辦。

如果是簡單的反應、其實可以像這樣用…

因為不想寫的落落長、 $('#modal') 只是個簡單代表下

new Pattern(buttonNode, {
  onShow() { $('#modal').show(); },
  onHide() { $('#modal').hide(); }
});

但是、我們常常遇到的可能是…. $('#modal') 這裡面的東西非常的複雜(？)，可能有其他的操作。所以、也可以把它拆出來另外處理。

class Modal {
  constructor(elm, options) {
    // 省略歐....
  }

  open() {}

  close() {}
}

const modal = new Modal();

取得 instance 他就具備有 open 和 close 的 method ，用這種方式定義的話，就可以更方便的把他們拆開來，甚至一個 modal 可以有多個 trigger ，也不容易互相影響。

所以、使用上就會變成像這樣…。

new Pattern(buttonNode, {
  onShow() { modal.open() },
  onHide() { modal.close() },
});

也許、也有人會抱持懷疑，這樣有什摸好處，反正不都是一樣打開 modal ，只要定好 onShow / onHide 這些 callback 就好了，這樣的方式沒有意義啊！

是的、如果以這樣的出發點來看待、的確沒錯，但如果是希望可以共用 #modal 這個 element 的前提下，那摸使用這樣的方式定義，我認為會比較容易開發。當然、 Modal 還需要加上 updateContent 這樣的 method。

結論

雖然、這 pattern 存在的時間蠻久的了，也經過一段使用 Angular 、 React 的時期，當然觀察過這類型的 plugin ，是怎摸開發的。果然還有另一種方式，他是採用 data 去控制對象的狀態，我認為這種方式其實也有個很大的好處啦~ 就是綁定對象非常的明確。

但這就有個問題，那就是… 對於神展開的各種設計和需求可能不太容易開發，另外、也遇過有兩個以上的地方要 trigger 的問題，再加上、像是各種常見的 plugin ，其實對於可以運作的 template 都有很嚴格的要求，導入後常常有問題。css 很難改、沒有某些需求….。

我遇過覺得最麻煩的其實就是 modal 和 carousel ，特別是 carousel 各種神展開的 layout ，些微的改變、就可以讓整個 plugin 掛掉~。然後、採用這種方式寫了個非常小的 plugin 後，至今都沒有問題啊~！強烈推薦、如果沒有需要大大們定義好的 template 或 style 的話，真的可以按照自己的各種任性的需求試試。