这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
如何写好 JS
写好 JS 的一些原则
- 各司其责
- 组件封装
- 过程抽象
今天我们来看第一个原则----各司其责
各司其责
以实现一个网页支持 浅色 和 深色 模式为例
版本一
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 = '🌞';
}
});
我们来看看版本一的逻辑：
- 获取了按钮
- 为按钮绑定了一个点击事件
- 获取了 body 元素
- 判断当前按钮是不是 🌞
- JS 直接修改 body 元素的样式
这一个版本，JS 直接操作样式的次数过多，性能较差。而且代码较为繁杂，不优雅。
版本二
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if (body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
这一版本，用 JS 改变 class，从而实现了 样式状态 的改变。相比上一版本，代码简洁很多，原因是对 JS 和 CSS 进行了分离。但是，还有没有更加优雅的方法呢？
我们来看版本三
版本三
HTML 代码部分
<body>
<input id="modeCheckBox" type="checkbox">
<div class="content">
<header>
<label id="modeBtn" for="modeCheckBox"></label>
<h1>深夜食堂</h1>
</header>
<mian>
...
</mian>
</div>
</body>
CSS 代码部分
#modeCheckBox:checked + .content { // 组合选择器
background-color: black;
color: white;
transition: all 1s;
}
这里 CSS 部分使用了 紧邻兄弟组合器 选中了 checkbox 后紧跟的 div
版本三没有使用 JS，直接用 CSS 就实现了 浅色 和 深色 模式的变化
结论
- HTML/CSS/JS 各司其责
- 避免不必要的 JS 直接操作样式
- 用 class 来表示状态
- 纯展示类交互寻求零 JS 方案
JS：行为
CSS：表现
HTML：结构
