这是我参与「第四届青训营 」笔记创作活动的的第3天

前端基础知识-跟着月影学 JavaScript | 青训营笔记

写好JS的一些原则

• 各司其责：让HTML、CSS和JavaScript职能分离。
• 组件封装：好的UI组件具备正确性、扩展性、复用性。
• 过程抽象：应用函数式编程思想。

各司其责

问题：写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。 如果是你来实现，你会怎么做？

版本1

用button绑定点击事件，点击切换按钮之后修改css样式。这样用js修改css样式的做法违反了各司其职的原则。 青训营-深夜食堂-1 - 码上掘金 (juejin.cn)

版本2

相比于版本1，版本2使用js修改class名称。html的话是负责结构的，css负责表现，js负责行为。 青训营-深夜食堂-2 - 码上掘金 (juejin.cn)

版本3

但是这个例子可以有更好的做法，用纯css来实现，用css控制样式，版本3是没有js代码的。 核心代码如下，主要利用了伪类选择器:checked。

<input id="modeCheckBox" type="checkbox">
<label id="modeBtn" for="modeCheckBox"></label>

• 为checkbox分配一个for属性，设置值为checkbox的id；
• content是后边切换模式的内容；

#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: '🌜';
}

青训营-深夜食堂-3 - 码上掘金 (juejin.cn)

总结

• HTML/CSS/JS 各司其责
• 应当避免不必要的由 JS 直接操作样式
• 可以用 class 来表示状态
• 纯展示类交互寻求零 JS 方案

组件封装

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

用原生 JS 写一个电商网站的轮播图，应该怎么实现？

结构：HTML

轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。

表现：CSS

• 使用 CSS 绝对定位将图片重叠在同一个位置
• 轮播图切换的状态使用修饰符（modifier）
• 轮播图的切换动画使用 CSS transition

行为：API

青训营-轮播图-1 - 码上掘金 (juejin.cn)

行为：控制流

我们现在其实还少了一些东西，就是那个左右左右滑动的那个标记和底下的那个4个小圆点。

<a class="slide-list__next"></a>
<a class="slide-list__previous"></a>
<div class="slide-list__control">
    <span class="slide-list__control-buttons--selected"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
</div>

const detail = { index: idx }
const event = new CustomEvent('slide', { bubbles: true, detail })
this.container.dispatchEvent(event)

青训营-轮播图-2 - 码上掘金 (juejin.cn)

总结：基本方法

• 结构设计
• 展现效果
• 行为设计
  1. API （功能）
  2. Event （控制流）

重构：插件化

• 将控制元素抽取成插件
• 插件与组件之间通过依赖注入方式建立联系

青训营-轮播图-3 - 码上掘金 (juejin.cn)

重构：模板化

• 将HTML模板化，更易于扩展 青训营-轮播图-4 - 码上掘金 (juejin.cn)

组件框架

• 将组件通用模型抽象出来

青训营-轮播图-final - 码上掘金 (juejin.cn)

总结

• 组件设计的原则：封装性、正确性、扩展性、复用性

• 实现组件的步骤：结构设计、展现效果、行为设计

• 三次重构

  1. 插件化
  2. 模板化
  3. 抽象化（组件框架）

过程抽象

• 用来处理局部细节控制的一些方法
• 函数式编程思想的基础应用

操作次数限制

• 一些异步交互
• 一次性的HTTP请求

青训营-Once- - 码上掘金 (juejin.cn)

高阶函数

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

Once

为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

青训营-Once- - 码上掘金 (juejin.cn)

Throttle（节流）

节流是将多次执行变成每隔一段时间执行。

青训营-Throttle - 码上掘金 (juejin.cn)

Debounced（防抖）

防抖是将多次执行变为最后一次执行

青训营-Debounced - 码上掘金 (juejin.cn)