JavaScript温故而知新

前端

发布日期: 2022-01-17

文章字数: 580

阅读时长: 2 分

阅读次数:

JavaScript 温故而知新

参加字节跳动的青训营时写的笔记。这部分是月影老师讲的课。

1. 各司其责

HTML/CSS/JS 各司其责
避免不必要的直接使用 JS 操作样式(element.style.color=”red”)
使用 class 来表示状态
纯展示类交互寻求零 JS 方案(checkbox 的 checked 和 label，其中 checkbox 可以隐藏)

2. 组件封装

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

好的组件：封装性、正确性、扩展性、复用性

2.1 基本方法

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

2.2 重构

插件化
- 将控制元素抽象成插件
- 插件与组件之间通过依赖注入的方式建立联系
模板化
- 将 HTML 模板化，更易于扩展(即视图根据数据来更新，这样子需要变更图片之类的时候，就只需要在图片数组中操作，而不需要变更 HTML)
抽象化(组件框架)

例子：轮播图把上一页、下一页和分页按钮抽象成插件，就可以根据需要添加了

3. 过程抽象

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

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

3.1 高阶函数

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

function test(fn) {
  return function (...args) {
    return fn.apply(this, args);
  };
} // 等价范式

常用高阶函数：

Once

function once(fn) {
  return function (...args) {
    if (fn) {
      const ret = fn.apply(this, args);
      fn = null;
      return ret;
    }
  };
}

Throttle

function throttle(fn, time = 500) {
  let timer;
  return function (...args) {
    if (timer == null) {
      fn.apply(this, args);
      timer = setTimeout(() => {
        timer = null; /* 到期的话，清除之前的计时器 */
      }, time);
    }
  };
}