学习 JS | 青训营笔记

这是我参与「第四届青训营 - 前端场」笔记创作活动的第5天。

一、写JS的原则

1、各司其责

让 HTML、CSS 和 JS 职能分离

• 避免不必要的由 JS 直接操作样式

• 可以用 class 表示状态

• 纯展示交互寻求零 JS 方案

2、组件封装

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

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

• 结构行为表现分离

• 基本方法：结构设计、展现效果、行为设计

• 三次重构：插件化、模板化、抽象化（组件框架）

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

3、过程抽象

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

• 用来处理局部细节控制的一些方法

• 函数式编程思想

二、高阶函数（HOF）

把一个函数当做参数传递给另一个函数，称为高阶函数。

• 以函数作为参数

• 以函数作为返回值

• 常用于作为函数装饰器

function HOF0(fn) {
    return function(...args){
        return fn.apply(this, args);
    }
}

为什么要使用高阶函数？

• 可以减少代码量，使核心代码保持简洁

• 高阶函数可以替换正常函数的核心算法，但整体架构不变，让实现更为简单。

• 可以控制函数被触发的频率

常用高阶函数

• Once

• Throttle

• Debounce

• Consumer / 2

• Iterative

---

写代码最应该关注使用场景

---

如有错误欢迎指正