这是我参与「第四届青训营 」笔记创作活动的第3天
写好JavaScript的一些原则：
- 各司其职（让HTML、CSS和JavaScript职能分离）
- 组件封装（好的UI组件具备正确性、扩展性、复用性）
- 过程抽象（应用函数式编程思想）
一、各司其职
需求如下：
下面有三个不同的实现思路，我们逐一来看：
版本一：
直接操作dom的style属性，简单直接（不推荐）
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(e.target.innerHTML === '☀️') {
body.style.backgroundColor = 'black';
body.style.color = 'white';
e.target.innerHTML = '🌙';
} else {
body.style.backgroundColor = 'white';
body.style.color = 'black';
e.target.innerHTML = '☀️';
}
});
版本二：
封装了night类，代码比上一版更简洁
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'nignt';
} else {
body.className = '';
}
});
版本三：
纯展示类的交互需求可以完全脱离JavaScript用html和css来实现
说明：
:checked伪类用于匹配被用户选中的单选按钮Radio或复选按钮checkbox。
<label>标签用于绑定一个表单元素（for属性应当与相关元素的id属性相同），当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素。
思路：
将input设置为checkbox类型并将其隐藏，我们用label(模拟切换按钮)来与其关联，当我们点击label中的内容实际上点击了checkbox(选中与被选中两个状态)，当选中时我们利用伪类选择器:checked和相邻兄弟选择器来控制内容区父元素content的样式使其变为深色模式，当checkbox没有被选中时，自然就没有这个样式及白色模式。
总结：
- html、css和js三者各司其职
- 避免js直接操作样式
- 用class表示状态
- 纯展示类交互寻求零JS方案（并不一定需要）
