0%

[JS] 講座筆記：JavaScript 設計模式——關注點分離

發表於 更新於 分類於 Disqus：

本篇筆記來自 2020.4.15 六角學院線上研討會，講者為卡斯伯老師。在這一次講座中，老師講解了關注點分離作為一種 JavaScript 設計模式是如何運作的。

何謂關注點分離

畫面歸畫面、邏輯歸邏輯、資料歸資料、孫子龜孫子

  • 畫面：HTML 渲染方式，HTML 結構、樣式等等
  • 邏輯：處理資料的方法
  • 資料：就是資料

MVC 也是屬於此概念。

開發技巧

  1. 將資料拆分出來
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const data = [
  {
    first: 'Mark',
    last: 'Otto'
  },
  {
    first: 'Jacob',
    last: 'Thornton'
  },
  {
    first: 'Larry',
    first: 'the Bird'
  }
]
  1. 一個區塊維持一種渲染模式（大多數框架就是讓開發者省去這段流程）
1
2
3
4
5
6
7
8
9
10
11
function render() {
  let htmlString= '';
  data.forEach( (item, i) => {
    htmlString = htmlString + `<tr>
        <th scope="row">${ i + 1 }</th>
        <td>${ item.first }</td>
        <td>${ item.last }</td>
        <td><button class="btn btn-outline-danger" data-id="${i}">刪除</button></td>
      <tr>`
  })
}
  1. 邏輯不會與渲染方式混在一起
    此部分重點在於資料處理的熟練度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function removeItem(e) {
  const id = e.target.dataset.id;
  data.splice(id, 1);
  render();
}

function addItem() {
  const newItem = {
    first: 'Greta',
    last: 'Ma'
  }
  data.push(newItem);
  render();
}

參考資料

問答會共筆