这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
这篇文章是看完月影老师的**<JavaScript 编码原则之各司其责>**后的笔记
[在这视频中,月影老师通过一个简单的切换模式的Demo来告诉我们写好JavaScript的第一大点——各司其职]
在之前的学习过程中,大家都说JavaScript是控制网页的行为举止的,那么我们要贯彻好各司其职这一核心思想
- 现在我们的浏览器啊,小说阅读器啊,都支持模式切换,那么下面的模式切换例子会让你更好地来理解什么是各司其职！！！
案例一: 萌新版的主题切换
萌新代码
- HTML
<body>
<header>
<button id="modelBtn">☀</button>
<h2>主题切换Demo: 萌新版</h2>
</header>
<main>
<div class="message">
<img src="C:\Users\HP\Desktop\掘金筆記代碼\图片\c32a389010920d7d51acb735ff93b1dd.jpg" alt="">
<p>
这个是小萌新能写出来的关于主题切换的代码
</p>
</div>
</main>
</body>
- CSS样式
body,
html {
padding: 0;
margin: 0;
overflow: hidden;
}
body{
padding: 10px;
box-sizing: border-box;
}
#modelBtn{
font-size: 2rem;
float: right;
border: none;
background: transparent;
}
</style>
-JS代码
const btn1 = document.querySelector("#modelBtn")
btn1.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 = '☀';
}
})
</script>
- 我们乍一看,诶嘿! 还行啊. 功能满足要求啊.但是,这段代码是不满足我们各司其职这项要求的
这里我们是直接通过JavaScript代码去直接控制我们的HTML和CSS. 还有,加入我现在想要再加入一些主题颜色供用户切换使用我们还是要更改我们的JS代码
所以萌新写的代码还有很大的改进空间
案例二: 资深萌新版主题切换
经过了一些历练、学习的资深萌新懂得了通过JS改变类名来实现主题切换,达到——各司其职
资深萌新代码
- CSS样式
body,
html {
padding: 0;
margin: 0;
overflow: hidden;
}
body{
padding: 10px;
box-sizing: border-box;
}
#modelBtn{
font-size: 2rem;
float: right;
border: none;
background: transparent;
}
#modelBtn::after{
content: '☀';
}
body.night{
background-color: black;
color: white;
transition: all 1s;
}
body.night #modelBtn::after{
content: '🌙';
}
</style>
-JS代码
const btn1 = document.querySelector("#modelBtn")
btn1.addEventListener('click',(e)=>{
const btn1 = document.querySelector("#modelBtn")
btn1.addEventListener('click',(e)=>{
const body = document.body
if(body.className !== 'night'){
body.className = 'night'
}else{
body.className = ''
}
})
</script>
我们发现资深萌新通过改变类名来进行主题切换,而且body.night这个类很好的说明了我们的需求,要是之后还要添加其他的主题,我们就可以通过同样的方式进行开发了
但是,月影老师还给出了大佬的版本
案例三:大佬版本的主题切换
让我们来学习大佬的版本
- HTML
<input id="modelBox" type="checkbox">
<div class="page">
<header>
<button id="modelBtn"></button>
<h2>主题切换Demo: 资深萌新版</h2>
</header>
<main>
<div class="message">
<img src="C:\Users\HP\Desktop\掘金筆記代碼\图片\Screenshot 2023-02-03 230805.png" alt="">
<p>
这个是小萌新能写出来的关于主题切换的代码
</p>
</div>
</main>
</div>
</body>
- CSS
body,
html {
padding: 0;
margin: 0;
overflow: hidden;
}
body {
padding: 10px;
box-sizing: border-box;
}
.page {
padding: 10px;
transition: background-color 1s, color 1s;
}
#modelBox {
display: none;
}
#modelBox:checked+.content {
background-color: black;
color: white;
transition: all 1s;
}
#modelBtn {
font-size: 2rem;
float: right;
}
#modelBtn::after {
content: '☀';
}
#modelBox:checkedc + .page #modeBtn::after {
content: '🌙';
}
</style>
我们看到大佬的主题切换根本就不需要写JS代码!
- 首先老师使用了CheckBox来表示两种状态[选中(model_1)/取消选中(model_2)]
- 然后对CheckBox设置display:none 来隐藏CheckBox美化页面
- 最后通过兄弟选择器 + 来改变主题
看到这里我只能说
总结
在以后的开发中,要避免JS代码去直接操作CSS和HTML,要做到各司其职。 对于纯展示的页面我们应当尽量去思考无JS代码的方案
