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

课程主要内容

JavaScript 好代码的标准

HTML/CSS/JS 各司其责

组件的定义解析及特征

组件封装基本方法

利用原生 JS 实现电商网站轮播图

过程抽象概念

高阶函数使用模式

JavaScript 编程范式

---

各司其责

HTML，CSS，JS 各自负责不同职能，尽量分开写，不要搅成一锅花粥

尽量避免用JS直接操作样式

可以用class表示状态

纯展示类交互可尝试零JS方案

---

组件封装

什么是组件？

组件：包含模板/结构（HTML），功能（JS），样式（CSS）

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

实现组件的步骤

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

组件的优化与改进

行为 → 提取通用特征和属性 → 插件 → 模板 → 抽象框架

重构——解耦

插件化

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

模板化

• 将HTML模板化，更易于扩展
• 示例

重构——组件框架

抽象

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

---

过程抽象

什么是过程抽象？

用来处理局部细节控制的一些方法
函数式编程思想：函数——已封装好的一个过程，我们主要关注输入、输出

高阶函数

为什么要使用高阶函数？

理解纯函数 pure function 与非纯函数

过程抽象 Procedural Abstraction

一个过程可以覆盖不同的事件，可以将这个过程剥离出来，进行抽象化，复用给不同对象

高阶函数 HOF 的含义

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

常用高阶函数

• Once
• Throttle
• Debounce
• Consumer
• Iterative

编程范式

编程语言的主要编程范式：

• 命令式 imperative——how

• 声明式 declarative——what

  逻辑式，函数式

JS 既有命令式的特点，也有声明式的特点