这是我参与「第四届青训营 」笔记创作活动的第1天
想聊一聊关于写好前端代码的事情，随着前端的这几年的快速发展，前端再也不像以前一样只单单用html，css，js写一些静态页面，而现在越来越注重工程化的思想，例如vue react框架的出现，让前端开发越来越规范化和模块化，现在的开发更加注重团队合作，开发效率，代码的可读性，项目的可维护性，代码的性能等方面。
1.那么，怎么样的去书写前端代码才是比较良好的方式呢？
大家不妨来看下以下的需求
写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。 如果是你来实现，你会怎么做？
如果用js来实现大家脑海里肯定会有一个想法就是这样的
const btn = document.getElementById('pattern');
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 = '🌞';
}
});
通过在太阳上绑定点击事件来控制整个主题的样式，这样是完全可以实现需求的，但是大家可否想过，他们违背了一个原则，就是：
让HTML、CSS和JavaScript职能分离。
html在前端应该是扮演一个书写结构的角色，css应该是一个展示表现的角色，js应该是一个体现行为的角色，三者应该各司其职，尽量减少一个角色去扮演另外一个角色的职能，例如
<p style="color:red;font-size="16px">测试</p>
这里的html直接去控制了css样式，也例如上面的例子中，通过了js控制了css本应控制的样式，这样的代码，无论是从团队之间阅读性，还是说从代码的可维护性，都变得更加困难，也没有让html、css、JavaScript发挥自己结构，表现，行为的职能，那么改如何改进上面的代码呢？
我们可以通过js去控制className去改变样式，并且通过 day 样式，和 night 样式来更改主题的样式，例如：
<div id="app">
<h2 class="title">
<p>贪得无厌的老虎的故事</p>
<p id="pattern">🌞</p>
</h1>
<p id="mean">
<img src="https://gimg2....."/>
<p class="mean_box">从前，......</p>
</p>
</div>
body,h2{
margin:0px;
padding: 0px;
}
#app{
height: 1000px;
}
.title{
display: flex;
justify-content: space-between;
}
.title:nth-child(1){
margin-left: 1rem;
}
#mean img{
margin:0rem;
width: 30rem;
height: 20rem;
}
.mean_box{
margin-left: 1rem;
text-indent:2em;
}
#pattern:hover{
cursor:pointer;
}
.night{
background-color: black;
color:white;
transition: all 1s;
}
.day{
background-color: white;
color: black;
transition: all 1s;
}
let btn = document.getElementById('app')
let pattern = document.getElementById('pattern')
btn.className = "night"
pattern.addEventListener("click",e=>{
if(app.className == "day"){
btn.className = "night"
}
else{
btn.className = "day"
}
})
这里通过去修改页面样classNmae 去修改主题，这样我们就不是直接通过js去修改样式，并且这样我们想去修改样式的时候，只需要找到对应的night 或者 day 即可修改不同的样式，并且功能更好的去扩展。也能让一个html css js 各司其职，但这里还有更好的解决方案，就是通过css3来实现全部功能，不动用js即可完成，这里就不做展示了。
总的来说
- HTML/CSS/JS 各司其责，应当避免不必要的由 JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零 JS 方案
