这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天 本节课是由月影（十年踪迹）大佬讲授的js的一些编码规范，主要是从一个深夜食堂的例子出发，带我们体验如何做到js、css、html各司其职，给我的启发很大，值得学习。
如何写好 JavaScript
- 推荐了两本书，一本是JavaScript权威指南（犀牛书），另一本是JavaScript Good parts
- 原则：
- 各司其职
- 组件封装
- 过程抽象
各司其职
JavaScript、CSS、HTML职能分离
举了一个例子：写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式
实现一：btn切换
存在问题，只能局限于单个页面，如果多个页面需要修改，代码很重用，且js和css混合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑暗模式</title>
<style>
#btn {
border: 0;
border-radius: 1px;
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<button id="btn">☀️</button>
</div>
<script>
const btn = document.getElementById('btn')
btn.addEventListener('click', e => {
const body = document.body
if (e.target.innerHTML === '🌙') {
body.style.backgroundColor = 'white'
body.style.color = 'white'
e.target.innerHTML = '☀️'
} else {
body.style.backgroundColor = 'black'
body.style.color = 'black'
e.target.innerHTML = '🌙'
}
})
</script>
</body>
</html>
实现二：
通过className来切换，也就是做两套样式，切换方便且代码不会重复，js和css分离开
const btn = document.getElementById('btn')
btn.addEventListener('click', e => {
const body = document.body
if (body.className !== 'night') {
body.className = 'night'
} else {
body.className = '';
}
})
实现三：
通过html和css实现
<body>
<input id="modeCheckBox" type="checkbox">
<div class="content">
<header>
<label id="modeBtn" for="modeCheckBox"></label>
<h1>
深夜食堂
</h1>
</header>
</div>
</body>
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
通过这个例子，我们可以总结如下：
- HTML/CSS/JS 各司其职
- 应当避免不必要的由 js 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零 js 方案
组件封装
好的UI具备正确性、扩展性、复用性
过程抽象
应用函数编程式思想
