0%

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

本篇筆記來自 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();
}

參考資料

問答會共筆