在現代 Web 開發中，框架的規範性對於團隊合作至關重要。這不僅提高了程式碼的一致性，也降低了理解他人程式碼的時間成本。現在，我們將以 JavaScript 為例，展示如何使用關注點分離的原則來撰寫一個簡單的應用喔。
框架選擇
常見的前端框架有三個：Vue、React 和 Angular。這些框架各有特色：- Vue：由尤雨溪開發，擁有友好的中文社群，適合初學者。
- React：由 Facebook 開發，擁有廣泛的使用者群體，靈活性強。
- Angular：由 Google 開發，適合大型應用，提供完整的解決方案。
我們主要會介紹Vue，如果有想知道其他框架的詳細內容可以留言告訴我喔!無論選擇哪個框架，都應選擇定期維護並且受歡迎的開源項目（如 MIT 授權），以確保使用過程中的安全性和穩定性。
關注點分離
關注點分離是一種軟體設計原則，旨在將不同功能的程式碼分開，讓程式更易於維護和理解。關注點分離在框架會有大量使用，以下是如何在 JavaScript 中實現這一原則的範例。
基本範例：計算陣列的總和
我們首先創建一個簡單的 HTML 結構，並用 JavaScript 將數據動態顯示在頁面上。
HTML 結構
<div>
<ul id="container"></ul>
<hr>
<p id="output"></p>
</div>
JavaScript 實現
以下是傳統寫法：
const data = [1, 2, 3];
// 一般寫法
const container = document.querySelector('#container');
const output = document.querySelector('#output');
let content = '';
let sum = 0;
for (let i = 0; i < data.length; i++) {
content += `<li>${data[i]}</li>`;
sum += data[i];
}
container.innerHTML = content;
output.textContent = sum;
使用關注點分離後的寫法：
const app = {
container: document.querySelector('#container'),
output: document.querySelector('#output'),
data: [1, 2, 3, 4],
// 計算data陣列總和的函式
sum() {
return this.data.reduce((acc, num) => acc + num, 0);
},
// 渲染畫面的函式
render() {
this.container.innerHTML = this.data.map(num => `<li>${num}</li>`).join('');
this.output.textContent = this.sum();
},
// 初始化
init() {
this.render();
},
}
// 執行app的初始化
app.init();
看出差別了嗎~
新增與刪除資料的範例
接下來，我們將實作一個可以新增和刪除資料的功能，一樣使用關注點分離的方式。
HTML 結構
<div>
<form>
<label>
姓氏
<input id="last-name" type="text">
</label>
<label>
名字
<input id="first-name" type="text">
</label>
<button id="add-btn" type="button">新增</button>
</form>
<ul id="container"></ul>
</div>
JavaScript 實現
const app = {
lastName: document.querySelector('#last-name'),
firstName: document.querySelector('#first-name'),
addBtn: document.querySelector('#add-btn'),
container: document.querySelector('#container'),
arr: [],
addListen() {
this.addBtn.addEventListener('click', () => {
const newEntry = {
id: new Date().getTime(),
lastName: this.lastName.value,
firstName: this.firstName.value,
};
this.arr.push(newEntry);
this.lastName.value = '';
this.firstName.value = '';
this.render();
});
this.container.addEventListener('click', (e) => {
const id = e.target.dataset.id;
if (!id) return;
this.deleteItem(Number(id));
});
},
render() {
const content = this.arr.map(item => `
<li>
<span>${item.lastName} ${item.firstName}</span>
<button data-id="${item.id}" type="button">刪除</button>
</li>
`).join('');
this.container.innerHTML = content;
},
deleteItem(id) {
const index = this.arr.findIndex(item => item.id === id);
if (index !== -1) {
this.arr.splice(index, 1);
this.render();
}
},
init() {
this.addListen();
},
}
app.init();
程式碼解析
- 宣告：將所有 DOM 元素和數據都放入一個物件中，便於管理。
- 事件監聽：使用箭頭函式來確保
this總是指向app物件。新增按鈕和刪除按鈕的事件監聽器也清晰地分開。 - 渲染函式：
render函式負責更新畫面，利用map方法將資料渲染為列表項。 - 刪除功能：透過資料的
id進行刪除，並更新顯示。
總結
通過這種關注點分離的方式，我們的程式碼更具可讀性和可維護性。在開發過程中，選擇適合的框架和良好的程式撰寫習慣將使團隊協作更加順暢，這邊主要會練習專注點分離是要習慣後面使用Vue.js框加的寫法，接下來會介紹Vue.js的基礎。
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
提醒，文章僅供正當的知識參考，文章不負任何責任。
