这是我参与「第四届青训营 」笔记创作活动的第6天
已经不想摆烂啦
自己也是从今年的3月份开始学习的前端，本以为关于JavaScript这些基础知识，已经掌握的还可以了，代码也会写了，与页面的交互操作也会完成，但是，青训营的这个课程，让我感受到了，写JavaScript不是想象中的那么简单...
课程ppt标题：《如何写 好 JavaScript》
这个 好 字 一开始还真没注意，当听完课，回过头来做笔记时，这个好，确实映入我的心里。
这节课的三个要点 之一
1.各司其责
让HTML、CSS和JavaScript职能分离。
在我当时看网上的课程，开始学习html css javascript 时 我是从来没有听说过，这种概念，各司其责 职能分离 我当时就在想：这不是肯定的吗，做自己该做的事情，css就做样式，js就做交互啊...
继续听课
首先来到了本节课的第一个案例：主题模式的转换(白天模式🌞 / 夜间模式🌜)
(我的想法)这个倒是非常简单了：不就是变换css样式吗，点击按钮变换呗。
然后给出了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 = '🌞';
}
});
确实和我想的一样，给按钮添加绑定事件，再变换背景....
然后接着月影老师问：这个版本有什么问题，这个版本让你优化，该怎么做？
然后我就觉得，这个版本挺好的，可能代码量看起来多了一点，可以减少代码量吧。
当时我就想到这种代码，用的三元表达式
const btn = document.querySelector('#modeBtn')
btn.addEventListener('click', (e) => {
const body = document.body;
body.className === '' ? body.className = 'night' : body.className = '';
})
因为一个是默认的样式,一个是夜间,那么就给夜间模式一个类名好了,单独给夜间模式设置一系列的样式,这样代码也显得少了。
但是! 居然给出了从未设想过的道路
不用js文件直接去操作样式,我只能说真的是学到了!
首先,我在学习前端时,遇到的点击事件,直接是去用js操作css的样式,基本上所有都是这么写的也从来没有听过可以这样写。先来看代码吧
<body>
<input id="modeCheckBox" type="checkbox">
<div class="content">
<header>
<label id="modeBtn" for="modeCheckBox"></label>
<h1>深夜食堂</h1>
</header>
.....
.....
.....
不难看出,这里是用了一个checkbox,就是说他只有 true/false 再把这个复选框隐藏起来,用label标签展示按钮 🌞/🌜 当我们点击这个按钮时等于是点击了checkbox
接下来看最重要的css代码部分:
... ...
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
... ...
#modeCheckBox:checked + .content #modeBtn::after {
content: '🌜';
}
首先,拿到input框的 选中 状态 并且通过 (+) 选择器(相当于左右类名都要符合条件)
翻译过来便是 : 若选中则执行下面的css的样式变换,所以下面的代码,就是夜间模式的样式。
接着完善代码,把按钮照此方法调整即可。
实在是给我这个新手,有了新的认知
总结:
原来 --- HTML/CSS/JS 各司其责 是这个意思,让我们避免不必要的由js操作css样式。
