現在的網站越來越復雜，要實現漂亮的頁面特效和優美的用戶交互，離不開一門前端開發語言——JavaScript。而在JavaScript中，有一種設計模式叫做三層架構，將邏輯分成三部分，將業務邏輯、數據交互和界面渲染分離。這種架構在復雜的應用中可以提高代碼的可維護性，降低代碼耦合度，方便代碼的重用和測試，下面我就來詳細介紹一下JavaScript三層架構。

1.表示層

表示層負責為界面渲染提供數據，這里的界面可以是任何形式，可以是HTML頁面、Web應用頁或者桌面應用程序等。表示層不關心具體實現邏輯，只需要了解所需要的數據和如何處理數據。也就是說表示層只涉及UI和UI相關邏輯。下面通過一個簡單的案例來說明。

function showBlogList(blogList) {
let str = '';
for (let i = 0; i < blogList.length; i++) {
str +=<li><a href="${blogList[i].url}">${blogList[i].title}</a></li>;
}
document.querySelector('#blog_list').innerHTML = str;
}

在這個例子中，showBlogList函數就是表示層的代碼。它根據傳入的blogList數組來生成具體的HTML代碼，然后通過innerHTML方法將代碼注入到頁面的某個元素中，這樣就完成了界面渲染的工作。

2.邏輯層

邏輯層是指處理業務邏輯的代碼，與表示層相互獨立，不直接操作表示層。邏輯層接受來自表示層的數據，然后處理數據并根據結果生成返回值。邏輯層分為業務邏輯層和數據處理層。下面還是通過一個案例來說明邏輯層的作用。

function getBlogList(user) {
const blogList = user.blogs;
blogList.sort((a, b) => b.published - a.published);
return blogList;
}

這個例子中的getBlogList函數就是邏輯層的代碼。它接收一個user對象作為參數，然后從user對象中拿到博客數組，排序后返回。在這個例子中，排序可以看做是業務邏輯，數據的提取則可以看做是數據處理。邏輯層的代碼可以被多個表示層調用，而不需要考慮如何處理數據。

3.數據層

數據層負責與服務器和數據庫交互，根據邏輯層的要求，提供數據接口。數據層需要為邏輯層提供可靠的數據來源，數據的獲取和存儲都在這個層次完成。下面是一個數據層的例子。

function getUser(id) {
return fetch(api/user/${id}).then(response => response.json());
}

這個例子中getUser函數就是數據層的代碼。它根據用戶的id向服務器請求用戶數據，然后將返回的數據解析成JSON格式返回。數據層的代碼只與數據的獲取和存儲相關，不會涉及數據的處理和UI渲染。

總結

JavaScript三層架構將邏輯分離，使得代碼更加易于維護和開發。表示層只負責UI渲染，邏輯層只負責處理業務邏輯，數據層只負責數據的獲取和存儲。通過三層架構，可以使得代碼組織更加清晰，且各層之間的解耦合度也相對較高，便于單元測試和復用。