2022/02/26 更新

近期阅读《Javascript 设计模式与开发实践》

目前新了解到的设计模式

策略模式
代理模式
迭代器模式
命令模式
组合模式
享元模式

以往代码中有用过但是没有意识到的设计模式

策略模式
以往代码中有用过但是没有意识到的设计模式
迭代器模式
去年 12 月的推单项目中，处理多层级订单信息封装的基于 callback 订单信息 each 方法（就属于是迭代器模式中的内部迭代器）。
当时没有合适的中止迭代器的方法，用了 try/catch 的“骚操作”。在《Javascript 设计模式与开发实践》中学到了 Jquery each 方法的封装思路（利用 return false 和 for 循环的 break 来实现迭代器的中止操作）。

补充一些最近的新感悟

链表实现队列

一开始接触 Javascript 描述的队列数据结构时是用数组的 push 和 shift 方法来模拟出入队列或者 unshift/pop 方法。在阅读《学习 Javascript 数据结构与算法》一书时了解了数组操作的一些底层实现，在数组头部的元素增删操作（shift/unshift）都会导致数组中所有元素下标移动。这样一来无论是 push/shift 组合还是 unshift/pop 组合实现的队列都会有一种出或者入队列的操作事件复杂度偏高。
最近了解到可以运用链表数据结构来实现队列，这样出入队列的操作时间复杂度都是 O(1) 且空间复杂度和数组实现一样。（数组实现的队列-这里以 push/shift 组合举例-空间复杂度为 O(n),入队列操作的时间复杂度为 O(1) 出队列的时间复杂度为 O(n)。而链表实现的队列出入操作的时间复杂度都为 O(1) ,空间复杂度与数组实现一样为 O(n)）。

interface IListNode {
  value: any;
  next?: IListNode;
}

class Queue {
  private head: IListNode | null = null; // 队头节点
  private tail: IListNode | null = null; // 队尾节点
  private len = 0; // 链表长度

  /**
   * @description 入队列操作
   * @param item - 队列元素
   */
  push(item: any) {
    const newNode: IListNode = {
      value: item,
    };

    // 处理 head
    if (this.head == null) this.head = newNode;

    // 处理 tail
    if (this.tail) this.tail.next = newNode;
    this.tail = newNode;

    // 记录长度
    this.len++;
  }

  /**
   * @description 出队列操作
   */
  pop() {
    if (this.head == null) return null;
    if (this.len === 0) return null;

    // 取值
    const value = this.head.value;

    // 处理head
    this.head = this.head.next || null; // 剪切链表头部节点

    // 记录长度
    this.len--;

    return value;
  }

  /**
   * @description 队列大小（长度）
   */
  get size(): number {
    return this.len;
  }
}

数组（push/pop/shift/unshift）方法的实现思路

// 插入
// push 尾部插入
function push(arr, item) {
  arr[arr.length] = item;
}

// unshift 头部插入
function unshift(arr, item) {
  for (let i = arr.length; i > 0; i--) {
    arr[i] = arr[i - 1];
  }
  arr[0] = item;
}

// 弹出
// pop 尾部弹出
function pop(arr) {
  const last = arr[arr.length - 1];
  arr.length--;
  return last;
}

// shift 头部弹出
function shift(arr) {
  const first = arr[0];
  for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i + 1];
  }
  arr.length--;
  return first;
}

从上面的代码可以引申出数组实现栈的一个小点。我们利用数组实现栈数据结构的时候有两种思路（两组数组方法）push/pop 和 unshift/shift -数组尾部作为栈顶和数组头部作为栈顶-这两种思路都可以实现站的数据结构但是性能上有差距。unshift/shift 实现的栈每次出栈和入栈的操作都会有大量的数组元素下标操作会徒增时间复杂度，故我们一般会用 push/pop 来模拟栈（个人觉得也比较符合语义）。上面说到的链表实现队列也是出于类似的考虑(当然链表也可以实现栈)。

JQuery each 中止思路

const each = function (arr, cb) {
  for (let i in arr) {
    if (cb(arr[i], i) === false) break; // callback 的执行结果返回 false ,提前终止迭代
  }
};

2022/02/24 更新

现阶段针对“专业级”考试的书单

内部

《hw 语言通用的编程规范》
《hw 语言安全编程规范》
《hw 可信专业级大纲》

外部

《JavaScript 设计模式与开发实践》
《学习 Javascript 数据结构与算法》 **
《clean code Javascript》
《剑指 Offer》 (算法数据结构部分)

当下，针对 ng 的学习也是比较紧急的.

做一个简单的个人学习规划

短期：

快速上手 angular 项目开发（来自2024的自己：你做到了）
努力备考 “专业级” （看书刷题）（同上，你也做到了哈哈）

前段时间研究的源码，后续有机会继续深入吧