關注點分離：Todolist

發表於 分類於

關注點分離

關注點分離（Separation of Concerns，SoC）就是將程式碼依照各種「目的」、「功能」進行分類和整理，讓每個區塊專注於各自負責的工作，彼此分工合作。
這麼做的優點是可以將程式碼進行切割，依照需求各自獨立處理，並讓程式碼單純化。
為了更清楚理解關注點分離應用，來實作一個簡單的 Todolist。

實作 Todolist

① 首先可以先規劃可能需要用到的功能，並用物件的方式宣告

1
2
3
4
5
6
7
8
const component = {
    data: [],           // 儲存資料
    render() {},        // 渲染畫面
    addData() {},       // 加入資料
    removeData() {},    // 刪除單筆資料
    init() {}           // 執行
}
component.init()

② 先放測試資料，將資料先渲染到畫面上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const component = {
    data: [
      '第一段文字',
      '第二段文字'
    ],
    render() {
      const list = document.querySelector('.list-group')
      const content = this.map(item => `
        <li class="list-group-item">
          ${item}
          <button type="button" data-index="${i}"
          class="btn btn-info btn-sm ml-3">刪除</button>
        </li>
      `).join('')
      list.innerHTML = content
    },
    ...
    init() {
      this.render()
    }
}
component.init()

Image

確認一下畫面有正確渲染出來

③ 接著輸入單筆資料

  • 點擊「送出」按鈕時取得輸入框的值
  • 新增到 data 陣列中
  • 重新渲染畫面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const component = {
    data: [
      ...
    ],
    render() {
      ...
    },
    addData() {
      const text = document.querySelector('.input-group input')
      const addBtn = document.querySelector('.input-group button')
      addBtn.addEventListener('click', () => {
        const newText = text.value
        text.value = '' // 清空輸入框
        this.data.push(newText)
        this.render() // 重新渲染畫面
      })
    },
    ...
    init() {
      this.render()
      this.addData() // 先註冊並等待點擊後執行
    }
}
component.init()

④ 最後加上刪除資料
因為刪除按鈕會在渲染後才會印在畫面上，所以按鈕的宣告和執行都要寫在渲染後，不然會出現 not defined。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const component = {
    data: [
      ...
    ],
    render() {
      ...
      // 刪除執行要寫在渲染後
      const btns = document.querySelectorAll('.list-group button')
      btns.forEach(item => {
        item.addEventListener('click', (e) => {
          const id = e.target.dataset.index
          this.removeData(id)
        })
      })
    },
    addData() {
      ...
    },
    removeData(id) {
      this.data.splice(id, 1)
      this.render()
    },
    init() {
      this.render()
      this.addData()
    }
}
component.init()

Demo