關注點分離的 JavaScript 應用程式

在現代 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();

程式碼解析

1. 宣告：將所有 DOM 元素和數據都放入一個物件中，便於管理。
2. 事件監聽：使用箭頭函式來確保 this 總是指向 app 物件。新增按鈕和刪除按鈕的事件監聽器也清晰地分開。
3. 渲染函式：render 函式負責更新畫面，利用 map 方法將資料渲染為列表項。
4. 刪除功能：透過資料的 id 進行刪除，並更新顯示。

總結

通過這種關注點分離的方式，我們的程式碼更具可讀性和可維護性。在開發過程中，選擇適合的框架和良好的程式撰寫習慣將使團隊協作更加順暢，這邊主要會練習專注點分離是要習慣後面使用Vue.js框加的寫法，接下來會介紹Vue.js的基礎。

對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!

提醒，文章僅供正當的知識參考，文章不負任何責任。