【Day 6】前端開發之旅－代碼分離

2024 iThome 鐵人賽

DAY 6

JavaScript

「前端開發快速入門：從基礎到現代框架的實戰之旅」系列第 6 篇

16th鐵人賽

dcheng0915

2024-09-20 23:59:18

64 瀏覽

分享至

我們可以把 <style> 內的 CSS 程式碼提取放到 index.css 檔案中、<script> 裡的 JavaScript 程式碼提取放到 index.js 檔案中，讓 index 中的 CSS 與 JavaScript 程式碼集中管理，並使用 <link> 與 <script> 將分離後的程式碼引入到 index.html 檔案作使用。

將 <style> 內的這段程式碼：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: gray;
    }
    .container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        max-width: 1024px;
        margin: 0 auto;
    }
    .header {
        /* min-height: 100px; */
        background-color: lightskyblue;
    }
    .header-title {
        padding: 8px 0 8px 16px;
    }
    .main {
        flex-grow: 1;
        background-color: lightgrey;
        padding: 16px 0;
    }
    .main-section {
        padding: 0 16px;
        margin: 0 0 16px;
    }
    .main-section-projects {
        padding: 8px 0 0 16px;
    }
    .main-section-projects-item {
        padding: 8px 0;
    }
    .footer {
        /* min-height: 100px; */
        background-color: lightslategray;
    }
    .footer-text {
        padding: 8px 0;
        text-align: center;
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 600px;
    }
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }
    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>

放到 index.css 裡：

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: gray;
}
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1024px;
    margin: 0 auto;
}
.header {
    /* min-height: 100px; */
    background-color: lightskyblue;
}
.header-title {
    padding: 8px 0 8px 16px;
}
.main {
    flex-grow: 1;
    background-color: lightgrey;
    padding: 16px 0;
}
.main-section {
    padding: 0 16px;
    margin: 0 0 16px;
}
.main-section-projects {
    padding: 8px 0 0 16px;
}
.main-section-projects-item {
    padding: 8px 0;
}
.footer {
    /* min-height: 100px; */
    background-color: lightslategray;
}
.footer-text {
    padding: 8px 0;
    text-align: center;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

最後使用 <link> 標籤引入分離後的 CSS 檔案：

<link rel="stylesheet" href="index.css">

此時的 index.html 就會變成：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="header-title">My Blog</h1>

            <nav>
                <a href="index.html">Home</a>
                <a href="projects.html">Projects</a>
            </nav>
        </header>

        <main class="main">
            <section class="main-section">
                <h2>About</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Contact</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Experience</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Education</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Skills</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Projects</h2>
                <div class="main-section-projects">
                    <section class="main-section-projects-item" onclick="showProjectDetails(1)">
                        <h3>Project 1</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>

                    <section class="main-section-projects-item" onclick="showProjectDetails(2)">
                        <h3>Project 2</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>
                    
                    <section class="main-section-projects-item" onclick="showProjectDetails(3)">
                        <h3>Project 3</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>
                </div>
            </section>

            <div id="projectModal" class="modal">
                <div class="modal-content">
                    <span class="close" onclick="closeProjectDetails()">&times;</span>
                    <h2 id="modalTitle"></h2>
                    <p id="modalDescription"></p>
                    <div id="modalTags"></div>
                    <div id="modalCategories"></div>
                </div>
            </div>
        </main>
        
        <footer class="footer">
            <p class="footer-text">Copyright © 2024 My Blog</p>
        </footer>
    </div>

    <script>
        const modal = document.getElementById("projectModal");
        const modalTitle = document.getElementById("modalTitle");
        const modalDescription = document.getElementById("modalDescription");
        const modalTags = document.getElementById("modalTags");
        const modalCategories = document.getElementById("modalCategories");

        function showProjectDetails(projectId) {
            const projectDetails = getProjectDetails(projectId);

            modalTitle.textContent = projectDetails.title;
            modalDescription.textContent = projectDetails.description;
            modalTags.textContent = projectDetails.tags;
            modalCategories.textContent = projectDetails.categories;

            modal.style.display = "block";
        }

        function closeProjectDetails() {
            modal.style.display = "none";
        }

        function getProjectDetails(projectId) {
            const projects = {
                1: {
                    title: "Project 1",
                    description: "詳細描述 Project 1...",
                    tags: ["HTML", "CSS", "JavaScript"],
                    categories: ["Web Development"]
                },
                2: {
                    title: "Project 2",
                    description: "詳細描述 Project 2...",
                    tags: ["Vue", "React", "Angular"],
                    categories: ["Frontend"]
                },
                3: {
                    title: "Project 3",
                    description: "詳細描述 Project 3...",
                    tags: ["Node.js", "Golang", "Python"],
                    categories: ["Backend"]
                }
            };
            return projects[projectId];
        }
        
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html>

同理，<script> 也能透過這樣的方式去分離程式碼。
但引入的方式就會變成：

<script src="index.js"></script>

這樣做的好處：

讓每個檔案的責任更清楚，像是 .html 的檔案就只寫 HTML 、 .css 的檔案負責 CSS 、 .js 的檔案則用來撰寫 JavaScript。
在維護上更快速，當要改CSS時，只要尋找 .css 的檔案來改就能夠完成了，不用擔心是否有漏掉其他該修改的地方。

index.html 的完整程式碼：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="header-title">My Blog</h1>

            <nav>
                <a href="index.html">Home</a>
                <a href="projects.html">Projects</a>
            </nav>
        </header>

        <main class="main">
            <section class="main-section">
                <h2>About</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Contact</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Experience</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Education</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Skills</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Projects</h2>
                <div class="main-section-projects">
                    <section class="main-section-projects-item" onclick="showProjectDetails(1)">
                        <h3>Project 1</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>

                    <section class="main-section-projects-item" onclick="showProjectDetails(2)">
                        <h3>Project 2</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>
                    
                    <section class="main-section-projects-item" onclick="showProjectDetails(3)">
                        <h3>Project 3</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>
                </div>
            </section>

            <div id="projectModal" class="modal">
                <div class="modal-content">
                    <span class="close" onclick="closeProjectDetails()">&times;</span>
                    <h2 id="modalTitle"></h2>
                    <p id="modalDescription"></p>
                    <div id="modalTags"></div>
                    <div id="modalCategories"></div>
                </div>
            </div>
        </main>
        
        <footer class="footer">
            <p class="footer-text">Copyright © 2024 My Blog</p>
        </footer>
    </div>

    <script src="index.js"></script>
</body>
</html>