这是我参与「第四届青训营」笔记创作活动的第6天

写好JS的一些原则

各司其职: 让HTML,CSS,和JavaScript只能分离

案例: 写一段JS, 控制一个页面, 让它支持浅色和深色两种浏览模式, 如果你来实现, 你会怎么做.

新人版本: JS直接操作DOM, 修改字体颜色, 修改文本内容. 这是不可取的, 违反了"各司其职"的有原则

优化版本: 减少JS对DOM的操作. 在CSS中书写"浅色模式"与"深色模式"两种样式的CSS, 然后通过JS修改类名className方式,来切换样式模式.

终极版本: 不写JS代码. 通过checkbox来扩展其作用范围到夜间切换的小图标, 然后在CSS中通过点击下图标改变checkbox的状态来给content加上另一种反色样式

<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>
        .content {
            width: 100px;
            height: 100px;
            background-color: white;
            transition: all 1s;
        }

        #modeCheckBox:checked+.content {
            background-color: black;
            color: white;
            width: 100px;
            height: 100px;
            font-size: 30px;
        }

        /* #modeBtn::after {
            content:'☀';
        }
        #modeCheckBox:checked + .box #modeBtn::after {
            content:'🌙';
        } */
    </style>
</head>

<body>
    <!-- 位置1 -->
    <label for="modeCheckBox" id="modeBtn">按钮1</label>
    <input type="checkbox" id="modeCheckBox">
    <!-- 位置2 -->
    <!-- <label for="modeCheckBox" id="modeBtn">按钮2</label> -->
    <div class="content">
        <!--  位置3 -->
        <!-- <label for="modeCheckBox" id="modeBtn">按钮3</label> -->
        <div class="box">这是个盒子</div>
    </div>
    <!-- 位置4 -->
    <!-- <label for="modeCheckBox" id="modeBtn">按钮4</label> -->
    <!-- <input type="checkbox" id="modeCheckBox"> -->
</body>