關注點分離介紹

為什麼要學關注點分離

mvc 架構

• Model 模型，接收 Controller 發過來的請求，跟資料庫要，要完再回傳。
• View 視圖，不會直接跟資料庫要資料，會透過控制器去要。
• Controller 控制器，彙整 View 的需求，再透過 Model 去跟資料庫要。
• 目前前端三大主流框架都是運用類似概念。

mvvm 架構 ( Vue 的使用架構 )

• View 視圖，HTML的畫面，透過 ViewModel，跟資料互相即時綁定。
• 假如畫面有個 input，在 input 填入文字，資料會即時寫入相同資料。
• 相反改變資料內容，也會即時在 View 視圖呈現修改過的內容。
• 開發者只要專心在 View 視圖及 Model 資料修改，ViewModel 這部分不會碰到。

傳統麵條式語法

• 想到什麼就寫什麼
• 程序執行時，常會出現一些問題
• 畫面的繪製跟資料綁在一起

// 傳統 todolist 寫法
// html
<input type="text" id="input">
<button type="button" id="submit">增加資料</button>
<button class="btns"></button>
<ul id="list">
</ul>

//script
var input = document.querySelector('#input');  // 綁定 input 輸入框
var btnForSubmit = document.querySelector('#submit'); // 綁定 submit 送出按鈕
var list = document.querySelector('#list'); // 綁定 list 列表
btnForSubmit.addEventListener('click', updateData); // 偵聽按鈕事件

// 按鈕事件處理
function updateData() {
   var text = input.value;  // 宣告 text 將輸入的值填入
   var sourceData = list.innerHTML; // 宣告 sourceData 將列表的值填入
   var string = sourceData + `<li>${text}  // 製作 list 列表
   <button class="btns">移除</button>  // 加入每個列表的移除按鈕
   </li>`;
  
   console.log(sourceData); 
   list.innerHTML = string;  // 將列表的值寫回 html 畫面
  
   var btns = document.querySelectorAll('.btns');  // 監聽 all 所有移除按鈕
   btns.forEach(function(btn){   // 跑迴圈監聽列表單項的移除事件
       btn.addEventListener('click', removeData);
   })
}

function removeData(e) {  // 移除資料
   e.target.parentNode.remove();
}

分為兩個部分：資料跟畫面

操作到畫面的部分：

list.innerHTML = string;

e.target.parentNode.remove();

資料建構的部分：

var text = input.value;

資料跟畫面綁在一起的部分

var sourceData = list.innerHTML;
  var string = sourceData + `<li>${text}
  <button class="btns">移除</button>
</li>`;

改成關注點分離的寫法，將資料與畫面分開填寫

// html 同上

//script
var input = document.querySelector('#input');  // 綁定 input 輸入框
var btnForSubmit = document.querySelector('#submit'); // 綁定 submit 送出按鈕
var list = document.querySelector('#list'); // 綁定 list 列表
btnForSubmit.addEventListener('click', updateData); // 偵聽按鈕事件

// 資料
var data = [
  {
    text: '這裡有一段話',
  },
  {
    text: '這裡有第二段話',
  },
  {
    text: '這裡有第三段話',
  }
];

function updateData() {  // 新增資料  
  data.push({
    text: input.value,
  });
  render(); // 重新執行看到畫面更新
}

function removeData(e) {  // 移除資料  
  console.log(e.target.dataset.id);
  data.splice(e.target.dataset.id, 1); // splice(值, 從本身開始的刪除數量)
  console.log(data);
  render(); // 重新執行看到畫面更新
}

function render () {  // 繪製畫面
  var string = '';
  console.log(data);
  data.forEach(function(item, i) {
     string = string + `<li>${ item.text }
     <button class="btns" data-id="${ i }">移除</button>
  </li>`
  })
  list.innerHTML = string;
  var btns = document.querySelectorAll('.btns');
  btns.forEach(function(btn){
    btn.addEventListener('click', removeData);
  })
}

範例連結

修改後的程式碼內容，操作到畫面的部分：

var text = input.value;

修改後、資料建構的部分：

data.push({
    text: input.value,
  });

data.splice(e.target.dataset.id, 1);

「關注點分離」重點

• 資料先定義出來
• 畫面繪製與資料處理分開執行
• 著重在資料處理的能力