如何写好 JavaScript - javascript

一份好的 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 = '🌞';
	// 处理文字颜色
	}
	});

很中规中矩的一种写法，通过按钮点击事件进行切换。~~也是初学者经常写的方式，乍看之下没什么不对的~~。

但是仔细想想，这里的 js 做了 css 的事，既修改了元素的样式，也修改了元素的结构，当代码量更多时，不利于后期维护。那么我们是不是可以进行一些优化呢？

既然版本一的问题是 js 做了 css 的事，那好我不用 js 改变 css , 主题变色这件事能不能做呢？答案自然是肯定的， class 就是用来设置一类样式的，我直接定义两种 class 的样式，然后通过控制 class 来实现不就可以了吗。

最后 JavaScript 就非常好写了

	const btn = document.getElementById('modeBtn');
	btn.addEventListener('click', (e) => {
	const body = document.body;
	if (body.className !== 'night') {
	body.className = 'night';
	} else {
	body.className = '';
	}
	});

通过这个代码，我们可以看到 JavaScript 做的仅仅是修改元素的类名 className，没有直接操作页面的样式，可读性也得到了很大的提升。（因为类名可以很好的反应这次业务的需求）

同时在 CSS 中可以做更多的一些操作，比如这里就加入了过渡的效果 transition: all 1s; ，使得用户体验更好！拓展性更高，如果要更改需求，比如要改变字体的颜色之类的，只需要改动 CSS 中的代码即可～

这里其实做的已经不错了～但是还有没更好的解决方案呢？

最好的 JS 代码，就是不写 JS！！！如何写出没有 bug 的 JS，那就是不写 JS！！！

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>深夜食堂</title>
	</head>
	<body>
	<input id="modeCheckBox" type="checkbox">
	<div class="content">
	<header>
	<label id="modeBtn" for="modeCheckBox"></label>
	<h1>深夜食堂</h1>
	</header>
	<main>
	<div class="pic">
	<img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
	</div>
	<div class="description">
	<p>
	这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
	眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6] 。
	</p>
	</div>
	</main>
	</div>
	</body>
	</html>

首先用一个大盒子将我们要显示的内容包裹起来，然后通过 label 元素代替之前的 button 元素，将它指向大盒子外面的 checkbox 元素

	body, html {
	width: 100%;
	height: 100%;
	max-width: 600px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	}

	body {
	box-sizing: border-box;
	}

	.content {
	padding: 10px;
	transition: background-color 1s, color 1s;
	}

	div.pic img {
	width: 100%;
	}

	#modeCheckBox {
	display: none;
	}

	#modeCheckBox:checked + .content {
	background-color: black;
	color: white;
	transition: all 1s;
	}

	#modeBtn {
	font-size: 2rem;
	float: right;
	}

	#modeBtn::after {
	content: '🌞';
	}

	#modeCheckBox:checked + .content #modeBtn::after {
	content: '🌜';
	}

最后的总结：