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

课程重点

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

详细内容

写好JS的一些原则

各司其职
组件封装
过程抽象

各司其职

在web体系中分为了三种语言，它们各自承担各自的角色，HTML负责去描述网站结构，CSS主要是负责网站的展示表现，JavaScript负责交互内容。

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

深夜食堂案例：

1）用js+css

用js+类class

3)纯css

组件封装

什么是组件？

组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。

一个好的组件特点：

封装性、正确性、扩展性、复用性

结构设计：HTML

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

展现效果：CSS

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

行为设计：API

API设计应保证原子操作，职责单一，满足灵活性。

行为设计：控制流

使用自定义事件来解耦

组件设计的原则：

封装性、正确性、扩展性、复用性

实现组件的步骤：

-   结构设计
-   展现效果
-   行为设计
    -   API（功能）
    -   Event（控制流）

三次重构:
- 插件化
  - 解耦（将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系）
- 模板化
  - 将HTML模块化，更易于扩展
- 抽象化（组件框架）
  - 将通用的组建模型抽象出来

过程抽象

用来处理局部细节控制
过程抽象是函数思想的基础

操作次数限制常用场景有

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

高阶函数

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

常用高阶函数

Once
Throttle
Debounce
Consumer/2
Iterative

Once

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

总结

过程抽象/HOF/装饰器
命令式/声明式

参考

1、参考课件

2、CSDN

JS编码原则之各司其责|青训营笔记