这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

JavaScript编码原则

各司其责

让HTML、CSS、JavaScript的职能分离例：写一段JS，控制一个网页，让它支持浅色和深色模式（可以修改原HTML、CSS代码）

浅色模式
版本一 用JavaScript去控制CSS，这样JavaScript与CSS没有分离，后期想要去修改浅色或深色模式的样式时就不是只在CSS文件中修改，还要到js文件中修改，使后期维护成本增高。js文件中还有CSS样式，降低了代码的可读性
版本二
通过JS修改类名使得元素被相应的样式选择，没有让JS去直接修改样式，做到了JS与CSS的分离

版本三

只用了HTML和CSS实现浅色和深色模式的切换。通过修改checkbox的状态来修改主题样式，这里设置checkbox的display为none,所以页面上看不到复选框。由于label标签设置了for="modeCheckBox"，所以点击label标签就相当于点击了复选框
如下是我自己把版本三代码写了一遍，有些小修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        body {
            box-sizing: border-box;
        }

        .content {
            height: 100%;
            padding: 10px;
            transition: background-color 1s, color 1s;
        }

        div.pic img {
            width: 100%
        }

        #modeCheckBox {
            display: none;
        }

        #modeCheckBox:checked+.content {
            color: white;
            background-color: black;
            /* 通过设置动画过渡时间让主题切换不那么生硬 */
            transition: all 1s
        }

        #modeBtn {
            font-size: 1rem;
            float: right;
        }
    </style>
</head>

<body>
    <input type="checkbox" id="modeCheckBox">
    <div class="content">
        <header>
            <!-- 设置for="modeCheckBox"以达到点击切换主题就能触发checkbox -->
            <label for="modeCheckBox" id="modeBtn">切换主题</label>
            <h1>深夜食堂</h1>
        </header>
        <main>
            <div class="pic">
                <img src="D:\桌面\医护模拟系统代码\示例图片.jpg">
            </div>
            <div class="description">
                <p>
                    只用了HTML和CSS实现浅色和深色模式的切换。通过修改checkbox的状态来修改主题样式，这里设置checkbox的display为none,所以页面上看不到复选框。由于label标签设置了for="modeCheckBox"，所以点击label标签就相当于点击了复选框
                </p>
            </div>
        </main>
    </div>
</body>

</html>

运行结果如下

总结

HTML、CSS、JS各司其责
应当避免不必要的由JS直接操作样式
可以用class来表示状态
纯展示类交互寻求零JS方案

组件封装

好的UI组件具备正确性、扩展性、复用性

过程抽象

应用函数式编程思想

跟着月影学JavaScript | 青训营笔记

JavaScript编码原则

各司其责

组件封装

过程抽象