这是我参与「第五届青训营 」笔记创作活动的第2天
本堂课重点内容
-
JavaScript 好代码的标准
- 各司其责（HTML/CSS/JS功能独立）
- 组件封装
- 过程抽象
-
评定代码逻辑好坏
风格，效率，约定，使用场景，设计
重点知识点介绍
各司其责
-
避免不必要的有JS直接操作样式
下面的例子使用JavaScript直接操作DOM来控制元素，应当避免
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控制类来切换状态
下面的例子通过类来判断状态并实现样式切换，🦾
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
-
纯展示类交互寻求零JS方案
下面的例子直接通过HTML和CSS来实现状态切换，通过使用伪元素选择器避免了使用JS，👍
<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>文字</p>
</div>
</main>
</div>
</body>
#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: '🌜';
}
组件封装
结构设计→展现效果→行为设计
在行为设计也就是JavaScript负责的部分，用API提供功能，用Event控制流
组件封装可以考虑重构，插件化、模板化和抽象化（组件框架）
具体例子见PPT
过程抽象
高阶函数
JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
常见的高阶函数有map(),filter(),reduce(),sort()等
我们可以将各种需求剥离出来，这个过程称为抽象化，然后使用高阶函数实现该抽象出来的需求
代码实践
- 交通灯
- 判断是否是4的幂
- 洗牌
- 拆红包
具体例子见PPT
课后个人总结
月影老师的课主要讲JavaScript的各种规范和优化，很多都是我之前从未思考过的东西。以前写的JavaScript代码总是想着“能跑就行”，在听了月影老师的四节课后，我对JavaScript的理解和追求有所改变。
