这是我参与「第四届青训营 」笔记创作活动的第1天
以下是我在参加此次青训营课程学习中的一些思考及总结。
写好JS的一些原则
当我们在进行团队协作时，好的代码能大大地提高我们的开发效率，它们具备以下几个特点：
各司其职：让HTML、CSS和JavaScript职能分离。
组件封装：好的UI组件具备正确性、扩展性、复用性。
过程抽象：应用函数式编程思想。
深夜食堂
写一段 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 = '🌞';
}
});
版本一的确可以实现我们所需要的效果，能不能优化一下？我们来看版本二
版本二
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
通过对比我们发现，版本二除了代码更加简洁之外，它操控的只是 className，获取对象的class 属性，而版本一则直接对CSS进行操控，JS做了CSS本该做的事情，没有遵守各司其职的原则，在我们进行团队合作时，更希望写的是版本二这样的代码。
除此之外，也有第三个版本，不用JS来实现，而是直接使用HTML + CSS，纯展示类的交互实现零JS。
部分代码如下：
html
<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">
...
</div>
</main>
</div>
css
#modeCheckBox {
display: none;
}
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
总结：
HTML/CSS/JS各司其职
应当避免不必要的由 JS 直接操作样式
可以用 class 来表示状态
纯展示类交互寻求零 JS 方案
组件封装
如果使用原生 JS 写一个网站的轮播图，你会如何实现？
结构：HTML
- 轮播图是一个典型的列表结构，我们可以使用无序列表
ul元素来实现
表现：CSS
- 用 CSS 绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符(modifier)
- 轮播图的切换动画使用 CSS transition
行为：JS
- 使用自定义事件来解耦
轮播图实现代码及效果如下：
我们通常会像上面这样来实现轮播图的效果，但是不够灵活，有几种不错的优化方案：
-
重构：插件化
-
将控制元素抽取成插件
-
插件与组件之间通过依赖注入方式建立联系
-
-
重构：模板化
- 将HTML模板化，更易于扩展
-
组件框架：
- 将组件通用模型抽象出来
总结：
组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构： 1. 插件化 2. 模板化 3. 抽象化(组件框架)
最后
以上就是我在青训营课程 《跟着月影学 JavaScript 》 中上半段课程的一些思考和总结。
