關注點分離的 JavaScript 應用程式

保持學習的工程師

2024/11/21閱讀時間約 10 分鐘

在現代 Web 開發中，框架的規範性對於團隊合作至關重要。這不僅提高了程式碼的一致性，也降低了理解他人程式碼的時間成本。現在，我們將以 JavaScript 為例，展示如何使用關注點分離的原則來撰寫一個簡單的應用喔。

Jeremy Cai on Unsplash

框架選擇

常見的前端框架有三個：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();