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

一、本堂课重点内容：

各司其责：

JavaScript 好代码的标准
HTML/CSS/JS 各司其责

组件封装：

组件的定义解析及特征
组件封装基本方法
利用原生： JS 实现电商网站轮播图

过程抽象：

过程抽象概念
高阶函数使用模式
JavaScript 编程范式

二、详细知识点介绍：

各司其责

HTML、CSS、Javascript在自己相应的模块各司其责，职能分离。JS可以直接操作样式，但是有时候HTML、CSS能够操作的情况，我们可以避免用JS来操作，减少一些不必要的JS代码来让他们各司其责。若是纯展示类的交互，我们应当追求无JS的方案，使用HTML和CSS来完成这样的交互。

组件封装

组件设计的几个原则是封装性、正确性、扩展性、复用性。实现组件的步骤是结构设计、展现效果和行为设计。对于组件，还需要三次重构，分别是插件化、模板化和抽象化。

过程抽象

过程抽象是处理局部细节控制的一些方法；是函数式编程思想的基础应用。

高阶函数

高阶函数是以函数作为参数和返回值，且常用于作为函数装饰器的函数。例如防抖节流函数都是常用的高阶函数。

编程范式

分为命令式与声明式两种。

三、实践练习例子：

各司其责版本一代码：

const btn = document.querySelector(".btn"); 
btn.addEventListener('click', (e) => { 
const body = document.body;
if (e.target.innerHTML === '🌞') { 
e.target.innerHTML = '🌜'; 
body.style.backgroundColor = 'black';
body.style.color = 'white'; 
} else {
e.target.innerHTML = '🌞';
body.style.backgroundColor = 'white';
body.style.color = 'black'; }
})

在这个代码中，我们可以看到JS中直接对DOM元素进行操作，来控制白天/深夜模式的转换，虽然说这样的代码可以实现我们的需求，但是JS和CSS并没有分离，也就是他们没有做到“各司其责”。而对于这个功能，其实可以通过CSS来实现。我们通过CSS来实现功能的思路是，设置一个input复选框，将label设置为图片，而通过label即可来控制复选框的勾选，通过复选框的勾选情况来触发CSS样式的变化从而实现白天/深夜的切换功能。

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

四、课后个人总结：

在本次课程中，通过JavaScript的三大编码原则，我了解到了各司其责、组件封装、过程抽象的重要性，也学习了一下组件封装的方法，过程抽象的一些概念。

JavaScript 编码原则 | 青训营笔记