如何写好JS｜青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第3天。

主要内容

如何写好JS代码（本章内容主要是基于案例的实践）

如何写好JS代码

1. 各司其职
   案例：控制网页支持浅色和深色两种浏览模式
   个人思考：监听 click 和背景颜色，if bgcolor 为白，变为黑，else bgcolor 为黑，变为白。（想法为1，不简洁，没有做到各司其职）
   代码实现：
   

	<input id="modeCheckBox" type="checkbox">
	<div class="content">
		<header>
			<label id="modeBtn" for="modeCheckBox"></label>
			<h1>深夜食堂</h1>
		</header>
		<main>
		...
		</main>
	</div>
</body>

第一版：

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 = '🌜';//这个版本将css写入了js中
  } else {
    body.style.backgroundColor = 'white';
    body.style.color = 'black';
    e.target.innerHTML = '🌞';
  }
});

第二版（优化）：

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
	const body = document.body;
	if(body.className !== 'night'){
		body.className = 'night';//运用className来控制，更加简洁
	} else {
		body.className = '';
	}
});

第三版：用css写太阳图标的变化，纯视觉避免用js

#modeCheckBox {
	display: none;
}
#modeCheckBox: checked + .content {
	background-color: black;
	color: white;
	transition: all 1s;
}
#modeBtn::after {
	content:'🌞';
}

2. 组件封装
   组件是指Web页面上抽出来一个个包含三件套的单元。好的组件具备封装性、正确性、拓展性、复用性。 案例：轮播图 改进：插件化解耦JavaScript、模板化解耦HTML、组建框架
3. 过程抽象
   为了让“只执行一次”这个需求覆盖不同的事件处理，将这个需求剥离出来，这个过程就称之为过程抽象。

个人总结

优化是一个不断思考不断积累的过程，平常要多阅读大神的代码学习他们的思维逻辑，提高自己的意识。目前还是一个入门初学者，目标在于将程序写正确。通过这堂课我认识了优秀简明的代码存在的意义，从现在开始迈出最简单重要的一步，先从减少重复代码、css和js各司其职开始。