橙光笔记

源码共读 - cursor-effects

2025-10-27T14:54:36.000Z

cursor-effects全称 90s Cursor Effects ，是一个网页端鼠光标特效库。具体效果可以看这里。

基本使用

使用方式非常简单，只要引入对应的光标特效函数，然后调用即可。

import { emojiCursor } from "cursor-effects";

const cursor = new emojiCursor({ emoji: ["🔥", "🐬", "🦆"] });

// 可以调用下面函数销毁
// cursor.destroy();

在写这篇文章的时候，目前支持 12种 光标特效，后面有可能会增加，具体如下：

Rainbow Cursor
Emoji Rain
Elastic Emoji
Ghost Following
Trailing Cursor
Text Flag Cursor
Following Dot
Bubbles Particles
Snowflake Particles
Fairy Dust
Clock Cursor
Character Cursor

每一种光标特效的参数稍微有些差异，具体可以看Github中的简绍。

emojiCursor

cursor-effects 暴露了12个光标特效函数，每一个函数的基本结构大致都是相同的，我们这里先以 emojiCursor 为例。

emojiCursor 的效果如下：

emojiCursor 的函数结构，如下：

export function emojiCursor(options) {
  // ... 其他代码

  const prefersReducedMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)"
  );

  // Re-initialise or destroy the cursor when the prefers-reduced-motion setting changes
  prefersReducedMotion.onchange = () => {
    if (prefersReducedMotion.matches) {
      destroy();
    } else {
      init();
    }
  };

  function init() {
    if (prefersReducedMotion.matches) {
      console.log(
        "This browser has prefers reduced motion turned on, so the cursor did not init"
      );
      return false;
    }
    // ... 初始化逻辑
    bindEvents();
    loop();
  }

  // Bind events that are needed
  function bindEvents() {
    element.addEventListener("mousemove", onMouseMove, { passive: true });
    element.addEventListener("touchmove", onTouchMove, { passive: true });
    element.addEventListener("touchstart", onTouchMove, { passive: true });
    window.addEventListener("resize", onWindowResize);
  }

  function onWindowResize(e) {
    // ... 窗口重置逻辑
  }

  function onTouchMove(e) {
    // ... 触摸逻辑
  }

  function onMouseMove(e) {
    // ... 鼠标移动逻辑
  }

  function updateParticles() {
    // ... 更新粒子逻辑
  }

  function loop() {
    updateParticles();
    animationFrame = requestAnimationFrame(loop);
  }

  function destroy() {
    canvas.remove();
    cancelAnimationFrame(animationFrame);
    element.removeEventListener("mousemove", onMouseMove);
    element.removeEventListener("touchmove", onTouchMove);
    element.removeEventListener("touchstart", onTouchMove);
    window.addEventListener("resize", onWindowResize);
  }

  function Particle(x, y, canvasItem) {
    // 其他代码
  }

  init();

  return {
    destroy: destroy,
  };
}

由上可见，emojiCursor 函数调用了 init 函数来初始化光标特效，同时返回一个含有 destroy 方法的对象。

上面还有一段 prefersReducedMotion 相关的代码，如果用户开启了 prefers-reduced-motion: reduce 则不展示光标特效，以避免对用户造成过度刺激（如癫痫患者或对动态内容敏感的用户）。

init 函数

emojiCursor 函数内部的 init 函数如下：

export function emojiCursor(options) {
  const possibleEmoji = (options && options.emoji) || ["😀", "😂", "😆", "😊"];
  const delay = (options && options.delay) || 16;
  let hasWrapperEl = options && options.element;
  let element = hasWrapperEl || document.body;

  let width = window.innerWidth;
  let height = window.innerHeight;
  const cursor = { x: width / 2, y: width / 2 };
  const lastPos = { x: width / 2, y: width / 2 };
  let lastTimestamp = 0;
  const particles = [];
  const canvImages = [];
  let canvas, context, animationFrame;

  // ... prefersReducedMotion 相关代码

  function init() {
    // Don't show the cursor trail if the user has prefers-reduced-motion enabled
    if (prefersReducedMotion.matches) {
      console.log(
        "This browser has prefers reduced motion turned on, so the cursor did not init"
      );
      return false;
    }

    canvas = document.createElement("canvas");
    context = canvas.getContext("2d");

    canvas.style.top = "0px";
    canvas.style.left = "0px";
    canvas.style.pointerEvents = "none";
    canvas.style.zIndex = options.zIndex || "9999999999";

    if (hasWrapperEl) {
      canvas.style.position = "absolute";
      element.appendChild(canvas);
      canvas.width = element.clientWidth;
      canvas.height = element.clientHeight;
    } else {
      canvas.style.position = "fixed";
      document.body.appendChild(canvas);
      canvas.width = width;
      canvas.height = height;
    }

    context.font = "21px serif";
    context.textBaseline = "middle";
    context.textAlign = "center";

    possibleEmoji.forEach((emoji) => {
      let measurements = context.measureText(emoji);
      let bgCanvas = document.createElement("canvas");
      let bgContext = bgCanvas.getContext("2d");

      bgCanvas.width = measurements.width;
      bgCanvas.height = measurements.actualBoundingBoxAscent * 2;

      bgContext.textAlign = "center";
      bgContext.font = "21px serif";
      bgContext.textBaseline = "middle";
      bgContext.fillText(
        emoji,
        bgCanvas.width / 2,
        measurements.actualBoundingBoxAscent
      );

      canvImages.push(bgCanvas);
    });

    bindEvents();
    loop();
  }

}

在 emojiCursor 函数刚开始中，这里可以设置 emoji、delay、element、zIndex 四个参数，然后定义了一些变量。init 函数中，先创建 canvas 根据是否传 element 来判断挂载到 element 还是 document.body 中。然后根据传入的 possibleEmoji 绘制到 canvas 上，并把绘制有 emoji 的 canvas 保存在 canvImages 数组里，这样后面可以通过 context.drawImage() 来绘制这个 emoji。最后调用 bindEvents() 绑定鼠标移动事件，并调用 loop() 函数开始动画循环。

bindEvents 函数如下，监听鼠标、触摸和窗口重置事件。

function bindEvents() {
  element.addEventListener("mousemove", onMouseMove, { passive: true });
  element.addEventListener("touchmove", onTouchMove, { passive: true });
  element.addEventListener("touchstart", onTouchMove, { passive: true });
  window.addEventListener("resize", onWindowResize);
}

function onWindowResize(e) {
  width = window.innerWidth;
  height = window.innerHeight;

  if (hasWrapperEl) {
    canvas.width = element.clientWidth;
    canvas.height = element.clientHeight;
  } else {
    canvas.width = width;
    canvas.height = height;
  }
}

onMouseMove 函数和 onTouchMove 函数分别处理鼠标和触摸事件，核心逻辑是获取鼠标或触摸位置，并添加粒子。鼠标和触摸稍微有点不同的地方是触摸的时候直接在触发的位置添加粒子，而鼠标移动的时候有节流操作，同时移动超过1像素才添加粒子。onMouseMove 事件之所有在 onMouseMove 中使用
requestAnimationFrame, 是因为它结合 lastTimestamp 做了节流，可以限制 requestAnimationFrame 中的函数每一帧只执行一次，避免同一帧内多次执行导致性能浪费。

function onTouchMove(e) {
  if (e.touches.length > 0) {
    for (let i = 0; i < e.touches.length; i++) {
      addParticle(
        e.touches[i].clientX,
        e.touches[i].clientY,
        canvImages[Math.floor(Math.random() * canvImages.length)]
      );
    }
  }
}

function onMouseMove(e) {
  // Dont run too fast
  if (e.timeStamp - lastTimestamp < delay) {
    return;
  }

  window.requestAnimationFrame(() => {
    if (hasWrapperEl) {
      const boundingRect = element.getBoundingClientRect();
      cursor.x = e.clientX - boundingRect.left;
      cursor.y = e.clientY - boundingRect.top;
    } else {
      cursor.x = e.clientX;
      cursor.y = e.clientY;
    }

    const distBetweenPoints = Math.hypot(
      cursor.x - lastPos.x,
      cursor.y - lastPos.y
    );

    if (distBetweenPoints > 1) {
      addParticle(
        cursor.x,
        cursor.y,
        canvImages[Math.floor(Math.random() * possibleEmoji.length)]
      );

      lastPos.x = cursor.x;
      lastPos.y = cursor.y;
      lastTimestamp = e.timeStamp;
    }
  });
}

function addParticle(x, y, img) {
  particles.push(new Particle(x, y, img));
}

Particle 函数

Particle 函数定义的是粒子类，它放在每一个光标特效函数的内部，因为每种特效稍微有点不同。 emojiCursor 中的 Particle 函数接收三个参数，分别是粒子的初始位置 x、y，以及要绘制的 canvas（即 emoji）。在 Particle 函数中，定义了粒子的生命周期 lifeSpan、速度 velocity、位置 position。update 方法中，根据粒子的速度更新粒子的位置，同时减少 lifeSpan，并根据 lifeSpan 计算缩放比例，最后调用 context.drawImage() 绘制粒子，这里 scale 会随着 lifeSpan 的变小而变小，所以就有了 emoji 变小的效果。

function Particle(x, y, canvasItem) {
  const lifeSpan = Math.floor(Math.random() * 60 + 80);
  this.initialLifeSpan = lifeSpan; //
  this.lifeSpan = lifeSpan; //ms
  this.velocity = {
    x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
    y: Math.random() * 0.4 + 0.8,
  };
  this.position = { x: x, y: y };
  this.canv = canvasItem;

  this.update = function (context) {
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;
    this.lifeSpan--;

    this.velocity.y += 0.05;

    const scale = Math.max(this.lifeSpan / this.initialLifeSpan, 0);

    context.drawImage(
      this.canv,
      this.position.x - (this.canv.width / 2) * scale,
      this.position.y - this.canv.height / 2,
      this.canv.width * scale,
      this.canv.height * scale
    );
  };
}

updateParticles 函数

在 loop 函数中调用 updateParticles 函数，更新粒子的位置和生命周期，然后开启动画循环。updateParticles 函数每一帧执行一次，它会更新粒子的位置并绘制，对于 lifeSpan 小于 0 的粒子，会从数组中删除。

function loop() {
  updateParticles();
  animationFrame = requestAnimationFrame(loop);
}

function updateParticles() {
  if (particles.length == 0) {
    return;
  }

  context.clearRect(0, 0, width, height);

  // Update
  for (let i = 0; i < particles.length; i++) {
    particles[i].update(context);
  }

  // Remove dead particles
  for (let i = particles.length - 1; i >= 0; i--) {
    if (particles[i].lifeSpan < 0) {
      particles.splice(i, 1);
    }
  }

  if (particles.length == 0) {
    context.clearRect(0, 0, width, height);
  }
}

上面200多行代码就实现了 emoji 的光标动画效果。

fairyDustCursor

fairyDustCursor 的效果如下，效果与 emojiCursor 类似，只是掉落 emoji 换成了掉落星星。

fairyDustCursor 的代码与 emojiCursor 几乎相同，如下，只是把绘制 emoji 替换为绘制不同颜色的星号 * （即 fairySymbol 变量对应的符号），其他代码几乎一样只是粒子参数稍微修改了一下。

export function fairyDustCursor(options) {
  let possibleColors = (options && options.colors) || [
    "#D61C59",
    "#E7D84B",
    "#1B8798",
  ];
  // ... 忽略相同的代码

  const char = options.fairySymbol || "*";

  // ... 忽略 prefersReducedMotion 相关代码

  function init() {

    // ... 忽略相同的创建 canvas 代码

    possibleColors.forEach((color) => {
      // ... 忽略相同代码
      bgContext.fillStyle = color;
      bgContext.fillText(
        char,
        bgCanvas.width / 2,
        measurements.actualBoundingBoxAscent
      );

      canvImages.push(bgCanvas);
    });

    bindEvents();
    loop();
  }

  // ... 忽略类似代码
}

bubbleCursor

bubbleCursor 的效果如下，鼠标移动时，会生成一些小泡泡，小泡泡会浮起来并且越来越大，然后消失。

bubbleCursor 代码如下：

export function bubbleCursor(options) {
  let fillColor = options && options.fillColor ? options.fillColor : "#e6f1f7";
  let strokeColor = options && options.strokeColor ? options.strokeColor : "#3a92c5";

  // ... 忽略类似代码
  function Particle(x, y) {
    const lifeSpan = Math.floor(Math.random() * 60 + 60);
    this.initialLifeSpan = lifeSpan; //
    this.lifeSpan = lifeSpan; //ms
    this.velocity = {
      x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 10),
      y: -0.4 + Math.random() * -1,
    };
    this.position = { x: x, y: y };

    this.baseDimension = 4;

    this.update = function (context) {
      this.position.x += this.velocity.x;
      this.position.y += this.velocity.y;
      this.velocity.x += ((Math.random() < 0.5 ? -1 : 1) * 2) / 75;
      this.velocity.y -= Math.random() / 600;
      this.lifeSpan--;

      const scale =
        0.2 + (this.initialLifeSpan - this.lifeSpan) / this.initialLifeSpan;

      context.fillStyle = fillColor;
      context.strokeStyle = strokeColor;
      context.beginPath();
      context.arc(
        this.position.x - (this.baseDimension / 2) * scale,
        this.position.y - this.baseDimension / 2,
        this.baseDimension * scale,
        0,
        2 * Math.PI
      );

      context.stroke();
      context.fill();

      context.closePath();
    };
  }

  // ... 忽略类似代码
}

bubbleCursor 与 emojiCursor 代码也类似，只是 Particle 函数稍有不同，emojiCursor 函数的 Particle 函数是 drawImage 而 bubbleCursor 函数的 Particle 函数是调用 arc 画圆（泡泡）。

followingDotCursor

followingDotCursor 的效果如下，鼠标移动时，会有一个跟随鼠标移动的圆点。

followingDotCursor 代码如下：

export function followingDotCursor(options) {
  // ... 忽略类似代码
  let dot = new Dot(width / 2, height / 2, 10, 0.1);
  let color = options?.color || "#323232a6";

  function updateDot() {
    context.clearRect(0, 0, width, height);
    dot.moveTowards(cursor.x, cursor.y, context);
  }

  function loop() {
    updateDot();
    animationFrame = requestAnimationFrame(loop);
  }

  function Dot(x, y, width, lag) {
    this.position = { x: x, y: y };
    this.width = width;
    this.lag = lag;

    this.moveTowards = function (x, y, context) {
      this.position.x += (x - this.position.x) * this.lag;
      this.position.y += (y - this.position.y) * this.lag;

      context.fillStyle = color;
      context.beginPath();
      context.arc(this.position.x, this.position.y, this.width, 0, 2 * Math.PI);
      context.fill();
      context.closePath();
    };
  }

  // ... 忽略类似代码
}

followingDotCursor 把粒子命名成了 Dot，而且只有一个粒子。因为圆点要跟随鼠标移动，所以用到了缓动动画。缓动动画公式如下，缓动动画更多详情可以看这里。

当前速度 = (最终位置 - 当前位置) * 缓动系数。
新的位置 = 当前位置 + 当前速度。

trailingCursor

trailingCursor 的效果如下，鼠标移动时，会有一系列的鼠标做缓动动画。

trailingCursor 的代码如下：

export function trailingCursor(options) {
  le
  const totalParticles = options?.particles || 15;
  const rate = options?.rate || 0.4;
  const baseImageSrc = options?.baseImageSrc || "data:image/png;xxx"; // 默认光标的base64图片 太长了 这里省略
  let cursorsInitted = false;

  let baseImage = new Image();
  baseImage.src = baseImageSrc;

  // ... 忽略类似代码

  function onMouseMove(e) {
    if (hasWrapperEl) {
      const boundingRect = element.getBoundingClientRect();
      cursor.x = e.clientX - boundingRect.left;
      cursor.y = e.clientY - boundingRect.top;
    } else {
      cursor.x = e.clientX;
      cursor.y = e.clientY;
    }

    // 首次鼠标移动时一次性添加所有粒子
    if (cursorsInitted === false) {
      cursorsInitted = true;
      for (let i = 0; i < totalParticles; i++) {
        addParticle(cursor.x, cursor.y, baseImage);
      }
    }
  }

  function updateParticles() {
    context.clearRect(0, 0, width, height);

    let x = cursor.x;
    let y = cursor.y;

    particles.forEach(function (particle, index, particles) {
      let nextParticle = particles[index + 1] || particles[0];

      particle.position.x = x;
      particle.position.y = y;
      particle.move(context);
      x += (nextParticle.position.x - particle.position.x) * rate;
      y += (nextParticle.position.y - particle.position.y) * rate;
    });
  }

  // ... 忽略类似代码

  function Particle(x, y, image) {
    this.position = { x: x, y: y };
    this.image = image;

    this.move = function (context) {
      context.drawImage(
        this.image,
        this.position.x, // - (this.canv.width / 2) * scale,
        this.position.y //- this.canv.height / 2,
      );
    };
  }

  // ... 忽略类似代码
}

鼠标的样式由 baseImageSrc 决定，默认给了一个默认鼠标样式的base64图片。Particle 只要在特定位置绘制图片即可。在 updateParticles 中，第一个粒子是鼠标的位置（cursor.x 和 cursor.y），其他粒子是根据前一个粒子的位置做缓动动画，这样就有了一系列的跟随东海。需要注意的是最后一个粒子没有下一个粒子，这里把第一个粒子赋值给 nextParticle，是为了让程序走下去，最后一个的 nextParticle 计算出来的 x 与 y 不会被使用到。

springyEmojiCursor

springyEmojiCursor 的效果如下，相当于把多个 emoji 用一根绳子连接在了一起。

springyEmojiCursor 的代码如下：

export function springyEmojiCursor(options) {
  let emoji = (options && options.emoji) || "🤪";

  let nDots = 7;
  let DELTAT = 0.01;
  let SEGLEN = 10;
  let SPRINGK = 10;
  let MASS = 1;
  let GRAVITY = 50;
  let RESISTANCE = 10;
  let STOPVEL = 0.1;
  let STOPACC = 0.1;
  let DOTSIZE = 11;
  let BOUNCE = 0.7;

  let emojiAsImage;

  // ... 忽略类似代码
  function init() {
    // ... 忽略类似代码

    // 把 emoji 转换为 canvas 跟 emojiCursor 中的 canvImages 代码一样只不过这里是一个
    emojiAsImage = bgCanvas;

    let i = 0;
    for (i = 0; i < nDots; i++) {
      particles[i] = new Particle(emojiAsImage);
    }

    bindEvents();
    loop();
  }

  // ... 忽略类似代码
  function Particle(canvasItem) {
    this.position = { x: cursor.x, y: cursor.y };
    this.velocity = {
      x: 0,
      y: 0,
    };

    this.canv = canvasItem;

    this.draw = function (context) {
      context.drawImage(
        this.canv,
        this.position.x - this.canv.width / 2,
        this.position.y - this.canv.height / 2,
        this.canv.width,
        this.canv.height
      );
    };
  }

  // ... 忽略类似代码
}

目前看上面代码没啥特别的，绳子弹性效果的代码在 updateParticles 中。

// 二维向量类
function vec(X, Y) {
  this.X = X;
  this.Y = Y;
}

function updateParticles() {
  canvas.width = canvas.width;

  // follow mouse
  // 第一个粒子的位置是鼠标位置
  particles[0].position.x = cursor.x;
  particles[0].position.y = cursor.y;

  // Start from 2nd dot
  for (let i = 1; i < nDots; i++) {
    // 弹性力
    let spring = new vec(0, 0);

    if (i > 0) {
      // 跟前一个粒子的合力
      springForce(i - 1, i, spring);
    }

    if (i < nDots - 1) {
      // 跟后一个粒子的合力
      springForce(i + 1, i, spring);
    }

    // 阻力 方向速度的反方向 大小速度乘以阻尼系数来近似模拟
    let resist = new vec(
      -particles[i].velocity.x * RESISTANCE,
      -particles[i].velocity.y * RESISTANCE
    );

    // 加速度 = 力 / 质量
    let accel = new vec(
      (spring.X + resist.X) / MASS,
      (spring.Y + resist.Y) / MASS + GRAVITY
    );

    // 计算速度 这里算出来值过大 所以乘以了一个系数 DELTAT
    particles[i].velocity.x += DELTAT * accel.X;
    particles[i].velocity.y += DELTAT * accel.Y;

    // 速度过小则停止
    if (
      Math.abs(particles[i].velocity.x) < STOPVEL &&
      Math.abs(particles[i].velocity.y) < STOPVEL &&
      Math.abs(accel.X) < STOPACC &&
      Math.abs(accel.Y) < STOPACC
    ) {
      particles[i].velocity.x = 0;
      particles[i].velocity.y = 0;
    }

    // 计算位置
    particles[i].position.x += particles[i].velocity.x;
    particles[i].position.y += particles[i].velocity.y;

    let height, width;
    height = canvas.clientHeight;
    width = canvas.clientWidth;

    // 粒子超出下边距处理
    if (particles[i].position.y >= height - DOTSIZE - 1) {
      if (particles[i].velocity.y > 0) {
        particles[i].velocity.y = BOUNCE * -particles[i].velocity.y;
      }
      particles[i].position.y = height - DOTSIZE - 1;
    }

    // 粒子超出右边距处理
    if (particles[i].position.x >= width - DOTSIZE) {
      if (particles[i].velocity.x > 0) {
        particles[i].velocity.x = BOUNCE * -particles[i].velocity.x;
      }
      particles[i].position.x = width - DOTSIZE - 1;
    }

    // 粒子超出左边距处理
    if (particles[i].position.x < 0) {
      if (particles[i].velocity.x < 0) {
        particles[i].velocity.x = BOUNCE * -particles[i].velocity.x;
      }
      particles[i].position.x = 0;
    }

    particles[i].draw(context);
  }
}

上述用到了基础力学知识，先计算出 弹力(spring) 和 阻力(resist)，然后根据他们和重力计算出加速度，最后根据加速度计算出速度和位置，代码有点长不过根据注释来看条理还是很清晰。最后对超出边界处理，处理方式是速度反向并乘以一个小于1的系数来模拟弹性反弹并损失部分速度的过程，位置则修改到刚触碰到边界的位置。

这里还有一个 springForce 函数，用来计算两个粒子之间的弹力，代码如下。

function springForce(i, j, spring) {
  let dx = particles[i].position.x - particles[j].position.x;
  let dy = particles[i].position.y - particles[j].position.y;
  let len = Math.sqrt(dx * dx + dy * dy);
  if (len > SEGLEN) {
    let springF = SPRINGK * (len - SEGLEN);
    spring.X += (dx / len) * springF;
    spring.Y += (dy / len) * springF;
  }
}

先计算出绳子的长度，如果绳子比原来的长度伸长了，则计算弹力。弹力的大小是 弹性系数 * (绳子拉伸后长度 - 绳子原长度) ，也就是胡克定律，最后根据三角形的相似计算出 x轴 和 y轴 的分弹力。

胡克定律:
弹力 = 弹性系数 * (绳子拉伸后长度 - 绳子原长度)

rainbowCursor

rainbowCursor 的效果如下，光标拥有彩虹的特效。

rainbowCursor 的代码如下：

export function rainbowCursor(options) {
  // ... 忽略类似代码

  const totalParticles = options?.length || 20;
  // 默认颜色也是有讲究的 按照顺序分别是 赤橙黄绿蓝紫
  const colors = options?.colors || [
    "#FE0000",
    "#FD8C00",
    "#FFE500",
    "#119F0B",
    "#0644B3",
    "#C22EDC",
  ];
  const size = options?.size || 3;

  function onMouseMove(e) {
    // ... 忽略类似代码

    // 首次鼠标移动时一次性添加所有粒子
    if (cursorsInitted === false) {
      cursorsInitted = true;
      for (let i = 0; i < totalParticles; i++) {
        addParticle(cursor.x, cursor.y);
      }
    }
  }

  function updateParticles() {
    context.clearRect(0, 0, width, height);
    context.lineJoin = "round";

    // 用来存放粒子的位置
    let particleSets = [];

    let x = cursor.x;
    let y = cursor.y;

    particles.forEach(function (particle, index, particles) {
      let nextParticle = particles[index + 1] || particles[0];

      particle.position.x = x;
      particle.position.y = y;

      particleSets.push({ x: x, y: y });

      // 缓动动画
      x += (nextParticle.position.x - particle.position.x) * 0.4;
      y += (nextParticle.position.y - particle.position.y) * 0.4;
    });

    colors.forEach((color, index) => {
      context.beginPath();
      context.strokeStyle = color;

      if (particleSets.length) {
        context.moveTo(
          particleSets[0].x,
          particleSets[0].y + index * (size - 1)
        );
      }

      particleSets.forEach((set, particleIndex) => {
        if (particleIndex !== 0) {
          context.lineTo(set.x, set.y + index * size);
        }
      });

      context.lineWidth = size;
      context.lineCap = "round";
      context.stroke();
    });
  }

  function Particle(x, y) {
    this.position = { x: x, y: y };
  }

  // 首次鼠标移动时一次性添加所有粒子
}

这里的 Particle 只是用来记录坐标，而没有绘制的逻辑，核心逻辑在 updateParticles 中。updateParticles 函数中，第一个粒子的位置是鼠标当前的位置，然后后面的粒子跟前一个粒子做缓动动画，这样就有了彩虹跟随鼠标的缓动效果。彩虹的绘制也是很特别，它是在对应点下画了6条不同颜色的线（彩虹），将 lineCap 设置为 round，使线更加平滑，由于每次鼠标移动的距离很短（都是像素级别的），而每一条线又有 totalParticles - 1（默认20个点，19个小线段）个小线段，这样就有了弯曲的彩虹效果效果。updateParticles 实现的图片通过下面这个图，会更好理解一些，这里假设鼠标从右边移动到左边。

还有一些特效，原理与上面类似，这里就不再赘述了

源码共读 - grid-layout-plus

2025-08-05T14:30:13.000Z

grid-layout-plus是一个支持拖动、重新设置大小的网格布局组件。它的代码是在vue-grid-layout的基础上修改的，而 vue-grid-layout 又是参考 gridster.js 和 react-grid-layout。我们这里之所以讲 grid-layout-plus 是因为 grid-layout-plus 是基于 vue3 的，而 vue-grid-layout 是基于 vue2 的，当然组件的核心思想都是类似的，看懂一个组件其他的也会明白。

基本使用

我们这里直接用 grid-layout-plus 的官网示例来演示，代码如下：

<template>
  <GridLayout v-model:layout="layout" :row-height="30">
    <template #item="{ item }">
      <span class="text">{{ `${item.i}${item.static ? '- Static' : ''}` }}span>
    template>
  GridLayout>
template>

<script setup lang="ts">
import { reactive } from 'vue'

const layout = reactive<Layout>([
  { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
  { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
  { x: 4, y: 0, w: 2, h: 5, i: '2', static: false },
  { x: 6, y: 0, w: 2, h: 3, i: '3', static: false },
  { x: 8, y: 0, w: 2, h: 3, i: '4', static: false },
  { x: 10, y: 0, w: 2, h: 3, i: '5', static: false },
  { x: 0, y: 5, w: 2, h: 5, i: '6', static: false },
  { x: 2, y: 5, w: 2, h: 5, i: '7', static: false },
  { x: 4, y: 5, w: 2, h: 5, i: '8', static: false },
  { x: 6, y: 3, w: 2, h: 4, i: '9', static: true },
  { x: 8, y: 4, w: 2, h: 4, i: '10', static: false },
  { x: 10, y: 4, w: 2, h: 4, i: '11', static: false },
  { x: 0, y: 10, w: 2, h: 5, i: '12', static: false },
  { x: 2, y: 10, w: 2, h: 5, i: '13', static: false },
  { x: 4, y: 8, w: 2, h: 4, i: '14', static: false },
  { x: 6, y: 8, w: 2, h: 4, i: '15', static: false },
  { x: 8, y: 10, w: 2, h: 5, i: '16', static: false },
  { x: 10, y: 4, w: 2, h: 2, i: '17', static: false },
  { x: 0, y: 9, w: 2, h: 3, i: '18', static: false },
  { x: 2, y: 6, w: 2, h: 2, i: '19', static: false },
])
script>

布局 Layout 的类型定义如下，它是由 LayoutItem 的数组组成，而 LayoutItem 的必须字段有 w、h、x、y、i，分别表示 宽、高、X坐标、Y坐标 和 索引（id）。grid-layout-plus 默认把一行分为 col-num （默认 12）个元素份，每份高度row-height （默认 150 像素），而 w、h、x、y 传的值是占据了多少份，而不是像素。

export interface LayoutItemRequired {
  w: number,
  h: number,
  x: number,
  y: number,
  i: number | string
}

export interface LayoutItem extends LayoutItemRequired {
  minW?: number,
  minH?: number,
  maxW?: number,
  maxH?: number,
  moved?: boolean,
  static?: boolean,
  isDraggable?: boolean,
  isResizable?: boolean
}

export type Layout = Array<LayoutItem>

此时的效果可以点这里。

组件结构

grid-layout-plus 的核心组件就2个 grid-layout 和 grid-item。grid-layout是一个容器，用来计算网格布局；grid-item是拖动组件，内部使用 interact.js 来实现拖动和调整大小。

grid-layout 的基础结构如下：

<script setup lang="ts">
// ... 其他代码

const state = reactive({
  width: -1,
  mergedStyle: {},
  lastLayoutLength: 0,
  isDragging: false,
  placeholder: {
    x: 0,
    y: 0,
    w: 0,
    h: 0,
    i: '' as number | string,
  },
  layouts: {} as Record<Breakpoint, Layout>, // array to store all layouts from different breakpoints
  lastBreakpoint: null as Breakpoint | null, // store last active breakpoint
  originalLayout: null! as Layout, // store original Layout
})

const wrapper = ref<HTMLElement>()

// ... 其他代码
script>

<template>
  <div ref="wrapper" class="vgl-layout" :style="state.mergedStyle">
    <slot v-if="$slots.default">slot>
    <template v-else>
      <GridItem v-for="item in currentLayout" :key="item.i" v-bind="item">
        <slot name="item" :item="item">slot>
      GridItem>
    template>
    <GridItem
      v-show="state.isDragging"
      class="vgl-item--placeholder"
      :x="state.placeholder.x"
      :y="state.placeholder.y"
      :w="state.placeholder.w"
      :h="state.placeholder.h"
      :i="state.placeholder.i"
    >GridItem>
  div>
template>

从上可以看到，如果没有默认插槽的话，grid-layout-plus 会使用 GridItem 组件来渲染布局。此外在 idDragging 的时候会渲染 placeholder 。

grid-item 的基础结构如下：

<script setup lang="ts">
// ... 其他代码
const wrapper = ref<HTMLElement>()
const resizableAndNotStatic = computed(() => state.resizable && !props.static)

function tryInteract() {
  if (!interactObj.value && wrapper.value) {
    interactObj.value = interact(wrapper.value)
    if (!state.useStyleCursor) {
      interactObj.value.styleCursor(false)
    }
  }
}

const throttleDrag = throttle(handleDrag)

function tryMakeDraggable() {
  tryInteract()

  if (!interactObj.value) return

  if (state.draggable && !props.static) {
    const opts = {
      ignoreFrom: props.dragIgnoreFrom,
      allowFrom: props.dragAllowFrom,
      ...props.dragOption,
    }
    interactObj.value.draggable(opts)

    if (!dragEventSet) {
      dragEventSet = true
      interactObj.value.on('dragstart dragmove dragend', event => {
        // dragmove 触发比较多 使用节流函数
        event.type === 'dragmove' ? throttleDrag(event) : handleDrag(event)
      })
    }
  } else {
    interactObj.value.draggable({ enabled: false })
  }
}

const throttleResize = throttle(handleResize)

function tryMakeResizable() {
  tryInteract()

  if (!interactObj.value) return

  if (state.resizable && !props.static) {
    const maximum = calcPosition(0, 0, props.maxW, props.maxH)
    const minimum = calcPosition(0, 0, props.minW, props.minH)

    const opts: Record = {
      // ... 其他配置项
      ...props.resizeOption,
    }

    interactObj.value.resizable(opts)
    interactObj.value.on('resizestart resizemove resizeend', event => {
      // resizemove 触发比较多 使用节流函数
      event.type === 'resizemove' ? throttleResize(event) : handleResize(event)
    })

  } else {
    interactObj.value.resizable({ enabled: false })
  }
}

// ... 其他代码
script>

<template>
  <section ref="wrapper" :class="className" :style="state.style">
    <slot>slot>
    <span v-if="resizableAndNotStatic" :class="resizerClass">span>
  section>
template>

由上可见，grid-item 组件调用 tryMakeDraggable 和 tryMakeResizable 函数通过 interact.js 来分别实现拖动和调整大小的功能。

组件通信

grid-layout 与 grid-item 数据通信部分是通过 props 来实现的，这一点可以在上述 grid-layout 组件中 #item 插槽中的 v-bind="item" 来知晓。还有一部分通信方式是通过 inject 来实现的，代码如下。

// src\helpers\common.ts
export const LAYOUT_KEY = Symbol('LAYOUT_KEY') as InjectionKey<LayoutInstance>
export const EMITTER_KEY = Symbol('EMITTER_KEY') as InjectionKey<EventEmitter>

// src\components\grid-layout.vue
const emitter = createEventEmitter()

provide(
  LAYOUT_KEY,
  reactive({
    ...toRefs(props),
    ...toRefs(state),
    increaseItem,
    decreaseItem,
  }) as LayoutInstance,
)

provide(EMITTER_KEY, emitter)

watch(
  () => props.isDraggable,
  value => {
    emitter.emit('setDraggable', value)
  },
)

// src\components\grid-item.vue
const layout = inject(LAYOUT_KEY)
const emitter = inject(EMITTER_KEY)!

layout.increaseItem(instance)

function setDraggableHandler(isDraggable: boolean) {
  if (isNull(props.isDraggable)) {
    state.draggable = isDraggable
  }
}

onMounted(() => {
  // ... 其他代码
  emitter.on('compact', compactHandler)
  emitter.on('setDraggable', setDraggableHandler)
  emitter.on('setResizable', setResizableHandler)
})

onBeforeUnmount(() => {

  emitter.off('compact', compactHandler)
  emitter.off('setDraggable', setDraggableHandler)
  emitter.off('setResizable', setResizableHandler)
  // ... 其他代码

  if (interactObj.value) {
    interactObj.value.unset()
    interactObj.value = null
  }

  layout.decreaseItem(instance)
})

grid-layout 把自己的 props 和 state 以及 emitter 提供给 grid-item 组件使用。通过 inject 方式不但可以直接获取到 grid-layout 的所有状态，还可以拿 emitter 来触发的事件，哪怕 grid-layout 和 grid-item 隔了好几个组件，依然可以正常运行。

我们以 setDraggable 事件为例来讲解，当 grid-layout 的 props.isDraggable 发生变化时，grid-layout 会通过 emitter 触发 setDraggable 事件，grid-item 组件监听 setDraggable 事件，调用 setDraggableHandler 函数来处理。这里 grid-item 首先会判断 props.isDraggable ，如果为空的话则根据 grid-layout 的 props.isDraggable 来判断是否可以拖动。也就是说自己组件的 props 的优先级大于 grid-layout 的 props，这就可以保证 grid-item 在拖动上做到个性化，即使 grid-layout 不支持拖动，也可以自己设置 props.isDraggable 来支持单个 grid-item 拖动。

上述 increaseItem 和 decreaseItem 是在 grid-item 把自己的实例添加到 grid-layout 中了，这样 grid-layout 暴露给外界的 getItem 方法就可以获取到子组件中的信息了，不过这里本章无需关注。

grid-item 处理 resize 和 drag

在 grid-item 中，tryMakeResizable 方法，通过 interact.js 的回调函数调用 handleResize 函数来处理调整大小的逻辑。

let innerX = props.x
let innerY = props.y
let innerW = props.w
let innerH = props.h

function handleResize(event: MouseEvent & { edges: any }) {
  if (props.static) return

  const type = event.type

  // 排除异常场景
  if (
    (type === 'resizestart' && state.isResizing) ||
    (type !== 'resizestart' && !state.isResizing)
  ) {
    return
  }

  // 获取x、y坐标的像素值
  const position = getControlPosition(event)
  // Get the current drag point from the event. This is used as the offset.
  if (isNull(position)) return // not possible but satisfies flow

  const { x, y } = position
  const newSize = { width: 0, height: 0 }
  let pos
  switch (type) {
    case 'resizestart': {
      tryMakeResizable()
      previousW = innerW
      previousH = innerH
      // 计算像素值
      pos = calcPosition(innerX, innerY, innerW, innerH)
      newSize.width = pos.width
      newSize.height = pos.height
      // 记录初始大小
      state.resizing = newSize
      state.isResizing = true
      break
    }
    case 'resizemove': {
      // A vertical resize ignores the horizontal delta
      if (!event.edges.right && !event.edges.left) {
        lastW = x
      }

      // An horizontal resize ignores the vertical delta
      if (!event.edges.top && !event.edges.bottom) {
        lastH = y
      }

      const coreEvent = createCoreData(lastW, lastH, x, y)
      if (renderRtl.value) {
        newSize.width = state.resizing.width - coreEvent.deltaX / state.transformScale
      } else {
        newSize.width = state.resizing.width + coreEvent.deltaX / state.transformScale
      }
      newSize.height = state.resizing.height + coreEvent.deltaY / state.transformScale
      // 更新坐标
      state.resizing = newSize
      break
    }
    case 'resizeend': {
      pos = calcPosition(innerX, innerY, innerW, innerH)
      newSize.width = pos.width
      newSize.height = pos.height

      state.resizing = { width: -1, height: -1 }
      state.isResizing = false
      break
    }
  }

  // Get new WH
  pos = calcWH(newSize.height, newSize.width)
  if (pos.w < props.minW) {
    pos.w = props.minW
  }
  if (pos.w > props.maxW) {
    pos.w = props.maxW
  }
  if (pos.h < props.minH) {
    pos.h = props.minH
  }
  if (pos.h > props.maxH) {
    pos.h = props.maxH
  }

  if (pos.h < 1) {
    pos.h = 1
  }
  if (pos.w < 1) {
    pos.w = 1
  }

  lastW = x
  lastH = y

  if (innerW !== pos.w || innerH !== pos.h) {
    emit('resize', props.i, pos.h, pos.w, newSize.height, newSize.width)
  }
  if (event.type === 'resizeend' && (previousW !== innerW || previousH !== innerH)) {
    emit('resized', props.i, pos.h, pos.w, newSize.height, newSize.width)
  }
  emitter.emit('resizeEvent', event.type, props.i, innerX, innerY, pos.h, pos.w)
}

handleResize 通过 state.resizing 对象来保存 resize 过程中当前 grid-item 的宽高， state.isResizing 来记录是否处于移动过程中，这两个值后面还会用到。然后通过新的宽高计算出新的 w 和 h（份数）, 当然把它们限制在最小和最大范围内，最小是 1。最后通过 props 暴露 resize 和 resized 事件，再通过 emitter 触发 resizeEvent 事件，告诉 grid-layout 组件当前 grid-item 的大小已经改变了。

handleDrag 的处理与 handleResize 类型，只不过 handleResize 修改的是 grid-item 的宽高，而 handleDrag 修改的是grid-item 的位置，具体代码如下：

function handleDrag(event: MouseEvent) {
  if (props.static || state.isResizing) return

  const type = event.type
  if ((type === 'dragstart' && state.isDragging) || (type !== 'dragstart' && !state.isDragging)) {
    return
  }

  const position = getControlPosition(event)

  // Get the current drag point from the event. This is used as the offset.
  if (isNull(position)) return // not possible but satisfies flow
  const { x, y } = position
  const target = event.target as HTMLElement

  if (!target.offsetParent) return

  // let shouldUpdate = false;
  const newPosition = { top: 0, left: 0 }
  switch (type) {
    case 'dragstart': {
      previousX = innerX
      previousY = innerY

      const parentRect = target.offsetParent.getBoundingClientRect()
      const clientRect = target.getBoundingClientRect()

      const cLeft = clientRect.left / state.transformScale
      const pLeft = parentRect.left / state.transformScale
      const cRight = clientRect.right / state.transformScale
      const pRight = parentRect.right / state.transformScale
      const cTop = clientRect.top / state.transformScale
      const pTop = parentRect.top / state.transformScale

      if (renderRtl.value) {
        newPosition.left = (cRight - pRight) * -1
      } else {
        newPosition.left = cLeft - pLeft
      }
      newPosition.top = cTop - pTop
      state.dragging = newPosition
      state.isDragging = true
      break
    }
    case 'dragmove': {
      const coreEvent = createCoreData(lastX, lastY, x, y)
      // Add rtl support
      if (renderRtl.value) {
        newPosition.left = state.dragging.left - coreEvent.deltaX / state.transformScale
      } else {
        newPosition.left = state.dragging.left + coreEvent.deltaX / state.transformScale
      }
      newPosition.top = state.dragging.top + coreEvent.deltaY / state.transformScale
      if (state.bounded) {
        const bottomBoundary =
          target.offsetParent.clientHeight -
          calcGridItemWHPx(props.h, state.rowHeight, state.margin[1])
        newPosition.top = clamp(newPosition.top, 0, bottomBoundary)
        const colWidth = calcColWidth()
        const rightBoundary =
          state.containerWidth - calcGridItemWHPx(props.w, colWidth, state.margin[0])
        newPosition.left = clamp(newPosition.left, 0, rightBoundary)
      }

      state.dragging = newPosition
      break
    }
    case 'dragend': {
      const parentRect = target.offsetParent.getBoundingClientRect()
      const clientRect = target.getBoundingClientRect()

      const cLeft = clientRect.left / state.transformScale
      const pLeft = parentRect.left / state.transformScale
      const cRight = clientRect.right / state.transformScale
      const pRight = parentRect.right / state.transformScale
      const cTop = clientRect.top / state.transformScale
      const pTop = parentRect.top / state.transformScale

      // Add rtl support
      if (renderRtl.value) {
        newPosition.left = (cRight - pRight) * -1
      } else {
        newPosition.left = cLeft - pLeft
      }
      newPosition.top = cTop - pTop
      state.dragging = { top: -1, left: -1 }
      state.isDragging = false
      break
    }
  }

  // Get new XY
  let pos
  if (renderRtl.value) {
    pos = calcXY(newPosition.top, newPosition.left)
  } else {
    pos = calcXY(newPosition.top, newPosition.left)
  }

  lastX = x
  lastY = y

  if (innerX !== pos.x || innerY !== pos.y) {
    emit('move', props.i, pos.x, pos.y)
  }
  if (event.type === 'dragend' && (previousX !== innerX || previousY !== innerY)) {
    emit('moved', props.i, pos.x, pos.y)
  }
  emitter.emit('dragEvent', event.type, props.i, pos.x, pos.y, innerH, innerW)
}

handleDrag 中通过 state.dragging 记录位置信息（top 和 left），当然这里还支持 rtl。最后通过 emitter 触发 dragEvent 事件，告诉 grid-layout 组件当前 grid-item 的移动了。

综上，handleResize 和 handleDrag 就是计算出新的宽高或位置，并告诉 grid-layout 变化信息。

grid-layout 处理 resize 和 drag

当 grid-item 宽高或者位置变化的时候，就会影响到其他 grid-item 位置的变化，这里就需要在 grid-layout 处理其他grid-item 的位置信息。

// src\components\grid-layout.vue
emitter.on('resizeEvent', resizeEventHandler)
emitter.on('dragEvent', dragEventHandler)

function resizeEventHandler(
  eventType: string,
  i: number | string,
  x: number,
  y: number,
  h: number,
  w: number,
) {
  resizeEvent(eventType, i, x, y, h, w)
}

function dragEventHandler(
  eventType: string,
  i: number | string,
  x: number,
  y: number,
  h: number,
  w: number,
) {
  dragEvent(eventType, i, x, y, h, w)
}

在 grid-layout 中最重要的两个函数就是 resizeEvent 和 dragEvent 函数。我们先看 resizeEvent。

function resizeEvent(
  eventName: string | undefined,
  id: number | string,
  x: number,
  y: number,
  h: number,
  w: number,
) {
  // 先根据 id 找到对应 grid-item
  let l = getLayoutItem(currentLayout.value, id)!
  // GetLayoutItem sometimes return null object
  if (isNull(l)) {
    l = { h: 0, w: 0, x: 0, y: 0, i: '' }
  }

  let hasCollisions
  // 如果设置 preventCollision 为 true 的时候则拖拽 grid-item 只能放在空白区域
  if (props.preventCollision) {
    const collisions = getAllCollisions(currentLayout.value, { ...l, w, h }).filter(
      layoutItem => layoutItem.i !== l.i,
    )
    hasCollisions = collisions.length > 0

    // If we're colliding, we need adjust the placeholder.
    if (hasCollisions) {
      // adjust w && h to maximum allowed space
      let leastX = Infinity
      let leastY = Infinity
      collisions.forEach(layoutItem => {
        if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x)
        if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y)
      })

      if (Number.isFinite(leastX)) l.w = leastX - l.x
      if (Number.isFinite(leastY)) l.h = leastY - l.y
    }
  }

  if (!hasCollisions) {
    // Set new width and height.
    l.w = w
    l.h = h
  }

  if (eventName === 'resizestart' || eventName === 'resizemove') {
    state.placeholder.i = id
    state.placeholder.x = x
    state.placeholder.y = y
    state.placeholder.w = l.w
    state.placeholder.h = l.h
    nextTick(() => {
      state.isDragging = true
    })
    // this.$broadcast("updateWidth", this.width);
    emitter.emit('updateWidth', state.width)
  } else if (eventName) {
    nextTick(() => {
      state.isDragging = false
    })
  }

  if (props.responsive) responsiveGridLayout()

  compact(currentLayout.value, props.verticalCompact)
  emitter.emit('compact')
  updateHeight()

  if (eventName === 'resizeend') emit('layout-updated', currentLayout.value)
}

resizeEvent 的主要功能有修改 placeholder 的宽高和位置和显示，当设置 state.isDragging = true 的时候则显示 placeholder （可以在上面 组件结构 中看到相关代码）；如果设置了 responsive 则处理响应式布局；然后收缩布局并触发事件。compact 方法是 grid-layout 的核心算法，稍后我们再讲。触发 emitter.emit('compact') 则通知 grid-item 重新渲染。这个流程起初是在 grid-item 通知到 grid-layout 现在又回到 grid-item 了，当然这里通知的是所有的 grid-item 。

dragEvent 与 resizeEvent 的代码也是大同小异。

function dragEvent(
  eventName: string,
  id: number | string,
  x: number,
  y: number,
  h: number,
  w: number,
) {
  let l = getLayoutItem(currentLayout.value, id)!

  // GetLayoutItem sometimes returns null object
  if (isNull(l)) {
    l = { h: 0, w: 0, x: 0, y: 0, i: '' }
  }

  if (eventName === 'dragstart' && !props.verticalCompact) {
    positionsBeforeDrag = currentLayout.value.reduce(
      (result, { i, x, y }) => ({
        ...result,
        [i]: { x, y },
      }),
      {},
    )
  }

  if (eventName === 'dragmove' || eventName === 'dragstart') {
    state.placeholder.i = id
    state.placeholder.x = l.x
    state.placeholder.y = l.y
    state.placeholder.w = w
    state.placeholder.h = h

    nextTick(() => {
      state.isDragging = true
    })

    emitter.emit('updateWidth', state.width)
  } else {
    nextTick(() => {
      state.isDragging = false
    })
  }

  // Move the element to the dragged location.
  currentLayout.value = moveElement(currentLayout.value, l, x, y, true, props.preventCollision)

  if (props.restoreOnDrag) {
    // Do not compact items more than in layout before drag
    // Set moved item as static to avoid to compact it
    l.static = true
    compact(currentLayout.value, props.verticalCompact, positionsBeforeDrag)
    l.static = false
  } else {
    compact(currentLayout.value, props.verticalCompact)
  }

  // needed because vue can't detect changes on array element properties
  emitter.emit('compact')
  updateHeight()
  if (eventName === 'dragend') {
    positionsBeforeDrag = undefined
    emit('layout-updated', currentLayout.value)
  }
}

dragEvent 与 resizeEvent 最大的不同是调用了 moveElement 方法。resize 的时候影响的是当前 grit-item 的宽高，同时会影响右侧和下方的元素 y 值变化，这个过程的逻辑在 compact 函数里面，作用是消除空白区域使其紧凑。但是 drag 的时候修改的是位置，位置一变化，甚至会导致上面的元素挪到当前移动元素的下方，也就是换位，这就有了 moveElement 方法。

/**
 * Move an element. Responsible for doing cascading movements of other elements.
 *
 * @param        layout Full layout to modify.
 * @param   layoutItem      element to move.
 * @param       x    X position in grid units.
 * @param       y    Y position in grid units.
 * @param      isUserAction If true, designates that the item we're moving is
 *                                     being dragged/resized by th euser.
 */
export function moveElement(
  layout: Layout,
  layoutItem: LayoutItem,
  x?: number,
  y?: number,
  isUserAction = false,
  preventCollision = false,
): Layout {
  // 静态的不能移动，所以不做处理，直接返回布局
  if (layoutItem.static) return layout

  // 记录旧的值
  const oldX = layoutItem.x
  const oldY = layoutItem.y

  // y 越大越在下面 这里当前y大于目的地y 表示向上移动
  const movingUp = y && layoutItem.y > y
  // This is quite a bit faster than extending the object
  // 有值的时候才赋值 后面传 undefined 的时候 则不赋值
  if (typeof x === 'number') layoutItem.x = x
  if (typeof y === 'number') layoutItem.y = y
  // 标记移动
  layoutItem.moved = true

  // If this collides with anything, move it.
  // When doing this comparison, we have to sort the items we compare with
  // to ensure, in the case of multiple collisions, that we're getting the
  // nearest collision.
  let sorted = sortLayoutItemsByRowCol(layout)
  if (movingUp) sorted = sorted.reverse()
  // 获取所有碰撞的 grid-item 数据
  const collisions = getAllCollisions(sorted, layoutItem)

  // preventCollision为true 则不处理碰撞 赋值之前的值就行
  if (preventCollision && collisions.length) {
    layoutItem.x = oldX
    layoutItem.y = oldY
    layoutItem.moved = false
    return layout
  }

  // Move each item that collides away from this element.
  // 处理级联移动
  for (let i = 0, len = collisions.length; i < len; i++) {
    const collision = collisions[i]

    // Short circuit so we can't infinite loop
    if (collision.moved) continue

    // This makes it feel a bit more precise by waiting to swap for just a bit when moving up.
    // 移动到大于碰撞元素高度的1/4前不处理
    if (layoutItem.y > collision.y && layoutItem.y - collision.y > collision.h / 4) continue

    // Don't move static items - we have to move *this* element away
    if (collision.static) {
      layout = moveElementAwayFromCollision(layout, collision, layoutItem, isUserAction)
    } else {
      layout = moveElementAwayFromCollision(layout, layoutItem, collision, isUserAction)
    }
  }

  return layout
}

在 moveElement 中，对当前元素的移动通过给 x 和 y 坐标赋值来实现。然后遍历所有碰撞的元素，来做级联移动。在 moveElementAwayFromCollision 中第二个参数是碰撞的不动的元素，第三个参数是要移动的参数，如果 collision.static 为 true 的时候，则collision不动，移动当前元素；否则当前元素不动，移动碰撞的元素，这里很巧妙地通过参数的位置就实现了静态碰撞元素的处理。

/**
 * This is where the magic needs to happen - given a collision, move an element away from the collision.
 * We attempt to move it up if there's room, otherwise it goes below.
 *
 * @param   layout            Full layout to modify.
 * @param   collidesWith Layout item we're colliding with.
 * @param   itemToMove   Layout item we're moving.
 * @param  isUserAction  If true, designates that the item we're moving is being dragged/resized
 *                                   by the user.
 */
export function moveElementAwayFromCollision(
  layout: Layout,
  collidesWith: LayoutItem,
  itemToMove: LayoutItem,
  isUserAction?: boolean,
): Layout {
  const preventCollision = false // we're already colliding
  // If there is enough space above the collision to put this element, move it there.
  // We only do this on the main collision as this can get funky in cascades and cause
  // unwanted swapping behavior.
  if (isUserAction) {
    // Make a mock item so we don't modify the item here, only modify in moveElement.
    const fakeItem: LayoutItem = {
      x: itemToMove.x,
      y: itemToMove.y,
      w: itemToMove.w,
      h: itemToMove.h,
      i: '-1',
    }
    fakeItem.y = Math.max(collidesWith.y - itemToMove.h, 0)
    if (!getFirstCollision(layout, fakeItem)) {
      return moveElement(layout, itemToMove, undefined, fakeItem.y, preventCollision)
    }
  }

  // Previously this was optimized to move below the collision directly, but this can cause problems
  // with cascading moves, as an item may actually leapflog a collision and cause a reversal in order.
  return moveElement(layout, itemToMove, undefined, itemToMove.y + 1, preventCollision)
}

moveElementAwayFromCollision 中如果是用户手动操作，则把目标移动到 collidesWith.y - itemToMove.h 位置，这样目标与 collidesWith 刚好不碰撞。当然需要调用 getFirstCollision 检测一下，没碰撞就移动到这个位置，如果碰撞了则往下移动一格。之后调用 moveElement ，由于碰撞的 item 向下移动了一格，又会引发它下面的项目级联移动，直到所有元素都没发生碰撞。

如果对移动到 collidesWith.y - itemToMove.h 位置不理解，可以看下图，0 放在某个静态块的上面，如果 vertical-compact 的 props 为 false 时，就应该刚好放在静态块的上面；当然如果为 true 则后面的 compact 函数会把它处理在最顶部。

compact 实现

compact 方法是使得所有元素变得紧凑。在介绍 compact 前先看几个辅助方法：

/**
 * Given two layoutitems, check if they collide.
 * 判断两个元素是否碰撞
 *
 * @return True if colliding.
 */
export function collides(l1: LayoutItem, l2: LayoutItem): boolean {
  if (l1 === l2) return false // same element
  if (l1.x + l1.w <= l2.x) return false // l1 is left of l2
  if (l1.x >= l2.x + l2.w) return false // l1 is right of l2
  if (l1.y + l1.h <= l2.y) return false // l1 is above l2
  if (l1.y >= l2.y + l2.h) return false // l1 is below l2
  return true // boxes overlap
}


/**
 * Returns the first item this layout collides with.
 * It doesn't appear to matter which order we approach this from, although
 * perhaps that is the wrong thing to do.
 * 查找第一个碰撞的元素
 *
 * @param  {Object} layoutItem Layout item.
 * @return {Object|undefined}  A colliding layout item, or undefined.
 */
export function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined {
  for (let i = 0, len = layout.length; i < len; i++) {
    if (collides(layout[i], layoutItem)) return layout[i]
  }
}

// 获取所有碰撞的元素
export function getAllCollisions(layout: Layout, layoutItem: LayoutItem): Array<LayoutItem> {
  return layout.filter(l => collides(l, layoutItem))
}

/**
 * Get all static elements.
 * 获取所有静态元素
 * @param layout Array of layout objects.
 * @return  Array of static layout items..
 */
export function getStatics(layout: Layout): Array<LayoutItem> {
  return layout.filter(l => l.static)
}

/**
 * Get layout items sorted from top left to right and down.
 *
 * @return Layout, sorted static items first.
 */
export function sortLayoutItemsByRowCol(layout: Layout): Layout {
  return Array.from(layout).sort(function (a, b) {
    if (a.y === b.y && a.x === b.x) {
      return 0
    }

    if (a.y > b.y || (a.y === b.y && a.x > b.x)) {
      return 1
    }

    return -1
  })
}

这些方法整体比较简单，我们再看 compact 方法：

/**
 * Given a layout, compact it. This involves going down each y coordinate and removing gaps
 * between items.
 *
 * @param  layout Layout.
 * @param  verticalCompact Whether or not to compact the layout vertically.
 * @param minPositions
 * @return Compacted Layout.
 */
export function compact(layout: Layout, verticalCompact?: boolean, minPositions?: any): Layout {
  // Statics go in the compareWith array right away so items flow around them.
  const compareWith = getStatics(layout)
  // We go through the items by row and column.
  const sorted = sortLayoutItemsByRowCol(layout)
  // Holding for new items.
  const out: Layout = Array(layout.length)

  for (let i = 0, len = sorted.length; i < len; i++) {
    let l = sorted[i]

    // Don't move static elements
    if (!l.static) {
      l = compactItem(compareWith, l, verticalCompact, minPositions)

      // Add to comparison array. We only collide with items before this one.
      // Statics are already in this array.
      compareWith.push(l)
    }

    // Add to output array to make sure they still come out in the right order.
    out[layout.findIndex(i => i.i === l.i)] = l

    // Clear moved flag, if it exists.
    l.moved = false
  }

  return out
}

compact 先获取所有静态的元素赋值给 compareWith 。然后排序，以保证遍历的顺序是从左往右，从上到下的。然后对排好序的元素进行遍历。对于非静态的处理后加入到 compareWith 中（静态的已经在里面了）。这样就可以先确认静态元素的位置，然后从左到右从上到下把没碰撞的元素加入进来。

把元素处理成没碰撞的位置代码如下：

/**
 * Compact an item in the layout.
 */
export function compactItem(
  compareWith: Layout,
  l: LayoutItem,
  verticalCompact?: boolean,
  minPositions?: any,
): LayoutItem {
  if (verticalCompact) {
    // Move the element up as far as it can go without colliding.
    while (l.y > 0 && !getFirstCollision(compareWith, l)) {
      l.y--
    }
  } else if (minPositions) {
    const minY = minPositions[l.i].y
    while (l.y > minY && !getFirstCollision(compareWith, l)) {
      l.y--
    }
  }

  // Move it down, and keep moving it down if it's colliding.
  let collides
  while ((collides = getFirstCollision(compareWith, l))) {
    l.y = collides.y + collides.h
  }
  return l
}

compactItem 中，verticalCompact 为 true 的时候，则需要变的紧凑，变紧凑的过程是先把元素往上移动，移动到第一个发生碰撞的地方。当然如果一个元素上面是静态元素，那么向上移动肯定会碰撞的，所以向上移动后对于发生碰撞的元素还需要向下移动，直到不碰撞位置。这样在 compact 中遍历完所有排好序的元素，就会使所有元素变得紧凑。

grid-item 处理 compact 事件

还记得 grid-layout 无论是 dragEvent 还是 resizeEvent 在调用完 compact 方法都会调用 emitter.emit('compact') 吗？这是触发所有 grid-item 元素的 compact 事件，grid-item 中处理如下：

emitter.on('compact', compactHandler)

function compactHandler() {
  compact()
}

function compact() {
  createStyle()
}

function setTransform(top: number, left: number, width: number, height: number) {
  // Replace unitless items with px
  const translate = 'translate3d(' + left + 'px,' + top + 'px, 0)'
  return {
    transform: translate,
    WebkitTransform: translate,
    MozTransform: translate,
    msTransform: translate,
    OTransform: translate,
    width: width + 'px',
    height: height + 'px',
    position: 'absolute',
  }
}

function setTopLeft(top: number, left: number, width: number, height: number) {
  return {
    top: top + 'px',
    left: left + 'px',
    width: width + 'px',
    height: height + 'px',
    position: 'absolute',
  }
}

function createStyle() {
  if (props.x + props.w > state.cols) {
    innerX = 0
    innerW = props.w > state.cols ? state.cols : props.w
  } else {
    innerX = props.x
    innerW = props.w
  }

  const pos = calcPosition(innerX, innerY, innerW, innerH)

  if (state.isDragging) {
    pos.top = state.dragging.top
    // Add rtl support
    if (renderRtl.value) {
      pos.right = state.dragging.left
    } else {
      pos.left = state.dragging.left
    }
  }
  if (state.isResizing) {
    pos.width = state.resizing.width
    pos.height = state.resizing.height
  }

  let style
  // CSS Transforms support (default)
  if (state.useCssTransforms) {
    // Add rtl support
    if (renderRtl.value) {
      style = setTransformRtl(pos.top, pos.right!, pos.width, pos.height)
    } else {
      style = setTransform(pos.top, pos.left!, pos.width, pos.height)
    }
  } else {
    // top,left (slow)
    // Add rtl support
    if (renderRtl.value) {
      style = setTopRight(pos.top, pos.right!, pos.width, pos.height)
    } else {
      style = setTopLeft(pos.top, pos.left!, pos.width, pos.height)
    }
  }

  state.style = style
}

在 createStyle 中先让 innerX 和 innerW 设置在一个合法的数值范围内，然后获取到位置信息 pos，还记得之前的 state.dragging 和 state.resizing 吗？如果处于 drag / resize 过程中，则把对应的坐标给 pos。然后通过 useCssTransforms 来判断是使用 transform 还是 top/left 来设置位置。最后修改 state.style，在模版中对应的 grid-item 的 style 就会改变。

这就是 grid-layout-plus的核心流程，还有一些响应式等逻辑没有介绍，相信你也能看得懂对应的源码。

Canvas系列（21）：多边形碰撞检测

2025-07-21T11:32:43.000Z

之前的文章我们做过写过一篇碰撞检测的文章，那篇文章中我们简绍了，圆与圆的碰撞检测，长方形与长方形的碰撞检测，以及圆与长方形的碰撞检测。本章我们来介绍多边形与多边形的碰撞检测。

多边形类结构

我们先定义一个多边形的类，方便以后操作。

class Polygon {
  constructor(context, options = {}) {
    this.context = context;
    // 多边形顶点数组，每个顶点是一个包含 x 和 y 属性的对象
    this.vertices = options.vertices || [];
    this.color = options.color || '#000';
    this.vx = options.vx || 0;
    this.vy = options.vy || 0;
    this.ax = options.ax || 0;
    this.ay = options.ay || 0;
  }

  update() {
    this.vx += this.ax;
    this.vy += this.ay;
    // 更新每个顶点的位置
    for (let vertex of this.vertices) {
      vertex.x += this.vx;
      vertex.y += this.vy;
    }
  }

  draw() {
    this.context.save();
    this.context.beginPath();
    this.context.fillStyle = this.color;
    // 移动到第一个顶点
    if (this.vertices.length > 0) {
      this.context.moveTo(this.vertices[0].x, this.vertices[0].y);
      // 依次连接其他顶点
      for (let i = 1; i < this.vertices.length; i++) {
        this.context.lineTo(this.vertices[i].x, this.vertices[i].y);
      }
      // 闭合路径
      this.context.closePath();
      this.context.fill();
    }
    this.context.restore();
  }

  // TODO：判断点是否在多边形内
  isContainsPoint(x, y) {

  }

  moveBy(dx, dy) {
    for (let vertex of this.vertices) {
      vertex.x += dx;
      vertex.y += dy;
    }
  }

  getVertices () {
    return this.vertices;
  }
}

通过上面类我们就可以创建多边形了，使用方式如下：

const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 80;
const numVertices = 8;
const angleStep = (Math.PI * 2) / numVertices;
const vertices = [];
for (let i = 0; i < numVertices; i++) {
  const angle = i * angleStep;
  const x = centerX + radius * Math.cos(angle);
  const y = centerY + radius * Math.sin(angle);
  vertices.push({ x, y });
}

let polygon = new Polygon(context, {
  vertices,
  color: 'blue'
});

我们在画布中央，绘制了一个蓝色的正八边形，效果如下：

上述代码中有一个 isContainsPoint 用来判断点是否在多边形内。那么如何判断一个点在多边形内呢？这里我们就用到了射线法。

射线法

射线法（Ray Casting Algorithm） 是一种判断点是否在多边形内部的经典算法，其原理是非零环绕规则。射线法核心逻辑可概括如下：

从目标点向任意方向（通常选择水平向右）发射一条射线，若射线与多边形边界的交点数量为奇数，则点在多边形内部；若为偶数（包括 0），则点在多边形外部。

在射线法中，从目标点发射出的射线的方向是任意的，但是为了计算方便我们一般选择水平向右。然后遍历每条边，记录边与射线的相交次数。这里其实我们只关注相交次数是奇数还是偶数，而不关注具体的次数。所以也可以用一个默认为 false 的 boolean 类型的变量来记录，如果相交则对其取反，最后值如果是 true 则点在多边形内部，否则在外部。当然这里还有一个问题，怎么判断射线与线段是否相交呢？

对于水平向右的射线来说，只需要满足2个条件则射线与线段相交。

条件 1：射线发出点的 y 坐标在边的两个端点 y 之间；
条件 2：射线与边的交点的 x 坐标，在射线发出点的右侧。

对于第一条来说，只要满足 yi > y > yj 或者 yi < y < yj 就行，也就是 yi > y 与 yj > y 不相等。
对于第二条来说，先得求出交点的x坐标（交点的y坐标就是射线发出点的y左边），假设交点的x坐标用 x2 来表示，则根据相似三角形有 (xj - xi) / (yj - yi) = (x2 - xi) / (y - yi)，可得 x2 = (xj - xi) * (y - yi) / (yj - yi) + xi。所以 x < x2 即可说明交点在射线发出点的右侧。具体代码如下：

class Polygon {
  // ... 其他代码

  // 使用射线法判断点是否在多边形内
  isContainsPoint(x, y) {
    let inside = false;
    // j是上一个端点的索引，刚开始j是最后一个点
    for (let i = 0, j = this.vertices.length - 1; i < this.vertices.length; j = i++) {
      const xi = this.vertices[i].x, yi = this.vertices[i].y;
      const xj = this.vertices[j].x, yj = this.vertices[j].y;

      const intersect = ((yi > y) !== (yj > y)) &&
        (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
      if (intersect) inside = !inside;
    }
    return inside;
  }

  // ... 其他代码

}

有了 isContainsPoint 方法我们就可以给多边形添加拖拽了。

let mouse = captureMouse(canvas);
let selectedObj = null;

canvas.addEventListener('mousedown', () => {
  let startX = mouse.x;
  let startY = mouse.y;
  if (polygon.isContainsPoint(mouse.x, mouse.y)) {
    selectedObj = polygon;
  }

  if (selectedObj) {
    // 添加事件来模拟拖拽
    canvas.addEventListener('mousemove', onMouseMove, false);
    canvas.addEventListener('mouseup', onMouseUp, false);
    return true;
  }

  function onMouseMove () {
    const dx = mouse.x - startX;
    const dy = mouse.y - startY;

    selectedObj.moveBy(dx, dy);

    // 更新起始位置
    startX = mouse.x;
    startY = mouse.y;
  }

  function onMouseUp () {
    selectedObj = null;
    // 清除事件
    canvas.removeEventListener('mousemove', onMouseMove, false);
    canvas.removeEventListener('mouseup', onMouseUp, false);
  }
}, false);

captureMouse() 函数参考这里。

此时效果如下：

分离轴定理

现在回归我们的主题，我们的主题是多边形的碰撞检测。多边形的碰撞检测其实有好多种算法，比较经典的就是分离轴定理。著名的2D物理引擎 matter.js 的碰撞检测就是采用分离轴定理（SAT）。

分离轴定理（Separating Axis Theorem，简称 SAT） 是计算机图形学、物理引擎和碰撞检测领域中一个极其重要且基础性的原理，主要用于判断两个凸多边形或凸多面体之间是否发生碰撞（相交）。我们这里是二维的所以就是凸多边形，凹多边形不可以直接使用分离轴定理，但可以切割成多个凸多边形，然后使用分离轴定理。分离轴定理的核心内容是：

如果两个凸体（凸多边形或凸多面体）没有发生碰撞，那么必定存在一条直线（在 2D 中）或一个平面（在 3D 中），能够将这两个物体完全分隔开。这条直线或平面的法线方向，就称为分离轴。

上面这句话也好理解，如果两个凸多边形（凸多面体）没有发生碰撞，那么必定存在一条直线（一个平面），能够将这两个凸多边形（凸多面体）分隔开。

根据分离轴定理的逆否命题，我们可以得到一个用于碰撞检测的充分必要条件：

两个凸体（凸多边形或凸多面体）相交（碰撞），当且仅当两个凸体在所有的分离轴上的投影区间相交。如果存在在分离轴上的投影不相交的情况则不发生相交（碰撞）。

如图所示，两个多变形（三角形）和一条分离轴，多边形在分离轴上的投屏没有重合，则说明两个多边形没有发生碰撞。聪明的你此刻应该会挑选分离轴了，图中的是垂直于缝隙中的一边的分离轴，当然我们看一眼就知道选哪个边的垂直线（法线），但是计算机一眼看不出来，所以不防让多边形的所有边的法线作为分离轴来判断。

首先我们写一个辅助方法 getEdgesNormals，来获取多边形的所有边的法向量（垂直于边的向量）。

function getEdgesNormals(vertices) {
  const normals = [];
  for (let i = 0; i < vertices.length; i++) {
    const j = (i + 1) % vertices.length;
    const edgeX = vertices[j].x - vertices[i].x;
    const edgeY = vertices[j].y - vertices[i].y;
    // 计算法向量
    normals.push({ x: -edgeY, y: edgeX });
  }
  return normals;
}

上述 (edgeX, edgeY) 获取到的是边的向量，所以 (-edgeY, edgeX) 就是对应的法向量（垂直于边的向量），因为原向量和法向量的点积是 0 。不明白什么是点积也没关系，我画了一个图，相信你一眼就看明白了：

当然 (edgeY, -edgeX) 也可以作为法向量，只是方向不同，我们这里只要取一个方向就行了。

我们再写一个辅助方法 project，用来计算多边形顶点到某条分离轴投影的最大值和最小值。通过顶点在分离轴上投影的最大值和最小值就可以确定多边形在分离轴上的投影范围。

function project(vertices, axis) {
  let min = Infinity;
  let max = -Infinity;
  for (let vertex of vertices) {
    // 坐标轴原点到顶点的向量与轴向量的点积 就是顶点到轴的投影大小
    const dotProduct = vertex.x * axis.x + vertex.y * axis.y;
    min = Math.min(min, dotProduct);
    max = Math.max(max, dotProduct);
  }
  return { min, max };
}

接下来就是分离轴的核心方法了：

function isCollisionPolygonPolygon(vertices1, vertices2) {
  const axes1 = getEdgesNormals(vertices1);
  const axes2 = getEdgesNormals(vertices2);
  const allAxes = [...axes1, ...axes2];

  for (let axis of allAxes) {
    const projection1 = project(vertices1, axis);
    const projection2 = project(vertices2, axis);

    // 检查投影是否重叠
    if (!(projection1.max >= projection2.min && projection2.max >= projection1.min)) {
      return false; // 只要有一个轴不重叠，就没有碰撞
    }
  }
  return true; // 所有轴都重叠，发生碰撞
}

代码并不多，首先获取到2个多边形的边的法线，也就是分离轴。然后遍历所有分离轴，在每次循环中，分别对2个多边形的点的投影到这条分离轴上，找出两个图形投影的最大值和最小值，由于2个图案是在同一个分离轴上的投影，所以只要比较最大值和最小值的关系就可以判断是否发生重叠，进而知道多边形是否发生碰撞。当 (projection1.max >= projection2.min && projection2.max >= projection1.min) 的时候表示重叠了，取反表示没有重叠，有不重叠的分离轴则说明没有发生碰撞。当然 !(projection1.max >= projection2.min && projection2.max >= projection1.min) 不好理解的话，你可以可以写成 (projection1.max < projection2.min) || (projection2.max < projection1.min) , 也就是检测碰撞的两个多边形中其中一个投影的最大值小于另一个投影的最小值（投影是一维度的，这里可以想象成一条坐标轴上两个线段判断重叠的场景），则说明这个多边形投影的最大值和另一个多边形投影的最小值之间是有空隙，所以不存在重叠。不重叠的话就说明两个多边形没有发生相交（碰撞）。

上面的代码已经可以正常使用了，不过有的时候我们还希望知道 交叉深度 和 分离轴向量，以方便后续对碰撞处理，所以最好返回一个对象，把这两个信息也添加进去。

// SAT 碰撞检测函数
function isCollisionPolygonAndPolygon(vertices1, vertices2) {
  const axes1 = getEdgesNormals(vertices1);
  const axes2 = getEdgesNormals(vertices2);
  const allAxes = [...axes1, ...axes2];

  let minOverlap = Infinity;
  let collisionAxis = null;

  for (let axis of allAxes) {
    const projection1 = project(vertices1, axis);
    const projection2 = project(vertices2, axis);

    const overlap = Math.min(projection1.max, projection2.max) - Math.max(projection1.min, projection2.min);

    if (overlap < 0) {
      return {
        isColliding: false,
        depth: 0,
        axis: null
      };
    }

    if (overlap < minOverlap) {
      minOverlap = overlap;
      collisionAxis = axis;
    }
  }

  return {
    isColliding: true,
    depth: minOverlap,
    axis: collisionAxis
  };
}

此时的效果如下：

圆与多边形的碰撞检测

在一个系统中使用多种碰撞检测往往比较复杂，圆与多边形的碰撞检测往往是把圆转换成多边形，然后进行多边形与多边形的碰撞检测。

我们给 Ball 类添加一个方法 getVertices，用来获取圆的多边形顶点，这里把圆当做正多边形来处理，如果顶点数是奇数则加1，使之成为偶数正多边形，毕竟偶数正多边形更像圆。

class Ball {
  constructor(context, options = {}){
    this.context = context;
    this.x = options.x || 0;
    this.y = options.y || 0;
    this.radius = options.radius || 20;
    this.color = options.color || '#000';
    this.vx = options.vx || 0;
    this.vy = options.vy || 0;
    this.ax = options.ax || 0;
    this.ay = options.ay || 0;
  }

  update() {
    this.vx += this.ax;
    this.vy += this.ay;
    this.x += this.vx;
    this.y += this.vy;
  }

  draw() {
    this.context.save();
    this.context.beginPath();
    this.context.fillStyle = this.color;
    this.context.arc(this.x, this.y, this.radius, Math.PI / 180 * 0, Math.PI / 180 * 360);
    this.context.closePath();
    this.context.fill();
    this.context.restore();
  }

  isContainsPoint(x,y){
    return Math.hypot(this.x - x ,this.y - y) < this.radius;
  }

  getVertices (maxSides = 25) {
    // 若边数为奇数则加 1 使其具有偶数边
    const numSides = maxSides % 2 === 1 ? maxSides + 1 : maxSides;
    const vertices = [];
    const angleStep = (Math.PI * 2) / numSides;

    for (let i = 0; i < numSides; i++) {
      const angle = i * angleStep;
      const vertexX = this.x + this.radius * Math.cos(angle);
      const vertexY = this.y + this.radius * Math.sin(angle);
      vertices.push({ x: vertexX, y: vertexY });
    }

    return vertices;
  }

}

上述代码中 getVertices 中，边数 maxSides 过小的时候误差比较大，过大的时候误差较小，但性能变差了，这里默认值是 25（实际是 26 边形）。之所以取 25 是因为 matter.js 取的就是 25 。

判断的时候就可以把圆当做多边形来处理的代码如下：

1	isCollisionPolygonAndPolygon(boll.getVertices(), polygon2.getVertices()).isColliding

此时的效果如下：

凹多边形的碰撞检测

我们看一下凹多边形使用分离轴定理的结果，效果如下：

处理凹多边形的碰撞是拆分成多个凸多边形，然后进行碰撞检测，一般我们会通过 耳切法 把凹多边形切割成多个三角形（凸多边形）来处理。

凹多边形的碰撞检测作为了解即可，这里就不细讲了，直接给出代码：

// 计算两点间向量叉积
function crossProduct(p1, p2, p3) {
  return (p2.x - p1.x) * (p3.y - p1.y) - (p2.y - p1.y) * (p3.x - p1.x);
}

// 耳切法将凹多边形分解为三角形（凸多边形）
function earClipping(vertices) {
  const triangles = [];
  const remainingVertices = [...vertices];

  while (remainingVertices.length >= 3) {
    for (let i = 0; i < remainingVertices.length; i++) {
      const a = remainingVertices[(i - 1 + remainingVertices.length) % remainingVertices.length];
      const b = remainingVertices[i];
      const c = remainingVertices[(i + 1) % remainingVertices.length];

      // 判断是否为凸耳
      if (crossProduct(a, b, c) > 0) {
        let isEar = true;
        for (let j = 0; j < remainingVertices.length; j++) {
          if (j !== i && j !== (i - 1 + remainingVertices.length) % remainingVertices.length && j !== (i + 1) % remainingVertices.length) {
            const point = remainingVertices[j];
            // 判断点是否在三角形内
            if (isPointInTriangle(point, a, b, c)) {
              isEar = false;
              break;
            }
          }
        }
        if (isEar) {
          triangles.push([a, b, c]);
          remainingVertices.splice(i, 1);
          break;
        }
      }
    }
  }
  return triangles;
}

// 判断点是否在三角形内 也可以使用上面射线法的代码
function isPointInTriangle(p, a, b, c) {
  const areaABC = Math.abs(crossProduct(a, b, c));
  const areaPAB = Math.abs(crossProduct(p, a, b));
  const areaPBC = Math.abs(crossProduct(p, b, c));
  const areaPCA = Math.abs(crossProduct(p, c, a));

  return Math.abs(areaABC - (areaPAB + areaPBC + areaPCA)) < 1e-9;
}

// 修改后的 SAT 函数，支持凹多边形
function isCollisionConcavePolygon(vertices1, vertices2) {
  const convexPolygons1 = earClipping(vertices1);
  const convexPolygons2 = earClipping(vertices2);

  let minDepth = Infinity;
  let collisionAxis = null;
  let isColliding = false;

  for (let poly1 of convexPolygons1) {
    for (let poly2 of convexPolygons2) {
      const collisionResult = isCollisionPolygonAndPolygon(poly1, poly2);
      if (collisionResult.isColliding) {
        isColliding = true;
        if (collisionResult.depth < minDepth) {
          minDepth = collisionResult.depth;
          collisionAxis = collisionResult.axis;
        }
      }
    }
  }

  return {
    isColliding: isColliding,
    depth: isColliding ? minDepth : 0,
    axis: isColliding ? collisionAxis : null
  };
}

此时的效果如下：

Canvas系列（20）：画布中画满圆

2025-02-08T15:24:29.000Z

今天的内容比较简单，我们学习如何在画布中画满圆。要求圆与圆之间不能相交，最终效果如下。

HTML结构

首先我们先展示我们基础的HTML结构。

<style type="text/css">
  #canvas{
    background: #eeeeee;
    border: 1px solid #000000;
  }
style>

<canvas id="canvas" width="600" height="400">canvas>

这里绘制一个600*400的画布，并设置背景色为灰色，边框为1px的黑色。

绘制一个圆

我们从简单的开始，先绘制一个圆。由于我们这里不需要动画，所以不需要 update 方法，只需要 draw 方法即可。

const canvas = document.querySelector('canvas')
const context = canvas.getContext('2d')

context.lineWidth = 2

class Circle {
  constructor(options = {}) {
    this.x = options.x || 0
    this.y = options.y || 0
    this.radius = options.radius || minRadius
  }

  draw() {
    context.beginPath()
    context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
    context.stroke()
  }
}

const circle = new Circle({
  x: canvas.width / 2,
  y: canvas.height / 2,
  radius: 100
});

circle.draw()

我们在画布的中心绘制了1个半径为100px的圆。效果如下：

绘制500个圆

上面，我们绘制了1个圆，现在绘制500个圆。

const minRadius = 2
const maxRadius = 120
const totalCircles = 500

function createAndDrawCircle() {
  const newCircle = new Circle({
    x: Math.floor(Math.random() * canvas.width),
    y: Math.floor(Math.random() * canvas.height),
    radius: 10
  })
  newCircle.draw()
}

for(let i = 0; i < totalCircles; i++) {
  createAndDrawCircle()
}

上面代码在随机位置生成了500个半径是10px的小圆，效果如下：

绘制500个不相交的圆

上面绘制了500个圆，他们可能是相交的，现在我们绘制500个不相交的圆。
我们上面绘制的随机坐标很可能在某个圆内，为了避免这种情况，我们需要先判断圆心坐标是否在某个圆内。如果在某个圆内我们需要舍弃这个坐标，重新生成一个新坐标；如果不在某个圆内，那么我们可以在这里绘制圆。到底绘制多大圆呢？如果绘制的太大了则可能与旁边的圆相交或者超出画布边界，我们这里绘制一个尽可大的圆，尽可能大意味着刚好与其他圆或者边界相切。如果绘制一个这样的大圆呢？这里可以先使用很小的圆来计算，让其半径慢慢增大，当增大到刚好与某个圆或者边界相切时，则绘制它。如果一直不相切，我们最好给一个圆的最大半径，这样可以保证圆不会太大。

算法：

生成随机圆心坐标；
判断圆心坐标是否在某个圆内，如果在某个圆内，则舍弃这个坐标，重新生成一个新坐标（最坏情况下，可能一直没有符合要求的新坐标，则应该给限制，如最多尝试生成新坐标的500次）；
如果圆心坐标不在某个圆内，则让圆的半径逐渐增大，从而找到最大刚好跟其它圆或边界相切的最大圆；
绘制圆；
重复1~4步，直到所有圆绘制完毕（我们这里限定最多绘制500个圆）。

const circles = []
const createCircleAttempts = 500

function createAndDrawCircle() {
  let newCircle
  let circleSafeToDraw = false
  // 最多尝试500次寻找圆外坐标
  for(let tries = 0; tries < createCircleAttempts; tries++) {
    // 步骤1，生成随机圆心坐标
    newCircle = new Circle({
      x: Math.floor(Math.random() * canvas.width),
      y: Math.floor(Math.random() * canvas.height),
      radius: 10
    })

    // 步骤2，判断圆心坐标是否在某个圆内 如果与其他圆或者边界相交则舍弃当前坐标，重新生成一个新坐标，不相交则标记可以绘制
    if(doesCircleHaveACollision(newCircle)) {
      continue;
    } else {
      circleSafeToDraw = true
      break;
    }
  }

  // 如果循环500次都没有找到合适的新坐标则不绘制了
  if(!circleSafeToDraw) return

  // 保存需要绘制的圆
  circles.push(newCircle)
  // 步骤4，绘制圆
  newCircle.draw()
}

首先我们定义 circles 数组用来存放生成好的圆，createCircleAttempts 表示最多尝试 500 次寻找其他圆外新坐标。上面代码结合注释还是比较好理解的，我们还没有实现 doesCircleHaveACollision 方法，下面我们来实现它。

function doesCircleHaveACollision(circle) {
  for(let i = 0; i < circles.length; i++) {
    const otherCircle = circles[i]
    const a = circle.radius + otherCircle.radius
    const x = circle.x - otherCircle.x
    const y = circle.y - otherCircle.y

    if (a >= Math.hypot(x, y)) {
      return true;
    }
  }

  if(circle.x + circle.radius >= canvas.width ||
    circle.x - circle.radius <= 0) {
    return true;
  }

  if(circle.y + circle.radius >= canvas.height ||
      circle.y - circle.radius <= 0) {
    return true;
  }

  return false
}

当调用 doesCircleHaveACollision(circle) 方法的时候，新圆并没有加入到 circles 数组中，所以我们只需要判断新圆是否与数组中的圆相交并判断是否与边界相交就可以了。圆与圆的相交可以通过圆心间的距离跟半径之和做比较来判断，圆与边界可以通过圆的坐标和半径跟上下左右边界的距离做比较来判断。对碰撞检测感兴趣的同学可以翻看之前的文章。

此时效果如下：

绘制500个不相交且大小不等的圆

上面我们少了第3步，只绘制了大小都是10px的圆，现在我们处理一下第3步，实际上也不复杂。

// 最小半径
const minRadius = 2
// 最大半径
const maxRadius = 120

function createAndDrawCircle() {
  let newCircle
  let circleSafeToDraw = false
  // 最多尝试500次寻找圆外坐标
  for(let tries = 0; tries < createCircleAttempts; tries++) {
    // 步骤1，生成随机圆心坐标
    newCircle = new Circle({
      x: Math.floor(Math.random() * canvas.width),
      y: Math.floor(Math.random() * canvas.height),
      radius: minRadius, // 这里初始化使用最小半径
    })

    // 步骤2，判断圆心坐标是否在某个圆内 如果与其他圆或者边界相交则舍弃当前坐标，重新生成一个新坐标，不相交则标记可以绘制
    if(doesCircleHaveACollision(newCircle)) {
      continue;
    } else {
      circleSafeToDraw = true
      break;
    }
  }
  
  // 如果循环500次都没有找到合适的新坐标则不绘制了
  if(!circleSafeToDraw) return

  // 步骤3，让圆的半径逐渐增大，从而找到最大刚好跟其它圆或边界相切的圆
  for(let radiusSize = minRadius; radiusSize < maxRadius; radiusSize++) {
    newCircle.radius = radiusSize
    // 相切则跳出循环 由于描边宽度是2 所以需要减去1像素保证不相交
    if(doesCircleHaveACollision(newCircle)){
      newCircle.radius--
      break
    }
  }

  // 保存需要绘制的圆
  circles.push(newCircle)
  // 步骤4，绘制圆
  newCircle.draw()
}

此时的效果跟刚开始的效果一下了，点击这里查看。

小优化

上面我们绘制圆的时候，由于第一个绘制的圆只受边界相交的限制，假设第一个圆的坐标在靠近中心的位置，就有很大概率绘制一个最大的圆，所以当你多次刷新网页的时候就会发现，通常有一个很大的圆，这样不是那么美观。我们现在让绘制的最大半径修改成 圆最大半径 和 最小半径 + 1 之间的一个随机值，这样可以避免每次都有一个极大圆存在。

function createAndDrawCircle() {
  // ... 其他代码相同

  // 新的最大值为圆最小值和最大值之间的随机值
  const max = Math.floor(Math.random() * (maxRadius - minRadius - 1) + minRadius + 1)
  for(let radiusSize = minRadius; radiusSize < max; radiusSize++) {
    // ... 其他代码相同
  }

  // ... 其他代码相同
}

此时效果如下：

Canvas系列（19）：实战-五彩纸屑

2025-01-16T20:20:20.000Z

上一节我们学习了如何通过 Canvas 来实现烟花效果，这节我们学习另一种效果 —— 五彩纸屑。具体效果如下：

功能设计

如上图所以，要实现五彩纸屑效果，需要在屏幕左右两侧向上发射粒子。上一节，我们放烟花时也发射了粒子，这里可以继续复用上节课粒子相关代码。上一节我们绘制的是圆形，这节课通过最终效果来看绘制的是椭圆。

首先我们先抽象出一个 Confetti 类，该类控制展示五彩纸屑，它拥有一个核心方法就是 show。有了 Confetti 类我们还需要渲染每一个例子，当然需要一个 Particle 类，该类似于烟花的粒子，我们抄一抄就行。当每次调用 confetti.show() 的时候需要创建一堆纸屑粒子，纸屑粒子朝着特定的方向发射，后面随着重力落下，整体流程差不多就是这样。这里考虑到一次创建上百个粒子直接由 Confetti 类来管理，Confetti 类做的事情稍微有点多，所以我们再抽象出一层，一般的粒子效果把这一层叫发射器 Emitter；出于业务考虑，我们这里就抽象出批次这么个概念，每次发生一批粒子，用 ConfettiBatch 类来表示。Confetti 类每次创建一批粒子，它可能同时渲染好几批粒子，而每一批粒子，又分别由左右两个部分，每一部分又有好多纸屑粒子，一个简易的类图原型我们就有了。当然这里我们还有一些没有考虑进去的地方，如动画主循环等，不过不影响我们在此基础上进行开发。

Particle 类

我们先从 Particle 类开始，它的代码跟上次的烟花的粒子几乎是一样的：

class Particle {
  constructor(context, options = {}) {
    this.context = context
    this.x = options.x || 0
    this.y = options.y || 0
    this.vx = options.vx || 0
    this.vy = options.vy || 0
    this.ax = options.ax || 0
    this.ay = options.ay || 0
    this.radius = options.radius || 6
    this.radiusX = this.radius
    this.radiusY = this.radius
    this.rotation = options.rotation || 0;
    this.hColor = options.hColor ?? 180
  }

  update() {
    this.vx += this.ax
    this.vy += this.ay
    this.x += this.vx
    this.y += this.vy
  }

  draw() {
    this.context.save()
    this.context.beginPath()
    this.context.fillStyle = `hsl(${this.hColor} 100% 50%)`
    this.context.ellipse(this.x, this.y, this.radiusX, this.radiusY, this.rotation, 0, 2 * Math.PI)
    this.context.closePath()
    this.context.fill()
    this.context.restore()
  }

}

Particle 类的核心逻辑是通过 this.context.ellipse() 方法绘制了一个椭圆。五彩纸屑粒子相比于烟花粒子多了一个 rotation 属性，用来控制粒子旋转的角度。radius 属性表示椭圆的半径，这里我们把它又拆分成 radiusX 和 radiusY 分别是椭圆 X轴 和 Y轴 的半径，当两者相同的时候椭圆就是一个圆形，后面我们通过修改 radiusX 和 radiusY 来显示椭圆。

ConfettiBatch 类

ConfettiBatch 类用来处理一批粒子，包括左右两部分粒子。代码如下：

class ConfettiBatch {

  particles = []

  constructor(context, options = {}) {
    this.context = context;
    const number = options.number || 80;
    const radius = options.radius || 6;
    const canvasWidth = options.canvasWidth || 300;
    const canvasHeight = options.canvasHeight || 150;

    const leftParticles = new Array(number).fill(0).map(() => {
      const speed = random(8, 14)
      const angle = random(15, 82) * Math.PI / 180
      const absCos = Math.abs(Math.cos(angle))
      const absSin = Math.abs(Math.sin(angle))
      return new Particle(this.context, {
        x: -radius,
        y: canvasHeight * 5 / 7,
        vx: speed * absCos,
        vy: -speed * absSin,
        ax: 0,
        ay: 0.2,
        radius: radius,
        rotation: random(0, 0.2),
        hColor: Math.floor(random(360))
      })
    })

    const rightParticles = new Array(number).fill(0).map(() => {
      const speed = random(8, 14)
      const angle = random(15, 82) * Math.PI / 180
      const absCos = Math.abs(Math.cos(angle))
      const absSin = Math.abs(Math.sin(angle))
      return new Particle(this.context, {
        x: canvasWidth + radius,
        y: canvasHeight * 5 / 7,
        vx: -speed * absCos,
        vy: -speed * absSin,
        ax: 0,
        ay: 0.2,
        radius: radius,
        rotation: random(-0, 2, 0),
        hColor: Math.floor(random(360))
      })
    })

    this.particles = leftParticles.concat(rightParticles)
  }

  update() {
    this.particles.forEach(particle => {
      particle.update()
    })
  }

  draw() {
    this.particles.forEach(particle => {
      particle.draw()
    })
  }
  
}

ConfettiBatch 类中我们创建了2个数组 leftParticles 和 rightParticles 分别表示左右两部分粒子，每一个数组默认有80个粒子。我们生成粒子的速度是 8 ~ 12px 的随机数，角度是 15 ~ 82°。由于左侧的粒子是朝右上角发射的，而右边的粒子是从左上角发射的，所以左侧粒子的 vx 的值是正数，右侧粒子的 vx 的值是负数。两者都是向上发射的，所以 vy 都是负数（Canvas y轴向下）。最后我们把两部分粒子放在 particles 数组中，以方便在更新和绘制的时候，一个循环就搞定了。

Confetti 类

Confetti 类核心方法是 show() 方法，该方法用来创建一批粒子并启动动画循环。此外我们还添加 clear() 方法用来清空渲染的批次，destroy() 方法用来销毁 Canvas，代码如下：

class Confetti {
  batches = []

  constructor(options = {}) {
    this.canvas = options.canvas || createCanvas()
    this.context = this.canvas.getContext('2d')
  }

  show(showOptions = {}) {
    const canvasRect = this.canvas.getBoundingClientRect()
    const canvasWidth = canvasRect.width
    const canvasHeight = canvasRect.height

    const batch = new ConfettiBatch(this.context, {
      number: showOptions.number,
      radius: showOptions.radius,
      canvasWidth: canvasWidth,
      canvasHeight: canvasHeight,
    })
    this.batches.push(batch)
    this.loop()
  }

  update() {
    this.batches.forEach(batch => {
      batch.update()
    })
  }

  draw() {
    this.batches.forEach(batch => {
      batch.draw()
    })
  }

  loop = () => {
    const canvasWidth = this.canvas.canvasWidth
    const canvasHeight = this.canvas.offsetHeight
    this.context.clearRect(0, 0, canvasWidth, canvasHeight)
    this.update(canvasHeight)
    this.draw()

    requestAnimationFrame(this.loop)
  }

  clear() {
    this.batches = []
  }

  destroy() {
    this.clear()
    this.canvas.remove()
  }
}

const confetti = new Confetti()
confetti.show()

Confetti 类构造函数的参数中需要传一个 canvas，用来告诉我们需要绘制在哪里，但是更多时候我们需要绘制的是整个屏幕，此时就不需要再传 canvas 了，这里通过 createCanvas() 方法来创建一个全屏的不可交互的 canvas, 具体代码如下：

function createCanvas() {
  const canvas = document.createElement('canvas')
  canvas.style.position = 'fixed'
  canvas.style.width = '100%'
  canvas.style.height = '100%'
  canvas.style.top = '0'
  canvas.style.left = '0'
  canvas.style.zIndex = '1000'
  canvas.style.pointerEvents = 'none'
  document.body.appendChild(canvas)
  return canvas
}

此时，你兴高采烈的运行代码，结果发现屏幕上什么都没有！到底发生什么事了？我们的代码哪里有 BUG ？我们看看 createCanvas() 方法，该方法通过CSS修改了 canvas 的大小，但是 canvas 高度实际上是默认的 300px * 150px，因为上面并没有通过 HTML 或者 JS 的方式设置宽高，原来问题出在这里。现在我们修复这个 BUG，让每次绘制的时候都将 canvas 的宽高设置成真实显示的 Canvas 宽高，具体代码如下：

function normalizeComputedStyleValue(string) {
  return +string.replace(/px/, '')
}

function fixWidthAndHeight(canvas) {
  const computedStyles = getComputedStyle(canvas)

  const width = normalizeComputedStyleValue(computedStyles.getPropertyValue('width'))
  const height = normalizeComputedStyleValue(computedStyles.getPropertyValue('height'))

  canvas.setAttribute('width', width)
  canvas.setAttribute('height', height)
}

class Confetti {
  // ... 其他代码相同
  loop = () => {
    // 设置当前宽高为显示的宽高
    fixWidthAndHeight(this.canvas)

    // 这里获取到的是真实的宽高
    const canvasWidth = this.canvas.canvasWidth
    const canvasHeight = this.canvas.offsetHeight
    this.context.clearRect(0, 0, canvasWidth, canvasHeight)
    this.update(canvasHeight)
    this.draw()

    requestAnimationFrame(this.loop)
  }
  // ... 其他代码相同
}

这里也可以考虑通过 devicePixelRatio 来根据设备像素比进行对 Canvas 缩放以保证更清晰的显示效果，由于我们这的文章主要内容是绘制五彩纸屑的思想，为了使代码更易懂就不考虑设备像素比了。由于我们在每次循环中都把 Canvas 的宽高设置为实际显示的宽高，所以这里也不需要像烟花的代码一样监听 resize 来处理视口的变化。

现在的效果如下：

3D旋转粒子

上面效果还是比较生硬的，没有纸片翻转的感觉。正常3D翻转如下，可用CSS轻松实现。

我们这里每一个粒子都需要像上面这样旋转，对于单个粒子（圆）来说，在3D旋转过程中半径是不变的，角度可以看成是线性变化的，所以高度可以通过三角函数来 r * cos(θ) 来计算。不过这里有一种更简单的做法来近似计算，就是线性修改椭圆的高度。虽然效果上来说并不是真正的3D旋转，但在较小的粒子上跟真实的3D旋转效果差距不大，而且计算量更小，所以我们这里通过线性修改 radiusY 的值来近似模拟粒子3D旋转效果。

Particle 类我们新增了2个参数 radiusYSpeed 和 rotationSpeed 分别表示y轴半径变化的速度和，圆形旋转的速度，同时还新增了一个 radiusYDirection 属性（可选值down、up），用来表示当前y轴半径变化的方向，当值为 down 的时候，表示圆的Y轴半径变小；当值为 up 的时候，表示圆的Y轴半径变大。在 update 方法中我们通过 radiusYDirection 来修改 radiusY 的值，如果是 down 的时候，radiusY 每次减去它的速度直到小于0后反向，同样的当值为 up 的时候，radiusY 每次加上它的速度直到大于圆的半径后反向。如下：

class Particle {
  constructor(context, options = {}) {
    // ... 其他代码相同
    this.rotationSpeed = options.rotationSpeed || 0;
    this.radiusYSpeed = options.radiusYSpeed || 0;
    this.radiusYDirection = 'down'
  }

  update() {
    this.vx += this.ax
    this.vy += this.ay
    this.x += this.vx
    this.y += this.vy

    if (this.radiusYDirection === 'down') {
      this.radiusY -= this.radiusYSpeed;
      if (this.radiusY < 0) {
        this.radiusY = -this.radiusY
        this.radiusYDirection = 'up'
      }
    } else {
      this.radiusY += this.radiusYSpeed;
      if (this.radiusY > this.radius) {
        this.radiusY = this.radius - (this.radiusY - this.radius)
        this.radiusYDirection = 'down'
      }
    }
    this.rotation += this.rotationSpeed
  }

  // 其他代码相同
}

ConfettiBatch 类在创建粒子的时候也需要传递新增的参数。

new Particle(this.context, {
  // ... 其他代码相同
  radiusYSpeed: random(0.5, 1.2),
  rotationSpeed: 0.2,
})

此时的效果已经很OK了，如下：

清除已完成的粒子

上面粒子离开屏幕后我们并没有清除已完成的粒子，这样会造成性能下降，如果多调用几次 confetti.show() 将会越来越卡。现在我们需要清除已完成的粒子。

首先 Particle 添加一个 isDone() 方法，用来判断是否完成，这里认为超出 Canvas 高度 100px 后粒子就完成了自己的使命。

class Particle {
  // ... 其他代码相同
  isDone(canvasHeight) {
    return this.y > canvasHeight + 100 // 超出canvas高度100像素任务已完成
  }
}

然后在 ConfettiBatch 类中添加了 clearDone() 和 isDone() 方法。clearDone() 用来清除已经绘制完的粒子，本质就是通过 particles.filter 方法过滤掉已完成的粒子。这里需要传递 canvasHeight，是因为每一帧 canvasHeight 都可能会不同。isDone() 方法也比较简单，如果粒子都被清空则表示该批次已经完成自己的使命。

class ConfettiBatch {
  // ... 其他代码相同

  clearDone(canvasHeight) {
    this.particles = this.particles.filter(particle => {
      return !particle.isDone(canvasHeight)
    })
  }

  isDone() {
    return !this.particles.length
  }
}

最后在 Confetti 类中，也需要清理对应的批次，一个批次的粒子有挺多的，清空这一批次实际上是低概率的事情，我们没必要每一帧都去检测是否需要清空当前批次（当然如果每一帧去检测也可以），这里我们每10帧检测一次。代码如下：

class Confetti {
  batches = []
  // 用来记录迭代次数
  iterationIndex = 0
  // ... 其他代码相同

  clearDone(canvasHeight) {
    this.batches = this.batches.filter(batch => {
      batch.clearDone(canvasHeight)
      return !batch.isDone()
    })
  }

  loop = () => {
    fixWidthAndHeight(this.canvas)
    // 每10帧重新开始记录
    this.iterationIndex = (++this.iterationIndex) % 10
    const isClear = this.iterationIndex === 0
    const canvasWidth = this.canvas.canvasWidth
    const canvasHeight = this.canvas.offsetHeight
    this.context.clearRect(0, 0, canvasWidth, canvasHeight)
    this.update(canvasHeight)
    this.draw()
    if (isClear) {
      this.clearDone(canvasHeight)
    }

    requestAnimationFrame(this.loop)
  }
}

此时的效果跟上面一样，可以点击这里查看。

主循环优化

我们之前的代码在调用 confetti.show() 的时候开启主循环，如果多次调用 confetti.show() 就会开启多个主循环，这肯定是不行的。现在我们处理一下这个问题。我们新增一个 isRunning 属性来标记是否开启主循环，confetti.show() 的时候如果没开启则开始主循环，否则说明主循环已经处于开启状态，就没必要再多次开启。另外当所有的批次都结束后应该关闭主循环，代码如下：

class Confetti {
  // ... 其他代码相同
  isRunning = false

  // ... 其他代码相同

  show(showOptions = {}) {
    // ... 其他代码相同
    if (!this.isRunning) {
      this.run()
    }
  }

  // ... 其他代码相同

  run() {
    this.isRunning = true
    this.loop()
  }

  loop = () => {
    // ... 其他代码相同

    // batches有长度的时候需要循环 没有长度的时候则不再循环
    if (this.batches.length) {
      requestAnimationFrame(this.loop)
    } else {
      this.isRunning = false
    }
  }

  // ... 其他代码相同
}

现在我们的五彩纸屑效果就完成了，具体效果可以点击这里。

今天的课程到这里就结束了，当然我们的五彩纸屑还可以添加更多的功能，比如添加一些方形的五彩纸屑，也添加一些 emoji；另外我们的水平速度和垂直速度都应该根据视口的宽高来生成，而不是直接给一个随机值。我相信通过本章的学习，聪明的你一定可以自己实现更好的效果。加油吧少年，愿你的生活能像五彩碎屑一样多姿多彩！! 😜

Canvas系列（18）：实战-烟花效果

2024-11-25T20:00:00.000Z

今天我们来学习 Canvas 的一个经典案例 —— 烟花效果，具体效果可以看下图。本章的内容会涉及之前的加速度和速度相关的知识，如果对这部分不太了解的建议先看其他章节。

画一个点

Canvas效果往往需要我们去逐帧观察，烟花效果也一样。我们先看单个烟花，在不考虑拖尾的情况下，烟花先往上飞，飞行过程中越来越慢，当飞到一定高度以后爆炸开来，爆炸效果是变换成好多朝四面八法飞去的小粒子。我们直接绘制烟花有点困难，那么就把问题进行拆分，先不绘制整个烟花，而是先画一个点，这个点可以是起飞的烟花粒子，也可以是爆炸开的烟花粒子。

class Particle {
  constructor(context, options = {}){
    this.context = context;
    this.x = options.x || 0;
    this.y = options.y || 0;
    this.vx = options.vx || 0;
    this.vy = options.vy || 0;
    this.ax = options.ax || 0;
    this.ay = options.ay || 0;
    this.radius = options.radius || 4;
    this.hColor = options.hColor ?? 180;
  }

  update() {
    this.vx += this.ax;
    this.vy += this.ay;
    this.x += this.vx;
    this.y += this.vy;
  }

  draw() {
    this.context.save();
    this.context.beginPath();
    this.context.fillStyle = `hsl(${this.hColor} 100% 50%)`;
    this.context.arc(this.x, this.y, this.radius, Math.PI / 180 * 0, Math.PI / 180 * 360);
    this.context.closePath();
    this.context.fill();
    this.context.restore();
  }
}

这段代码跟我们之前的动画章节的代码很类似。Particle 类接收2个参数，一个是 canvas 的上下文 context，另一个是配置项。其中 vx , vy 分别是 x 和 y 轴上的速度的分量；ax，ay 分别是 x 和 y 轴上的加速度的分量。我们绘制粒子，实际上绘制的是圆形，因为半径 radius 很小的圆形就是一个点，当然这里绘制成长度很小的方形也是OK的。值得注意的是我们绘制的 fillStyle 使用的是 hsl 颜色格式，而不是我们经常使用的 rgb 格式，因为 hsl 格式只要控制第一个色相参数就可以显示不同的颜色了，这比 rgb 方便些。另外构造方法中赋初始值的时候 hColor 使用了 ?? 表达式，为了保证即使传入 0 也能正常显示颜色。这是ES11的语法，生产环境需要用 babel 编译成低版本的语法，我们这里作为示例就不转换了，相信你用的是高版本的Chrome浏览器。

现在我们使用上面的 Particle 类来绘制一个点：

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let canvasWidth = canvas.width = window.innerWidth;
let canvasHeight = canvas.height = window.innerHeight;

const particle = new Particle(context, {
  x: canvasWidth / 2,
  y: canvasHeight / 2,
});

particle.draw();

function resizeCanvas() {
  canvasWidth = canvas.width = window.innerWidth;
  canvasHeight = canvas.height = window.innerHeight;

  // 下面这三行代码为了保证粒子在Canvas的中心 后面的例子中会删除
  particle.x = canvasWidth / 2;
  particle.y = canvasHeight / 2;
  particle.draw()
};

window.addEventListener('resize', resizeCanvas);

这里我们在canvas的中心绘制了一个点，效果如下：

画一个烟花

在绘制烟花之前我们先写一个 random 的工具方法，用来生成随机数。

const random = (min = 1, max) => {
  if (max === undefined) {
    max = min;
    min = 0;
  }

  return Math.random() * (max - min) + min;
};

上述 random 如果传一个参数的时候，则会生成 0 ~ 当前值 的随机数，如果传两个参数的时候，第一个值表示最小值，第二个值表示最大值。这里我们生成的仍然是小数随机数，如果需要整数可以使用 Math.floor() 方法取整。

有了 random 函数以后我们可以画烟花了。烟花实际可以分成2部分，首先是一个从下到上飞的大一点的粒子，当飞到粒子最高点的时候，粒子爆炸，爆炸形成很多个从爆炸点周围向四周飞的小粒子。

通过上面描述我们的代码基本上就有了，首先我们定义一个 Firework 类，它有以下几个成员属性：

isExplode: 是否爆炸
baseParticle: 未爆炸起飞的粒子
particles: 爆炸开的粒子数组
hColor: 粒子颜色的hsl的色相参数

我们在未爆炸前绘制的是 baseParticle，当爆炸以后就变成了绘制 particles 数组，这就是爆炸的核心逻辑。现在还有一个问题，如何判断粒子爆炸呢？其实也容易，当粒子飞到最顶端爆炸时，此时粒子的速度为 0 ，而此前粒子的速度是负数（canvas的y轴向下，负数表示朝上），所以可以通过判断例子是否大于等于0来判断是否飞到最顶端，之所以不只判断等于 0 ，是因为飞到最顶端的时候例子在这一帧可能不是刚好是 0 。

class Firework {
  isExplode = false
  baseParticle = null
  particles = []
  hColor = 180
  context = null

  constructor(context) {
    this.context = context
    this.hColor = Math.floor(random(360))
    this.baseParticle = new Particle(this.context, {
      x: canvasWidth / 2,
      y: canvasHeight,
      vy: -random(14, 20),
      ay: 0.4,
      radius: 2,
      hColor: this.hColor,
    });
  }

  update() {
    if (!this.isExplode) {
      this.baseParticle.update()
      if (this.baseParticle.vy >= 0) {
        this.explode()
      }
    } else {
      this.particles.forEach(item => {
        item.update()
      })
    }
  }
  
  draw() {
    if (!this.isExplode) {
      this.baseParticle.draw()
    } else {
      this.particles.forEach(item => {
        item.draw()
      })
    }
  }

  explode() {
    // TODO:
  }
}

上述代码中，我们在 x 为 canvasWidth / 2 ，y 为 canvasHeight ，也就是中间的最下面生成一个向上飞的粒子。现在我们考虑一下如何让粒子爆炸，首先需要生成爆炸的粒子，然后标记 isExplode 为 true。

class Firework {
  // ... 其他代码

  explode() {
    for (let i = 0; i < 100; i++) {
      const angle = random(Math.PI * 2)
      const length = random(3)
      this.particles.push(new Particle(context, {
        x: this.baseParticle.x,
        y: this.baseParticle.y,
        vx: Math.cos(angle) * length,
        vy: Math.sin(angle) * length,
        ay: 0.1,
        radius: 1,
        hColor: this.hColor,
      }))
    }
    this.isExplode = true
  }
}

这里生成了 100 个爆炸后的粒子，爆炸的颜色跟当前烟花的颜色是相同的。生成的速度是朝四周方向，大小是随机生成小于 3 的向量，这里的计算可以参考下图。长度是0 ~ 3 的随机值，角度是 0 ~ 2π的随机值，然后计算 x 坐标和 y 坐标，可以看的出来 x 是 Math.cos(angle) ， y 是 Math.sin(angle) 。

现在我们有了 Firework 类，就可以把它绘制到 canvas 上了：

const firework = new Firework(context);

function animate (){
  requestAnimationFrame(animate);
  context.clearRect(0, 0, canvas.width, canvas.height);

  firework.update();
  firework.draw();
}

animate()

此时的效果如下：

粒子爆炸后颜色逐渐变暗

Particle 类中我们添加了一个生命值的属性 lifespan，根据它的大小来显示爆炸后烟花的颜色，由于 hsl 颜色的第三个值刚好就是明亮度，我们之前使用的是 50% ，现在我们可以把明亮度的值 lifespan 从 100 ~ 0 映射到 50% ~ 0%，代码改动也不多，如下：

class Particle {
  constructor(context, options = {}){
    // ... 其他代码
    this.isExplode = options.isExplode ?? false
    this.lifespan = 100
  }

  update() {
    if (this.isExplode) {
      this.lifespan -= 2;
    }
    // ... 其他代码
  }

  draw() {
    // ... 其他代码
    this.context.fillStyle = `hsl(${this.hColor} 100% ${this.lifespan / 2}%)`;
    // ... 其他代码
  }
}

class Firework {
  //... 其他代码

  explode() {
    for (let i = 0; i < 100; i++) {
      //... 其他代码
      this.particles.push(new Particle(context, {
        //... 其他代码
        isExplode: true, // 新增爆炸判断
      }))
    }
    this.isExplode = true
  }
}

此时的效果如下：

画多个烟花

首先我们把烟花的 x 坐标也修改成随机生成值，这里设置的范围是从 20 到 canvasWidth - 20 像素之间。由于是多个烟花，所以需要定义一个烟花的数组 fireworks 。生成烟花这里我们也是有技巧的，在每一帧生成一个随机数（默认从0到1），让屏幕宽度中每100个像素有 0.006 的概率生成一个烟花。具体代码如下：

class Firework {
  // ... 其他代码

  constructor(context) {
    this.hColor = Math.floor(random(360))
    this.baseParticle = new Particle(this.context, {
      x: random(20, canvasWidth - 20),
      // ... 其他代码
    });
  }

  // ... 其他代码
}
const fireworks = []
fireworks.push(new Firework(context));

function animate (){
  requestAnimationFrame(animate);
  context.clearRect(0, 0, canvas.width, canvas.height);

  if (random() < (0.006 * canvasWidth / 100)) {
    fireworks.push(new Firework(context));
  }

  fireworks.forEach(item => {
    item.update();
    item.draw();
  })
}

animate()

此时看着非常OK，效果如下：

内存泄漏处理

上述代码看着貌似没什么问题，但运行的时间一长就会发现逐渐变得卡顿，这是因为每一个粒子在离开屏幕后仍然在绘制，从而导致内存泄露了，所以我们需要对已完成使命的粒子或烟花进行销毁。

class Particle {
  // ... 其他代码

  isDone() {
    return this.lifespan <= 0
  }
}

class Firework {
  // ... 其他代码

  update() {
    if (!this.isExplode) {
      this.baseParticle.update()
      if (this.baseParticle.vy >= 0) {
        this.explode()
      }
    } else {
      for (let i = this.particles.length - 1; i >= 0; i--) {
        this.particles[i].update()
        if (this.particles[i].isDone()) {
          this.particles.splice(i, 1)
        }
      }
    }
  }
  
  // ... 其他代码

  isDone() {
    return this.isExplode && this.particles.length === 0;
  }
}

// ... 其他代码

function animate (){
  // ... 其他代码

  for (let i = fireworks.length - 1; i >= 0; i--) {
    const item = fireworks[i];
    item.update();
    if (item.isDone()) {
      fireworks.splice(i, 1);
    } else {
      item.draw();
    }
  }
}

我们在 Particle 和 Firework 类中都添加 isDone 方法来判断是否完成使命，粒子完成使命的标志是粒子完全暗，烟花完成使命的标志是爆炸了且所有爆炸后的粒子都完全变暗，最后需要注意的是移除粒子和烟花是从后往前循环的，避免因移除过程中数组长度变化而产生的问题。

此时效果跟上图几乎一样，只是不会因为时间过长而卡顿，具体效果可以点击这里。

爆炸后添加空气阻力

现实中，烟花爆炸后比较轻，受到空气阻力的影响，烟花粒子在下降过程明显变慢了。阻力我们在之前的章节中也讲过，就是速度乘以一个接近1的系数，这块不熟悉的同学可以看这里的摩擦力章节。

class Particle {
  // ... 其他代码
  update() {
    if (this.isExplode) {
      this.lifespan -= 2;
      this.vx *= 0.98;
      this.vy *= 0.98;
    }
    this.vx += this.ax;
    this.vy += this.ay;
    this.x += this.vx;
    this.y += this.vy;
  }

  // ... 其他代码
}

此时，效果如下：

拖尾效果

我们每次使用 context.clearRect() 方法来清屏，这里如果我们不调用 context.clearRect() 方法就会有粒子的飞行轨迹了，但是这也不是我们要的拖尾效果，不调用 context.clearRect() 方法效果如下：

为了实现拖尾效果，我们可以在每次绘制之前先绘制一个透明度为 0.2 的黑色矩形，然后再绘制烟花，这样每次绘制保留了上一次淡淡的绘制效果，所以看上去就有了拖尾效果了，代码如下：

function animate (){
  requestAnimationFrame(animate);
  // context.clearRect(0, 0, canvas.width, canvas.height);

  context.globalAlpha = 0.2;
  context.fillStyle = 'black';
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.globalAlpha = 1;

  //... 其他代码
}

整体效果请看这里。

高度优化

现在高度使用的是随机值，而设备的高度是不固定的，粒子飞行的高度跟设备的高度是有关系的，这样就可以让烟花不在很低或很高的时候爆炸。
烟花粒子向上飞的过程中，实际上是做自由落体运动的逆过程。自由落体公式有：

$$
v ^ 2 = 2gh
$$

我们这里希望烟花飞过 0.5 ~ 0.9 屏幕高度后爆炸。之所以这么取是因为，烟花可以飞过屏幕的一半且不至于超出屏幕爆炸后才爆炸。

class Firework {
  //... 其他代码
  constructor(context) {
    this.context = context
    this.hColor = Math.floor(random(360))
    const ay = 0.4 // 加速度每个粒子都是一样的
    const h = random(0.5 * canvasHeight, 0.9 * canvasHeight) // 随机 0.5 ~ 0.9 屏幕高度
    const vy = -Math.sqrt(2 * ay * h) // 计算初始速度 由于方向是向上的 所以需要添加负号
    this.baseParticle = new Particle(this.context, {
      x: random(20, canvasWidth - 20),
      y: canvasHeight,
      vy: vy,
      ay,
      radius: 2,
      hColor: this.hColor,
    });
  }
}

大功告成，此时的效果，请看这里。

一文看懂TypeScript工具类型

2024-06-29T16:16:12.000Z

TypeScript 的工具类型，也被称作类型体操。通过本文你就知道这些工具类型的原理，并可以自己写出一些工具类型。在学习工具类型之前，我们先学学工具类型所用到的基础知识，当基础知识掌握牢固后，看懂工具类型自然水到渠成。

基础知识

泛型

我们先看一个泛型的例子：

function identity(arg: T): T {
  return arg;
}

const a = identity<string>('foo');
const b = identity<boolean>(true);
const c = identity<string>(true); // Error 类型不匹配
const d = identity(true); // OK 类型推断T为字面量类型true

这个例子很简单，identity 函数接受一个名称为 T 泛型（名称可以随便写），函数参数的类型也是泛型 T ，返回值也是 T。在调用函数的时候，根据具体的使用场景来决定参数的类型，这就是泛型的作用。如果类型不匹配的话就会报错。

在泛型类型声明的时候泛型可以是多个，可以给默认值，有默认值的泛型参数是可选泛型参数，可选泛型参数需要放在泛型定义的后端。

function f1 boolean, U>() {} // 错误 可选泛型应该放在后端
function f2boolean>() {} // 正确

function f3boolean>() {} // 错误 给T设默认值U的时候 由于U在T后面定义 此时还未定义
function f4boolean, U = T>() {} // 正确 U的默认值是T也就是boolean

泛型约束

泛型约束是在泛型的类型参数上定义一个约束条件，从而限制了泛型实际类型的最大范围，这个类型参数的约束条件就是泛型约束，语法采用了 extends 关键字，类似于类的继承。泛型约束是工具类型的核心。

interface Points {
  x: number;
  y: number;
}
function identityextends Points>(arg: T): T {
  return arg;
}

identity({x: 0, y: 0}); // OK
identity({x: 0, y: 0, z: 0}); // OK
identity({x: 0}); // Error 不满足约束条件 缺少y字段

function fextends boolean>() {}
f<true>(); // OK
f<false>(); // OK
f<string>(); // Error 类型不满足约束条件

约束条件有点特殊，它可以引用泛型列表中的其他类型，但是不能循环引用。

function f1 extends U, U>() {} // OK 注意约束条件可以引用列表中的其他类型 哪怕前面的都可以引用后面的
function f2extends T>() {} // OK

function f3 extends T>() {} // Error 循环引用
function f4extends U, U extends T>() {} // Error 循环引用

泛型类型别名

泛型除了用在函数上还可以用在类和类型别名上。在工具类型中，泛型大量应用于类型别名上，看两个例子：

type Nullable = T | undefined | null;
type Container = { value: T };

const a: Nullable<string> = '123'; // a的类型是 string  | undefined | null
const b: Container<boolean> = { // b的类型是 { value: boolean }
  value: true,
};

联合类型

联合类型就是类型用 | 操作符连起来的类型。联合类型赋值的时候是相联合类型的综合。子类型与父类型联合的结果是父类型，任何类型与never联合是任何类型。对于类、接口等对象的联合，可赋的值是其中任意一个，但访问只能访问所有类型的共有属性和方法。。从感觉上来看非对象联合范围可能变大了，但是对象的联合范围反而变小了。之所以这么做，是因为联合类型的对象在任何特定时刻只能符合其中的一个类型，因此 TypeScript 需要一种方法来确保你访问的属性在所有可能的类型中都是存在的。当然如果你通过类型判断推断出是具体的某个类型则可以调用对应的非共有方法。

// 基本类型的联合
type T1 = number | string; // 既可以是数字也可以是字符串
const a: T1 = 1; // OK
const b: T1 = '1'; // OK

// 对象类型的联合
interface IA {
  a: number;
  b: number;
}

interface IB {
  b: string;
  c: number;
}

type T2 = IA | IB;

const c: T2 = {
  a: 1, // OK a属于IA上的属性
  b: 2, // OK b可以是string 也可以是number
  c: 3, // OK c属于IB上的属性 这里b=2是number的子类型 TS没推断出c:IA 所以这里没报错
  d: 4, // Error d不在IA也不在IB
}

console.log(c.a); // Error 不能访问非共有属性
console.log(c.b); // OK
console.log(c.c); // Error 不能访问非共有属性

type T3 = string | 'a'; // string 子类型于父类型联合是父类型

type T4 = string | never; // string 任何类型和never联合是任何类型 这个可以非常重要的哦

type T5 = { kind: 'T5', a: number };
type T6 = { kind: 'T6', b: string };
type T7 = T5 | T6;

const d: T7 = {
  kind: 'T5', // OK 可以判断是T5
  a: 123, // OK
  b: '123', // Error kind自变量可以推断出g是IE类型所以不能有b属性
}

function handle(d: T7) {
  if (d.kind === 'T5') {
    console.log(d.a); // `g` 确定是 `IE` 类型，访问 `a` 是安全的
  } else if (d.kind === 'T6') {
    console.log(c.b); // `g` 确定是 `IF` 类型，访问 `b` 是安全的
  }
}

交叉类型

交叉类型就是类型用 & 操作符连起来的类型。子类型与父类型交叉的结果是子类型。对于没有交集类型的交叉则是 never 。对象类型的交叉是属性的综合。**never 、null 和 undefined 与其他类型交叉的结果是 never ，空对象类型与其他非never、null和undefined的类型交叉是其他类型**。

type T1 = boolean & true; // true
type T2 = boolean & true & false; // never 因为true和false没有交集
type T3 = boolean & boolean & boolean; // boolean

interface IA {
  a: boolean;
}

interface IB {
  b: boolean;
}

type T4 = IA & IB;

// T4 相当于
// interface T4 {
//   a: boolean;
//   b: boolean;
// }

type T5 = string & null; // never
type T6 = any & never; // never
type T7 = string & {}; // string 空对象与非null/undefined/never类型交叉是对应的类型

如果交叉的两个属性相同，那么他们的属性类型也是每个属性交叉的结果，看一个稍微复杂的例子：

interface IA {
  x: {a: string, b: string};
}

interface IB {
  x: {b: number, c: number};
}

type T1 = IA & IB;

// 相当于：
// type T1 = {
//   x: {a: string, b: string} & {b: number, c: number}
// }

// 相当于：
// type T1 = {
//   x: {a: string, b: string & number, c: number }
// }

// 相当于：
// type T1 = {
//   x: {a: string, b: never, c: number }
// }

分配率

交叉类似于数学中的乘法，联合类似于数据中的加法，所有交叉的优先级比联合优先级高，同时满足分配率。

A & B | C & D = (A & B) | (C & D)

A & ( B | C ) = (A & B) | (A & C)

(A | B) & (C | D) = A & C | A & D | B & C | B & D

// 有了这些知识我们就知道更复杂的类型判断了，如：
type T = (string | 0) & (number | 'a');
       = (string & number) | (string & 'a') | (0 & number) | (0 & a);
       = never | 'a' | 0 | never;
       = 'a' | 0;

索引类型查询

通过索引类型查询（使用 keyof 关键字）能够获取给定类型中的属性名类型。索引类型查询的结果是由字符串字面量类型构成的联合类型。

interface T {
  x: number;
  y: number;
  z: number;
}

type T1 = keyof T; // 'x' | 'y' | 'z'

在JS中对象的键只能是字符串、数字和Symbol，所以 keyof 的结果必定是联合类型 number | string | symbol 的子类型。keyof 通常返回的是键的名称的联合类型，但有些情况比较特殊：

属性中只有字符串索引签名（属性类型是[props: string]: any），返回number | string的联合类型；
属性中只有数值索引签名（属性类型是[props: number]: any），返回number类型；
属性中只包含unique symbol属性，返回的是对应的unique symbol类型；
有其他属性成员的，返回的是成员属性名的联合类型（这条重要）；
any 返回的是number | string | symbol联合类型（通常用来做键的约束）；
unknown 返回never;
原始类型返回对应对象上的属性或方法名；
联合类型返回公共属性名（这条重要）；
交叉类型返回所有属性名（这条重要）。

interface I1 {
  [props: string]: string;
}
type T1 = keyof I1; // string | number

interface I2 {
  [props: number]: string;
}
type T2 = keyof I2; // number

const s: unique symbol = Symbol();
interface I3 {
  [s]: string;
}
type T3 = keyof I3; // typeof s

interface I4 {
  0: boolean;
  a: string;
  b(): string;
  [s]: string;
}
type T4 = keyof I4; // 0 | 'a' | 'b' | s

type T5 = keyof any; // string | number | symbol

type T6 = keyof unknown; // never

type T7 = keyof boolean; // 'valueOf'

type T8 = keyof string; // number | typeof Symbol.iterator | "toString" |  ...等string上的方法

type T9 = keyof number; // 'toString' | 'toFixed' | 'toExponential' | 'toPrecision' | 'valueOf' | 'toLocaleString'

type A = {a: number, b: number};
type B = {b: string, c: string};

type T10 = keyof (A | B); // 'b' 注意 keyof 的优先级比 | 和 & 高，所以这里要上括号

type T11 = keyof (A & B); // 'a' | 'b' | 'c'

keyof (A & B) = keyof A | keyof B; // keyof 也满足分配率

索引访问类型

对象值的类型可以想对象一样获取：

type T1 = {x: '1', [props: string]: string};
type T2 = 'x';
type T3 = T1[T2]; // '1'
type T4 = T1['y']; // string

映射对象类型

映射对象类型可以把已有对象类型映射为新的对象类型，映射对应类型使用 in 关键字，语法定义如下，其中 readonly 和 ? 是可选的。

1	{ readonly [P in K] ?: T }

看看例子：

type T1 = { [P in 0 | 1] ?: string };
// 相当于
// type T1 = {
//     0?: string | undefined;
//     1?: string | undefined;
// }

type T2 = { [P in 'a'] : string };
// 相当于
// type T2 = {
//     a: string;
// }
type T3 = { [P in string] : string };
// 相当于
// type T3 = {
//     [x: string]: string;
// }
type T4 = { [P in number] : string };
// 相当于
// type T4 = {
//     [x: number]: string;
// }

type T5 = { a: string, b: number };
type T6 = { [P in keyof T5]: T5[P] }; // 这里先用 keyof T5 获取到 'a' | 'b' 再使用映射对象类型
// 相当于
// type T6 = {
//     a: string;
//     b: number;
// }

Partial 与 Readonly

本文讲的是TS的工具类型，到目前为止我们还没有讲工具类型，现在我们看看第一个工具类型 Partial 。Partial 的作用是把对象类型的所有属性设置为可选的，可以使用映射对象类型来实现：

// 使用：
type T = {a: string, b: number};
type PartialT = Partial; // {a?: string | undefined, b?: number | undefined}

// 原理：通过索引访问类型添加?即可。

// 实现：
type Partial = {
  [P in keyof T]?: T[P] | undefined;
}

同样的 Readonly 也跟 Partial 的实现方式类似，Readonly 是给每一个属性加一个 readonly：

// 使用：
type T = {a: string, b: number};
type ReadonlyT = Readonly; // {readonly a: string, readonly b: number }

// 原理：与Partial类似只是添加的是 readonly

// 实现：
type Readonly = {
  readonly [P in keyof T]: T[P];
}

同态映射对象类型

我们对象类型中存在索引类型查询（即 keyof），这种映射就是同态映射，如果对象类型中没有索引类型查询就认为是非同态映射。同态映射会把原来对象的 readonle和 ? 一并映射过来，所以是同态。

type T = {a?: string; readonly b: number};
type KT = keyof T; // KT是在MOT外面定义的 所以就是非同态
// 同态映射
type HMOT = { [P in keyof T]: T[P]}; // { a?: string; readonly b: number;}
// 非同态映射
type MOT = { [P in KT]: T[P]}; // { a: string | undefined; b: number; }

注：非同态映射对于可选参数来说，类型是与 undefined 的联合类型。

同态映射对象类型只能保证映射的对象跟原有 readonle 和 ? 对象操作符相同，当然可以自己写一个 readonle 或 ? 覆盖调原来的操作符，但是不能随意控制减少。实际上在 readonle 和 ? 前可以添加 + 和 - 来更精细化的控制。当然 +readonle 和 readonle 的效果实际上是一样的，所以 + 一般是省略的。

现在我们实现一下 Required，该工具类的作用就是去掉键值对中间的 ?。

// 使用：
type T = {
  a?: string | undefined | null;
  readonly b : number | null | undefined;
}

type RequiredT = Required;
// 相当于：
// type RequiredT = {
//     a: string | null;
//     readonly b: number | null | undefined;
// }

// 原来：与Partial类似，通过-号去掉?号

// 实现：
type Required = { [P in keyof T]-?: T[P]; }; // 注意问好前目的-号

注：? 前加 - 的时候，只对带有 ? 的属性生效，且去掉 undefined 类型。对于没有 ? 修饰的属性，不去掉undefined 类型。

映射也可以用在非对象类型:

type HMOT = { [P in keyof T]: X};
type Type1 = HMOT<string, boolean>; // boolean
type Type2 = HMOT<string[], boolean>; // boolean[]
type Type3 = HMOT<[string, number], boolean>; // [boolean, boolean]
type Type4 = HMOT<readonly [string, number], boolean>; // readonly [boolean, boolean]

条件类型

条件类型类似于JS中的三目运算符，只是类型的判断没有JS那么丰富。TS的类型检验是在编译阶段进行的，所以判断条件只有 extends 一个语句。条件判断示例如下：

1 2	type T1 = true extends boolean ? string : number; // string type T2 = 1 extends boolean ? string : number; // number

条件表达式extends前面的类型经可能使用裸类型，所谓裸类型就是没有任何装饰的类型参数。如下：

type T1 = T extends string ? true : false; // T没有任何装饰是裸类型
type T2 = [T] extends [string] ? true : false; // [T]是T的一个元组，所以不是裸类型

// 乍一看好像也没毛病
type T1T1 = T1<string>; // true
type T2T1 = T2<string>; // true

// 但是对于联合类型就不一样了
type T1T2 = T1<string | number>; // boolean
type T2T2 = T2<string | number>; // false

对于裸类型可以展开：

T = A | B
T extends U ? X : Y
// 相当于
(A extends U ? X : Y) | (B extends U ? X : Y)

上例中 T1T2 是裸类型可以展开相当于 (string extends string ? true : false) | (number extends string ? true : false) 也就是 true | false 也就是 boolean, 但 T2T2 相当于 [string | number] extends [string] ? true : false , 但是元组 [string | number] 不是元组 [string]的子类型，所以是 false。通常裸类型可以展开更符合类型判断。

类型查询

在JS中 typeof 可以判断一个变量的类型，TS对 typeof 做了扩展，在类型别名 type 等号右侧的 typeof 获取的是变量在TS中定义的类型。

const a: string = typeof '123'; // 'string'
function fn() {}
class C {}
const c: C = new C()

type T1 = typeof '123'; // Error 需要是个变量 这里认为'123'已经是字面量类型了 无法查询该类型的类型
type T2 = typeof a; // string
type T3 = typeof fn; // () => void
type T4 = typeof C; // 类C的构造函数类型（重要）
type T5 = typeof c; // 类C

infer关键字

我们看看本节最后一个知识点 infer ，这个看完你就会写工具类型了，是不是很开心？infer 功能非常强大，它可以反查类型，需要与 extends 配合使用。直接看例子：

type ArrayItemType = T extends Array ? U : never;
type T1 = ArrayItemType<number[]>; // number

type GetABType = T extends {a: infer U, b: infer U} ? U : never;
type T2 = GetABType<{a: string; b: number}>; // string | number

// infer 也可以命名不同
type GetABType2 = T extends {a: infer U, b: infer K} ? [U, K] : never;
type T3 = GetABType2<{a: string; b: number}>; // [string, number]

// 这里用never是有说法的 比如：
type T4 = ArrayItemType<(number[] | string)>; // number
// 上面ArrayItemType返回number ArrayItemType返回never
// 整体结果是 number | never 也就是number 相当于自动过滤掉了错误的类型

手撕工具类型

上面我们已经简绍了 Partial、Readonly 和 Required，你应该已经明白一件事，要判断类型几乎一定会用到 extends、in 或 keyof，本节将手撕更多的工具类型。

TypeName

TypeName 根据传入的T，返回T的类型的字符串，实际上这里的字符串是一种字符串字面量类型。

// 使用：
type T1 = TypeName<'123'>; // string
type T2 = TypeName<123>; // number
type T3 = TypeName<123 | true>; // number | boolean
type T4 = TypeName<{}>; // object

// 思路：通过extends来判断是不是对应类型的子类型，从而给出对应的类型

// 实现：
type TypeName = T extends string ? "string" :
    T extends number ? "number" :
    T extends boolean ? "boolean" :
    T extends undefined ? "undefined" :
    T extends Function ? "function" :
    "object";

Exclude

Exclude 可以在类型 T 中排除类型 U 。这里需要回顾一下在联合类型中，任何类型与 never 类型的联合是任何类型。

// 使用：
type T1 = Exclude<string | number | boolean, string | number>; // boolean

// 思路：首先肯定是用到了裸类型，因为裸类型的联合类型是每一种类型的展开，其他不满足的应该返回never，所以最后是never和其他类型的联合，那么never将会被省略。

// 实现：
type Exclude = T extends U ? never : T;

Extract

Exclude 从 T 中提取 U ，通常 T 和 U 都是联合类型。

// 使用：
type T1 = Extract<string | number | boolean, string | object>; // string

// 思路：逻辑与 Exclude 相反，T 在 U 的里面则返回 T 否则是 never

// 实现：
type Extract = T extends U ? T : never;

NonNullable

NonNullable 如果 T 中包含了 null 或者 undefined 则删除 null 和 undefined 。

// 使用：
type T1 = NonNullable<null | undefined | string>; // string

// 思路：更上面一样的套路

// 实现：
type NonNullable = T extends null | undefined ? never : T;

// 这里还有一种实现方式 由于`null`或`undefined`与对象交叉的结果是never，而空对象类型与其他交叉是其他类型。所以也可以利用这个特性判断
type NonNullable = T & {}

Record

Record 把 K 中的值作为键，T 作为值的类型来构建对象。

// 使用：
type T1 = Record<'x' | 'y', number>;
// 相当于
// type T1 = {
//     x: number;
//     y: number;
// }

// 思路：映射K，返回类型T。

// 实现：
// 你可能打手一挥：
type Record = { [P in K]: T; }; // Error

// 上面会报错，因为K要作为键必须是 string | number | symbol 的子类型 所以应该添加约束
type Recordextends string | number | symbol, T> = { [P in K]: T; }
// 由于 keyof any 就是 string | number | symbol，所以更精简的写法：
type Recordextends keyof any, T> = { [P in K]: T; };

Pick

Pick 的作用是从对象类型 T 中，挑选出键在 K 中的属性，从而组成新的对象。

// 使用：
type T = {
  a?: string | undefined | null;
  readonly b : number | null | undefined;
  c: number;
}

type PickT = Pick'a' | 'b'>;
// 相当于
// type PickT = {
//     a?: string | undefined | null;
//     readonly b: number | null | undefined;
// }

// 思路：Pick有两个泛型，根据K映射出新的对象。

// 实现：
// 你可能大笔一挥
type Pick = { [P in K]: T[P]; }; // Error

// 上面有两个问题
// 1. Pick中没有keyof所以是非同态映射，所以不会保留操作符；
// 2. K可能不是T中的key。
// 这里可以这么写，通过 extends keyof 把非同态转化为同态是一个小技巧：
type Pickextends keyof T> = { [P in K]: T[P]; }; // OK

Omit

Omit 与 Pick 是互补的。它是已经类型删掉某些属性从而形成新的类型。

// 使用：
type T = {
  a?: string | undefined | null;
  readonly b : number | null | undefined;
  c: number;
}

type OmitT = Omit'c'>;
// 相当于：
// type OmitT = {
//     a?: string | undefined | null;
//     readonly b: number | null | undefined;
// }

// 思路：首页K既然是键，那么就应该满足约束是string | number | symbol（或者keyof any）的子类型，否则会报错，跟Pick相反，Pick是选择K里面的属性，这是是不能选择K里面的属性也就是T先要排除K中的属性，所以得用Exclude排除掉。

// 实现：
type Omitextends keyof any> = { [P in Exclude]: T[P]; }

Parameters

Parameters，根据函数 T 的类型，返回函数 T 参数的元组。

// 使用：
type T1 = Parameters<() => void>; // []
type T2 = Parameters<(s: string) => void>; // [string]
type T3 = Parameters<(s: string, n: number) => void>; // [string, number]
type T4 = Parameters<(...args: string[]) => void>; // string[]
type T5 = Parameters<any>; // unknown[]


// 思路：首先T应该满足函数约束，然后通过infer获取到参数列表。

// 实现：
type Parametersextends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

ReturnType

ReturnType 可以获取函数T的返回值类型。

// 使用：
type T1 = ReturnType<() => void>; // void
type T2 = ReturnType<() => string>; // string
type T3 = ReturnType<() => { a: string }>; // { a: string }
type T4 = ReturnType<() => T>; // unknown
type T5 = ReturnType<any>; // any

// 思路：与 Parameters 类似，只是 infer 取得是返回值。

// 实现：
type ReturnTypeextends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

ConstructorParameters

ConstructorParameters 获取构造函数T的参数，返回对应参数的元组。

// 使用：
abstract class A {
    constructor(arg: string) {}
}

class B extends A {
    constructor(...args: string[]) {
        super(args[0])
    }
}

type T1 = ConstructorParameters<new () => object>; // []
type T2 = ConstructorParameters<typeof A>; // [string]
type T3 = ConstructorParameters<new (s: string, n: number) => object>; // [string, number]
type T4 = ConstructorParameters<typeof B>; // string[]
type T5 = ConstructorParameters<any>; // unknown[]

// 思路：实现思路与Parameters类似，只是约束必须是构造函数方法。这里需要注意的是如果抽象类也支持获取构造函数的参数，那么需要在 new 之前添加 abstract 关键字。

// 实现：
type ConstructorParametersextends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;

InstanceType

InstanceType 获取构造函数返回值类型。

// 使用：
abstract class A {
    constructor(arg: string) {}
}

class B extends A {
    constructor(...args: string[]) {
        super(args[0])
    }
}

type T1 = InstanceType<new () => object>; // object
type T2 = InstanceType<typeof A>; // A
type T4 = InstanceType<typeof B>; // B
type T5 = InstanceType<any>; // any

// 思路：与 ConstructorParameters 类型，只是 infer 取的是返回值。

// 实现：
type InstanceTypeextends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;

ThisParameterType

ThisParameterType 获取函数的 this 参数类型，若没有定义 this 参数则返回 unknown。

// 使用：
function f1(this:object, x: number) {}
function f2(x: number) {}

type T1 = ThisParameterType<typeof f1>; // object
type T2 = ThisParameterType<typeof f2>; // unknown

// 思路：infer取this的类型。

// 实现：
type ThisParameterType = T extends (this: infer U, ...args: never) => any ? U : unknown

OmitThisParameter

OmitThisParameter 能从函数 T 中剔除 this 函数类型。

// 使用：
function f1(this:object, x: number) {}
function f2(x: number) {}

type T1 = OmitThisParameter<typeof f1>; // (x: number) => void
type T2 = OmitThisParameter<typeof f2>; // (x: number) => void
type T3 = OmitThisParameter<string>; // string
type T4 = OmitThisParameter<unknown>; // unknown

// 思路：如果函数类型包含this定义，那么去除this，如果函数类型不包含this的定义则直接把该函数返回。如何判断函数包含this定义呢？可以通过 ThisParameterType 获取看是不是 unknown。这里对于非函数类型，直接返回该类型，如上面string返回的是string。

// 实现：
type OmitThisParameter = unknown extends ThisParameterType ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1sfdnjsw8b22

TypeScript一些知识点

2024-05-12T14:56:37.000Z

区域注释

TypeScript 可以添加区域注释，可以让VS Code等编辑器识别为一个代码区域，区域注释使用的是单行注释语法：

//#region 区域描述
let x = 0;
let y = x + 1;
//#endregion

运算符

空值合并运算符

a ?? b

如上，当 a 为 undefined 或 null 的时候，返回 b 。相比于 a || b ，当 a 为 false 或空字符串时，a ?? b 也返回a，这在某些对于 false 或空字符串也起作用的场景，空值合并运算符是非常有用的。

TypeScript的原始类型

TypeScript常见原始类型有：

boolean
string
number
bigint
symbol
undefined
null
void
枚举类型
字面量类型

这里的原始类型都是小写的，如下：

1 2	const a: bigint = 1n; const b: number = 1n; // 报错，因为bigint不能算作number类型

symbol

symbol对应JavaScript原始类型的Symbol。考虑如下代码：

let s1: symbol = Symbol();
s1 = Symbol();

interface A {
  [s1]: number; // 报错
}

const a: A = {
  [s1]: 123,
}

Symbol 表示不变的，但是上述 symbol 类型的 s1 却可以再次赋值为其他 Symbol 值，这就导致在定义接口 A 的时候使用的 s1 可以变化，这就违背了 Symbol 不变的性质。为了避免这种问题，TS引入了 unique symbol 类型，该类型的 Symbol 必须用 const 申明（ let 或 var 声明直接报错），这样就不能再修改了：

const s1: unique symbol = Symbol();

interface A {
  [s1]: number; // OK
}

const a: A = {
  [s1]: 123,
}

unique symbol 只能通过 Symbol() 或者 Symbol.for() 赋值，但symbol类型没有这样的限制。

1
2
3

const s1: unique symbol = Symbol();
const s2: unique symbol = s1; // 报错
const s3: symbol = s1; // OK

枚举类型

TS中的枚举实际上会编译为对象：

enum Direction {
  UP,
  DOWN,
  LEFT,
  RIGHT,
}

// 实际编译为：
var Direction;
(function (Direction) {
  Direction[Direction["UP"] = 0] = "UP";
  Direction[Direction["DOWN"] = 1] = "DOWN";
  Direction[Direction["LEFT"] = 2] = "LEFT";
  Direction[Direction["RIGHT"] = 3] = "RIGHT";
})(Direction || (Direction = {}));

可以看出枚举实际上是编译为对象，而且值实际上是数值，如上面 Direction.UP === 0 。当然因为这里也对数值赋值为对应的字符串，所以 Direction[0] === 'UP' 。

这里也可以给某个枚举值赋值为数字，这样枚举值的计数就会从赋值开始：

enum Direction {
  UP = -2,
  DOWN,
  LEFT = 10,
  RIGHT,
}

// 实际编译为：
var Direction;
(function (Direction) {
  Direction[Direction["UP"] = -2] = "UP";
  Direction[Direction["DOWN"] = -1] = "DOWN";
  Direction[Direction["LEFT"] = 10] = "LEFT";
  Direction[Direction["RIGHT"] = 11] = "RIGHT";
})(Direction || (Direction = {}));

可以看到 UP 是 -2 ，DOWN 是 -2 + 1 也就是 -1 ；LEFT 是 10，RIGHT 是 10 + 1 也就是 11。

当然枚举也可以是字符串：

enum Direction {
  UP = 'UP',
  DOWN = 'DOWN',
  LEFT = 'LEFT',
  RIGHT = 'RIGHT',
}

const up: Direction = Direction.UP;
const down: Direction = 'DOWN'; // 报错，虽然值相同 但是字符串不能赋值给枚举

// 上述枚举编译为：
var Direction;
(function (Direction) {
  Direction["UP"] = "UP";
  Direction["DOWN"] = "DOWN";
  Direction["LEFT"] = "LEFT";
  Direction["RIGHT"] = "RIGHT";
})(Direction || (Direction = {}));

const 枚举 指的是用 const 声明的枚举，const 枚举 编译跟普通枚举不同，它编译后的结果是在使用的地方直接替换为对应的字符串或数字：

const enum Direction {
  UP,
  DOWN,
  LEFT,
  RIGHT,
}

const up: Direction = Direction.UP;

// 上述枚举编译为：
const up = 0 /* Direction.UP */; // 在使用的地方直接转化为对应的枚举值

strictNullChecks

当给一个类型的值设置为 null 或者 undefined 的时候默认并不会报错：

const s: string = undefined; // OK
const b: boolean = null; // OK
const n: null = undefined; // OK
const undef: undefined = null; // OK
const a: any = null; // OK
const unk: unknown = undefined; // OK

但是可以通过配置 --strictNullChecks 来严格检查是否为空，配置方式有两种：

运行命令 tsc index.ts --strictNullChecks false
在tsconfig.json中添加：

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

注：大多数配置参数都是通过上述两种方式配置的, 但一般使用TS时需要编辑器直接告诉我们哪里编码错误，而不是等编译的时候再检查，所以这里更推荐第二种方式。更多配置请参考这里。

配置以后上面的情况如下：

const s: string = undefined; // Error
const b: boolean = null; // Error
const n: null = undefined; // Error
const undef: undefined = null; // Error
const a: any = null; // OK
const unk: unknown = undefined; // OK

注: any 和 unknown 仍然可以设置为 null 和 undefined。

顶端类型

顶端类型是一种通用类型，有时也称为通用超类型。在类型系统中，所有类型都是顶端类型的子类。
TypeScript中有两种顶端类型：

any
unknown

any 类型允许执行任意操作而不会产生编译错误（但运行时候也可能出现错误），通常用于跳过类型检查：

const a: any = 0;
a.length; // 编译时不会报错
a(); // 编译时不会报错
a[0]; // 编译时不会报错

对于一个方法来说如果没有声明类型则默认是any类型，可以通过 --noImplicitAny 参数来控制不允许隐式设置any类型。

// --noImplicitAny: false
function f(x) {} // OK x类型隐式设置为any


// --noImplicitAny: true
function f(x) {} // Error

// --noImplicitAny: true
function f(x: any) {} // OK x类型显示设置为any

--noImplicitAny 的配置方法跟上面 --strictNullChecks 配置方法类似，如修改 tsconfig.json 文件：

{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

unknown 与 any 类型任何其他类型都可以赋值给 unknown ，但是unknown类型的值只能赋值给 unkonwn 和 any，而且 unknown 不允许执行绝大多数的操作：

let a: unknown = 0;
let b: number = 0;
a = b; // OK
a.length; // Error 不像any可以执行任何操作

let c: number = a; // Error unknown只能赋值给 any 和 unknown
let d: any = a; // OK

通常使用 unknown 需要自行判断类型：

function (x: unknown) {
  if(typeof x === 'string') {
    return x.length; // 判断了类型是 string 的时候调用 x.length 才不会报错
  }
}

尾端类型

尾端类型是所有类型的子类型，它只有一个类型就是 never ，该类型甚至没有值。由于它是所有类型的子类型，所以它可以赋值给任何类型，但是其他类型都不能赋值给它，包括 any。

let a: never; // OK
let b: boolean = a; // OK 它可以赋值给任何类型
let c: any = 1;
a = c; // Error 其他类型不能赋值给它
a = 1; // Error never没有值
let d: never = undefined; // Error never没有值 显示设置undefined也不行

注：虽然 never 可以赋值给任何类型，但是如果在 --strictNullChecks 为true的时候，同样会报错。如上第二行，在 --strictNullChecks 为 true 时，也是会报错的。

neber 的使用场景：

函数没有返回值。

1
2
3

function fn(): never {
  throw new Error()
}

函数死循环。

function fn(): never {
  while(true) {

  }
}

有些条件类型判断中会使用到never。

1
2
3

type Exclude = T extends U ? never : T;

type T = Exclude<boolean | string, string>; // type T = boolean

只读数组

数组的表示方法：

const a: number[] = [1, 2, 3];
const b: Array<number> = [1, 2, 3];

const c: number = a[100]; // OK虽然 a[100] 的值是undefined但是这里可以用number来声明 因为a是number的数组

只读数组的表示方法：

const a: ReadonlyArray<number> = [1, 2, 3];
const b: readonly number[] = [1, 2, 3];
const c: Readonly<number[]> = [1, 2, 3];

const d: readonly Array<number> = [1, 2, 3]; // Error readonly不能与泛型数组一起使用

a.push(4); // Error 只读数组不能追加

元组类型

元组类型是数组类型的子类型，值是一个数组。元组一般是长度固定的数组，相比较数组每个元素都是相同的类型，元组每个元素的类型都可以不同。由于元组类型是数组的子类型所以元组类型可以赋值给数组类型，前提是元组中的每一项都符合数组的每一项类型；数组类型是不能赋值给元组类型的。

const a: [number, string] = [1, '2']; // a就是元组类型
a[3]; // Error 只有2个元素的元组不能访问长度3

const b: readonly [number, string] = [1, '2']; // 只读元组
const c: Readonly<[number, string]> = [1, '2']; // 只读元组

let d: [number, string?, boolean?] = [1, '2', true]; // 可选元组
d = [2]; // OK
d = [2, '3']; // OK
d = [2, '3', false]; // OK
d = [2, false]; // Error 可选只能省略后面的 不能省略中间的 第二个可选参数是string

let e: [number, ...string[]] = [1, '2']; // 带有剩余参数的元组
e = [1, '2', '3', '4']; // OK

const f: [number, string] = [1, '2'];
const g: [number, number] = [1, 1];
const h: number[] = f; // Error
const i: number[] = g; // OK
const j: number[] = [1, 2];
const k: [number, number] = j; // Error 数组类型不能直接赋值给元组 因为可能数组的个数比元组少

对象类型

Object

在TypeScript中值 Object（window.Object）的类型并不是 Object 类型，而是 ObjectConstructor 类型。通过调用new Object()获取到的值的类型才是Object类型。

interface Object {
  constructor: Function;
  toString(): string;
  valueOf(): Object;
  // ...
}
interface ObjectConstructor {
  readonly prototype: Object;
  // ...
}
declare var Object: ObjectConstructor;

Object 类型的值除了 null 和 undefined 外，其他任何值都可以赋值。为什么相如 boolean 这种原始数据类型也能赋值给 Object 呢？因为原始类型会自动拆箱和装箱啊。但是声明的 Object 类型的值不能调用 window.Object 以外定义的属性和方法。

const a: Object = new Object(); // OK
const b: Object = { // 可以定义 Object 类型
  x: 123
}; // OK
b.x; // Error 但不能访问Object外定义的属性和方法
c.toString(); // OK 返回 'true'

const c: Object = true; // OK
const d: Object = null; // Error
const e: Object = []; // OK
const f: Object = function f() {}; // OK
const g: Object = new Date(); // OK

object

object 相比较于 Object 更加严格，只能是对象类型，而不能是 boolean 这样的原始数据类型，同样的也只能调用 Object 类型定义的属性和方法。

const a: object = new Object(); // OK
const b: object = {
  x: 123
}; // OK
b.x; // Error 不能访问Object外定义的属性和方法
a.toString(); // OK
const c: object = true; // Error
const d: object = null; // Error
const e: object = []; // OK
const f: object = function f() {}; // OK
const g: object = new Date(); // OK

对象字面量类型

一看就会的对象字面量类型：

const a: { x: number, y: number} = {
  x: 0,
  y:0
};

上面类型 { x: number, y: number} 就是对象字面量类型，是不是很简单？看一个稍微复杂一点的例子：

const a: 'a' = 'a'; // 注意这里的类型使用了 'a' 而不是string, 如果是string则不能用在对象中作为属性
const b: unique symbol = Symbol();
let obj: {
  [a]: boolean; // OK 可计算属性名 只能是string字面量、number字面量、symbol
  [b]: string; // OK 使用symbol
  c?: string; // OK 拥有可选属性c
  readonly d: number; // OK 拥有只读属性
} = {
  [a]: true,
  [b]: '0',
  d: 1,
  e: 123, // Error 没有定义这个类型的属性
};

上面 obj.e 由于没有出现在类型定义中所以报错了，可以通过如下方式添加多余参数的定义：

let obj: {
  a: boolean;
  [prop: string]: any;
};

obj = {
  a: true,
  e: 123, // OK
};

上面 [prop: string]: any 表面属性值可以是任何类型的，所以不会报错，想想上面的 obj.a ，其中 a 相当于也是一个 string 类型，如果修改为[prop: string]: string，而 a 的类型是 boolean ，那么就会存在 boolean 和 string 冲突，所以就会报错。

函数类型

函数的参数可以是剩余参数，剩余参数类型可以是数组或元组：

// 剩余参数是数组
function f(...args: number[]) {}

// 剩余参数是元组
function f(...args: [boolean, number]) {}
// 等价于
function f(args_0: boolean, args_1: number) {}

// 剩余参数是元组，且有可选值
function f(...args: [boolean, number?]) {}
// 等价于
function f(args_0: boolean, args_1?: number) {}

通常在定义函数就已经确定好函数的类型了，但是你也可以给一个变量设置为函数的类型，这里有两种方式：

// 函数的调用签名定义：
{ (ParameterList): Type }
// 简写为：
(ParameterList) => Type

// 如：
let f: { (x: number): void };
// 等价于
let f: (x: number) => void;

类本质上是函数，类的签名可以用构造函数来表示，格式如下：

// 类的构造签名定义
{ new (ParameterList): Type }
// 简写是
new (ParameterList) => Type


// 如：
let C: { new (name: string): Object };

// 等价于：let C: new (name: string) => Object;

C = class {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
}

let c = new C('name');

构造签名和调用签名可以共存，如下：

type Str = {
  new (name: string): String,
  (name: string): string
};

const s: Str = String;

let a = new s('name1');
let b = s('name2');

上述类型 Str 可以通过 new 来创建 String 对象，也可以通过函数调用返回 string 类型；实际上 String 函数就属于这种类型。

函数重载

函数重载是指一个函数有多个同名的函数签名，如下：

function add(x: number, y: number): number;
function add(x: string, y: string): string;
function add(x: number | string, y: number | string) : number | string {
  if(typeof x === 'number' && typeof y === 'number') {
    return x + y;
  } else if(typeof x === 'string' && typeof y === 'string') {
    return x + y;
  } else {
    throw TypeError('类型不符');
  }
}

add('1', 2); // 报错 函数允许x和y都是nunber或者都是string

不带有函数体的函数声明语句叫做函数重载，它只提供函数的类型信息。重载函数由一条或多条函数重载语句以及一条函数实现语句构成。只有一条重载语句跟函数签名是对应的函数重载，是允许的，但通常没啥意义（一条的时候函数重载可以省略）。对于多条函数重载来说，每个函数重载中的函数名和函数实现中的函数名必须一致。同时函数重载语句与其他函数重载语句或函数实现语句之间不能出现其他语句，否则将产生编译错误。函数重载语句在函数编译后将会删除。在上述例子中，如果没有函数重载，只看函数实现则可以出现x是nunber，y是string这种情况，但是函数重载限制了这种情况。需要注意的是函数实现必须兼容所有的重载语句。

函数重载也可以通过对象字面量来表示，如下：

const add: {
  (x: number, y: number): number;
  (x: string, y: string): string;
} = function add(x: any, y: any) : any {
  if(typeof x === 'number' && typeof y === 'number') {
    return x + y;
  } else if(typeof x === 'string' && typeof y === 'string') {
    return x + y;
  } else {
    throw TypeError('类型不符');
  }
}

add('1', 2); // 报错 函数允许x和y都是nunber或者都是string

需要注意的是函数字面量相当于是先定义了add的类型，然后再给实现，所以实现的参数和返回类型一定要满足定义中的所有情况，上述实现中x使用了any类型，如果是number | string，则不符合定义函数中的任意一项，所以也会报错。

函数重载解析顺序

当一个函数的实际参数数量不少于函数重载中的必须参数且不多于重载函数中定义的所以参数数量，同时实际参数的类型能够匹配函数重载中的参数，则认为这条函数重载符合函数定义，如果有多条符合的则从上到下解析。如下

function f(x: any): string;
function f(x: string): 0;
function f(x: any): any {
  if(typeof x === 'string') {
    return 0;
  } else {
    return '1';
  }
}

const a: 0 = f('h1'); // 报错a的类型应该是string

上述第一条函数重载和第二条函数重载都满足函数调用的参数，根据从上倒下应该选中第一条函数重载，该函数重载返回的是string类型，而不是0，所以报错。因此，一般写函数重载的时候我们应先定义范围更小的函数重载。

函数中的this类型

通常我们在函数中使用 this 是不会报错的，但是如果 --noImplicitThis=true 的时候，则会报错。

1
2
3

function foo(bar: string) {
  this.bar = bar; // --noImplicitThis=true的时候报错
}

可以在函数定义的时候第一个参数定义 this 的类型，但调用的时候需要调用call，bind，apply等来调用。

function foo(this: { bar: string }, bar: string): any {
  this.bar = bar;
}

/** 上述编译后相当于是：
 * function foo(bar) {
 *     this.bar = bar;
 * }
 **/

foo('123'); // 报错 没有显示传this默认是void，与函数定义的类型不符

foo.call({ bar: '' }, '123'); // OK

foo.bind({ bar: '' })('123'); // OK

foo.apply({ bar: '' }, ['123']); // OK

new foo('123'); // 报错 Ts建议 通过class来创建对象

new (foo as any)('123'); // OK

接口

接口可以定义任意对象类型，但无法表示原始类型。接口类型的成员可以是属性签名、调用签名、构造签名、方法签名和索引签名。另外接口可以多继承。通过一个例子看接口的各种用法：

interface TestInterface {
  x: number; // 属性签名
  (message?:string): Error; // 调用签名
  new (message?:string): Error; // 构造签名
  getElementById(elementId: string): HTMLElement | null; // 方法签名
  [props: string]: any; // 索引签名

  y?: string; // 可选参数
  z?(): number; // 可选参数是方法
  readonly a: number; // 只读属性
}

interface TestInterface2 {
  b: number;
}

// 多继承
interface TestInterface3 extends TestInterface, TestInterface2 {
  c: number;
}

// 练习 数组也是对象 那么可以用接口定义数组
interface StringArray {
  [props: number]: string;
}

const arr: StringArray = ['1', '2', '3']; //OK

类型别名

类型别名相当于给已有类型起了一个别名，它不会创建类型，但是可以给任意类型起别名。

1
2
3

type DecimalDigit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;

const d: DecimalDigit = 0;

类型别名与接口的比较：

类型别名能够表示非对象类型，而接口不行。
接口可以继承其他接口、类等对象类型。而类型别名不能继承（但可以通过交叉类型 & 来实现类似的功能）；
错误提醒对类型别名引用对应的类型，而接口引用接口名。
接口可以同名，同名接口对应的值会合并，但是类型别名不能同名。

类

TypeScript的类与JavaScript的类大多数语法都是类似的，但TypeScript对类的一下功能做了扩充，如接口实现、泛型类等。一个简单的示例：

interface IA {
  a: number;
}

class A implements IA { // 可以继承接口
  a: number = 0; // 定义一个属性a
  readonly b: number = 1; // 定义一个只读属性b 只读属性必须赋初始值
  readonly c: number; // 只读属性初始值在构造函数中赋值 如果不赋值则报错
  private _d: number = 3;
  static e: string = '4'; //静态属性

  constructor() { // 构造函数不能定义返回类型
    this.c = 2;
  }

  say(): void { // 成员方法
    console.log('Hello');
  }

  get d(): number { // getter
    return this._d;
  }

  set d(value) { // setter
    this._d = value;
  }
}


class B extends A { // 继承
  f: string = '5'; // 子类特有的属性
}

类的可访问性

访问修饰符：

public(默认): 当前类的内部、外部以及派生类的内部均可访问，不写访问修饰符默认就是public。
protected: 在当前类和派生类内部可以访问，不允许当前类外部（如创建的对象）访问。
private: 只有当前类的内部可以访问。

ES13类的私有字段TS也是支持的，私有字段仅有类内部可以访问：

class A {
  #b: number;

  constructor() {
    this.#b = 1; // 内部可以访问
  }
}

const a = new A();
a.#b; // Error 不能访问

参数成员

在类的构造函数的参数中使用访问修饰符或readonly修饰，则该参数自动成为类的成员变量，不需要在构造函数中使用 this.a = a; 这样的语句。

class A {

  constructor(
    public b: number,
    protected c: number,
    private d: number,
    readonly e: number,
  ) {
    console.log(this.b, this.c, this.d, this.e);
  }
}

const a = new A(1, 2, 3, 4); // 打印1, 2, 3, 4
a.b; // 返回1

源码共读-Redux

2023-05-23T15:52:44.000Z

Redux是优秀的状态管理库，本节我们学习一下Redux源码，由于Redux源码是TypeScript写的，为了方便学习，本节去掉一些类型定义，转化为JavaScript来展示，另外对于错误信息我们这里就先不处理了。

使用

Redux官方示例：

import { createStore } from 'redux'

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

let store = createStore(counterReducer)

store.subscribe(() => console.log(store.getState()))

store.dispatch({ type: 'counter/incremented' }) // {value: 1}
store.dispatch({ type: 'counter/incremented' }) // {value: 2}
store.dispatch({ type: 'counter/decremented' }) // {value: 1}

createStore

createStore简易实现：

const randomString = () =>
  Math.random().toString(36).substring(7).split('').join('.')

const ActionTypes = {
  INIT: `@@redux/INIT${/* #__PURE__ */ randomString()}`,
  REPLACE: `@@redux/REPLACE${/* #__PURE__ */ randomString()}`,
}

function createStore(reducer, preloadedState, enhancer) {

  // 如果第二个参数是函数 第三个函数没有值的时候 认为第二个参数是enhancer
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }

  // enhancer有值的时候 使用enhancer来构建store
  if (typeof enhancer !== 'undefined') {
    return enhancer(createStore)(
      reducer,
      preloadedState
    )
  }

  let currentReducer = reducer
  let currentState = preloadedState
  let listeners = [];

  function getState() {
    return currentState
  }

  function subscribe(listener) {
    listeners.push(listener)

    return function unsubscribe() {
      const index = listeners.indexOf(listener)
      listeners.splice(index, 1)
    }
  }

  function dispatch(action) {
    currentState = currentReducer(currentState, action)

    listeners.forEach(listener => {
      listener()
    })
    return action
  }

  function replaceReducer(nextReducer) {
    currentReducer = nextReducer
    dispatch({ type: ActionTypes.REPLACE })
  }

  dispatch({ type: ActionTypes.INIT })

  const store = {
    dispatch: dispatch,
    subscribe,
    getState,
    replaceReducer,
  }
  return store
}

上述是createStore的简单实现，调用createStore()函数以后返回一个store对象，该对象有4个方法，如下：

1：dispatch：分发action，通过currentReducer(currentState, action)来生成新的state，并触发事件。
2: subscribe: 监听事件，实际上就是把事件添加到事件数组中，并返回移除事件函数。
3: getState：获取当前的状态。
4: replaceReducer：替换reducer。

最新的源码与我们的实现理念大致相同，只是多了类型的校验，另外事件采用双map形式（防止dispatch中调用subscribe/unsubscribe）而不是我们简单的数组，最后在事件触发时会使用变量标记，防止在分发过程中出现不合理的操作。

中间件

中间件简绍

写一个redux中间件很简单，比如写一个打印日志的中间件。

const logger = function(store) {
  return function(next) {
    return function(action) {
      console.log('prev state:', store.getState()) // 更新前的状态
      let result = next(action)
      console.log('next state', store.getState()) // 更新后的状态
      return result
    }
  }
}

// 箭头函数简写
const logger = store => next => action => {
  console.log('prev state:', store.getState()) // 更新前的状态
  let result = next(action)
  console.log('next state', store.getState()) // 更新后的状态
  return result
}

中间件是一个嵌套三层的函数，每一层都有一个参数，参数分别是store、next、action。上面是redux-logger中间件的简单实现，常用的中间件还有redux-thunk，核心代码如下：

const thunk = ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
    return action(dispatch, getState)
  }

  return next(action)
}

redux-thunk的逻辑也很简单，通过对store解构获取dispatch和getState函数，如果action是函数则调用action，否则调用next(action)进行下一个中间件。在action函数中可以通过dispatch来触发action，哪怕是在异步的回调中，所以redux-thunk通常用来处理异步操作。

中间件使用

import { createStore, applyMiddleware } from 'redux'

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// 带有中间件的store
let store = createStore(counterReducer, applyMiddleware(thunk, logger))

store.subscribe(() => console.log(store.getState()))

store.dispatch({ type: 'counter/incremented' })
// 打印：
// prev state: { value: 0 }
// { value: 1 }
// next state { value: 1 }

store.dispatch((dispatch, getState) => { // 异步操作
  setTimeout(() => {
    dispatch({ type: 'counter/incremented' })
  }, 1000)
})
// 1秒后打印：
// prev state: { value: 1 }
// { value: 2 }
// next state { value: 2 }

需要注意的是applyMiddleware是有顺序的，它会从做左到右依次执行，next后是从右到左执行。如果上述示例修改为applyMiddleware(logger, thunk)会发生什么事呢？那么在调用store.dispatch(() => {})的时候也会打印日志，里面的dispatch又会打印一次。

applyMiddleware实现

由上createStore函数可知，当传入中间件的时候会通过enhancer来生成store。enhancer实际上就是applyMiddleware(logger, thunk)的结果，它是一个两层函数，第一层接受的参数是createStore第二次接受的参数是reducer和preloadedState，代码大致如下：

function compose(...funcs) {
  if (funcs.length === 0) {
    return (arg) => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce(
    (a, b) =>
      (...args) =>
        a(b(...args))
  )
}

function applyMiddleware(...middlewares) {
  return createStore => (reducer, preloadedState) => {
    const store = createStore(reducer, preloadedState)
    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action, ...args) => dispatch(action, ...args)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

首先通过createStore(reducer, preloadedState)不传中间件来创建store，applyMiddleware内层函数的返回值只有dispatch是处理过的函数，其他的都是与store中的一致，也就是说中间件的作用实际上是强化dispatch函数。middlewareAPI实际上就是中间件的第一层函数的参数store，这里需要注意的是dispatch调用的时候，下面的代码已经走完了，所以里面的dispatch函数是加强后的dispatch而不是上面定义的抛出异常的函数。通过middlewares.map(middleware => middleware(middlewareAPI))去掉了中间件第一层函数。compose核心逻辑是funcs.reduce((a, b) => (...args) => a(b(...args)))对于函数数组返回嵌套执行的组合函数，compose(...chain)(store.dispatch)最后参数是store.dispatch，比如有两个中间件a和b，这里相当于变成a(b(store.dispatch))，相当于a这一层的next函数是b(store.dispatch)函数。

源码共读-Koa

2023-05-23T09:54:49.000Z

Koa是基于 Node.js 平台的下一代 web 开发框架，它的源码可以看这里，本章通过源码来简绍一下Koa是怎么实现的。

核心代码

Koa的核心代码只有4个文件，如图。

各个文件的作用：

application.js：Koa的核心，对应Koa App类。
context.js：对应上下文对象ctx。
request.js：对应ctx.request对象。
response.js：对应ctx.response对象。

Koa实现

Koa使用

Koa使用如下：

const Koa = require('koa');
const app = new Koa();

app.use(ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000, () => {
  console.log("服务器启动成功!");、
});

Koa底层是基于原生http模块，原生http模块怎么启动一个服务呢？如下：

const http = require('http');

const server = http.createServer(function(req, res) {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end("Hello World");
});

server.listen(3000, () => {
  console.log("服务器启动成功!");、
});

观察上面的代码，两者是不是挺像的。

application源码

为了方便查看application的核心逻辑，下面是我去掉了部分非核心代码的application源码：

const onFinished = require('on-finished')
const response = require('./response')
const compose = require('koa-compose')
const context = require('./context')
const request = require('./request')
const statuses = require('statuses')
const Emitter = require('events')
const Stream = require('stream')
const http = require('http')

class Application extends Emitter {
  constructor (options) {
    super()
    options = options || {}
    this.env = options.env || process.env.NODE_ENV || 'development'
    this.compose = options.compose || compose
    if (options.keys) this.keys = options.keys
    this.middleware = []
    this.context = Object.create(context)
    this.request = Object.create(request)
    this.response = Object.create(response)
  }

  listen(...args) {
    const server = http.createServer(this.callback())
    return server.listen(...args)
  }

  use(fn) {
    if (typeof fn !== 'function') throw new TypeError('middleware must be a function!')
    this.middleware.push(fn)
    return this
  }

  callback() {
    const fn = this.compose(this.middleware)
    if (!this.listenerCount('error')) this.on('error', this.onerror)

    const handleRequest = (req, res) => {
      const ctx = this.createContext(req, res)
      return this.handleRequest(ctx, fn)
    }
    return handleRequest
  }

  handleRequest(ctx, fnMiddleware) {
    const res = ctx.res
    res.statusCode = 404
    const onerror = err => ctx.onerror(err)
    const handleResponse = () => respond(ctx)
    onFinished(res, onerror)
    return fnMiddleware(ctx).then(handleResponse).catch(onerror)
  }

  createContext(req, res)
    const context = Object.create(this.context)
    const request = context.request = Object.create(this.request)
    const response = context.response = Object.create(this.response)
    context.app = request.app = response.app = this
    context.req = request.req = response.req = req
    context.res = request.res = response.res = res
    request.ctx = response.ctx = context
    request.response = response
    response.request = request
    context.originalUrl = request.originalUrl = req.url
    context.state = {}
    return context
  }

  onerror(err) {
    if (err.status === 404 || err.expose) return
    if (this.silent) return

    const msg = err.stack || err.toString()
    console.error(`\n${msg.replace(/^/gm, '  ')}\n`)
  }
}

function respond (ctx) {
  // allow bypassing koa
  if (ctx.respond === false) return

  if (!ctx.writable) return

  const res = ctx.res
  let body = ctx.body
  const code = ctx.status

  // ignore body
  if (statuses.empty[code]) {
    // strip headers
    ctx.body = null
    return res.end()
  }

  if (ctx.method === 'HEAD') {
    if (!res.headersSent && !ctx.response.has('Content-Length')) {
      const { length } = ctx.response
      if (Number.isInteger(length)) ctx.length = length
    }
    return res.end()
  }

  // status body
  if (body == null) {
    if (ctx.response._explicitNullBody) {
      ctx.response.remove('Content-Type')
      ctx.response.remove('Transfer-Encoding')
      ctx.length = 0
      return res.end()
    }
    if (ctx.req.httpVersionMajor >= 2) {
      body = String(code)
    } else {
      body = ctx.message || String(code)
    }
    if (!res.headersSent) {
      ctx.type = 'text'
      ctx.length = Buffer.byteLength(body)
    }
    return res.end(body)
  }

  // responses
  if (Buffer.isBuffer(body)) return res.end(body)
  if (typeof body === 'string') return res.end(body)
  if (body instanceof Stream) return body.pipe(res)

  // body: json
  body = JSON.stringify(body)
  if (!res.headersSent) {
    ctx.length = Buffer.byteLength(body)
  }
  res.end(body)
}

当调用app.use的时候，实际上是把中间件函数加入到this.middleware数组当中。
当调用app.listen的时候，通过http.createServer来创建http服务并使用server.listen来监听服务。
这里比较难理解的是callback函数，它使用compose将中间件合并成一个调用函数，具体怎么合并的我们稍后再说。如果error事件没有监听的话，添加一个默认的监听函数，默认的onerror函数实际上就是打印错误信息；this.listenerCount是从哪里来的呢？实际上Application类是继承自node中的Emitter，该方法也是Emitter的方法。最后返回了一个handleRequest函数，该函数做了2件事，首先通过req和res构建ctx，然后调用this.handleRequest，注意this.handleRequest是Application类的属性而不是callback中的handleRequest，也就是这里并没有递归调用。
在this.handleRequest函数中调用了中间件函数fnMiddleware(ctx)，当中间件函数都调用完了以后调用respond(ctx)，respond通过不同的情况去处理res的结果；失败的时候调用ctx.onerror(err)。另外在中间件处理之前会调用onFinished(res, onerror)来监听出错的情况，onFinished的代码请看这里。

koa-compose源码

在讲述源码之前我们先看看koa-compose中间件是怎么使用的。

const Koa = require('koa');
const app = new Koa();

app.use(async(ctx, next) => {
  console.log('第1个中间件开始');
  await next();
  console.log('第1个中间件结束');
});

app.use(async(ctx, next) => {
  console.log('第2个中间件开始');
  await next();
  console.log('第2个中间件结束');
});

app.use(async(ctx, next) => {
  console.log('第3个中间件开始');
  await next();
  console.log('第3个中间件结束');
});

app.listen(3000, () => {
  console.log("服务器启动成功!");
});

客户端打印:

第1个中间件开始
第2个中间件开始
第3个中间件开始
第3个中间件结束
第2个中间件结束
第1个中间件结束

这就是Koa中间件著名的洋葱模型。

我们先不谈Koa只看看koa-compose做了什么事。

const compose = require('koa-compose');

const middleware = [
  async(ctx, next) => {
    console.log('第1个中间件开始');
    await next();
    console.log('第1个中间件结束');
  },
  async(ctx, next) => {
    console.log('第2个中间件开始');
    await next();
    console.log('第2个中间件结束');
  },
  async(ctx, next) => {
    console.log('第3个中间件开始');
    await next();
    console.log('第3个中间件结束');
  }
];
const fn = compose(middleware);
const ctx = {};
fn(ctx).then(() => {
  console.log('处理完成了');
});

上面打印：

第1个中间件开始
第2个中间件开始
第3个中间件开始
第3个中间件结束
第2个中间件结束
第1个中间件结束
处理完成了

koa-compose把多个中间件合并成一个函数，通过await next()来调用下一个中间件，其源码如下：

function compose (middleware) {
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }

  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      index = i
      let fn = middleware[i]
      if (i === middleware.length) fn = next
      if (!fn) return Promise.resolve()
      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

首先对middleware做类型检查，middleware必须是数组，同时每一个中间件必须是函数。然后返回一个函数，这个函数第一个参数是上下文对象，第二个参数是下个中间件执行的next函数。核心逻辑是上面的dispatch方法，在dispatch方法中会返回Promise。dispatch方法实际上就是next方法，首次会调用dispatch(0)来触发第一个中间件函数。当一个中间件中调用next方法后会把index标记为当前的索引，如果一个中间件多次调用next方法，那么由于第一次调用是index会标记为i，那么第二次调用的时候i和index是相等的，也就是第二次的时候会走if (i <= index) return Promise.reject(new Error('next() called multiple times'))逻辑，也就是会报错。每次调用的时候根据索引获取当前要执行的中间件函数，在第18行会执行当前中间件，并把下一个dispatch当作第二个参数next传入到下一个中间件中。当执行到最后一个中间件的时候，设置fn = next由于Application代码的第52行并没有传递第二个参数，所以此时next是undefined，那么compose中将会走第16行if (!fn) return Promise.resolve()的逻辑。如果传递了函数那么会执行传入的函数，当此函数中调用next以后，由于索引已经超过了middleware的长度，所以下次函数执行事也会走第16行的逻辑。

context源码

context是对上下文对象的封装，具体代码如下：

const util = require('util')
const createError = require('http-errors')
const httpAssert = require('http-assert')
const delegate = require('delegates')
const statuses = require('statuses')
const Cookies = require('cookies')

const COOKIES = Symbol('context#cookies')

const proto = module.exports = {
  inspect () {
    if (this === proto) return this
    return this.toJSON()
  },

  toJSON () {
    return {
      request: this.request.toJSON(),
      response: this.response.toJSON(),
      app: this.app.toJSON(),
      originalUrl: this.originalUrl,
      req: '',
      res: '',
      socket: ''
    }
  },

  assert: httpAssert,

  throw (...args) {
    throw createError(...args)
  },

  onerror (err) {.
    if (err == null) return

    const isNativeError =
      Object.prototype.toString.call(err) === '[object Error]' ||
      err instanceof Error
    if (!isNativeError) err = new Error(util.format('non-error thrown: %j', err))

    let headerSent = false
    if (this.headerSent || !this.writable) {
      headerSent = err.headerSent = true
    }

    // delegate
    this.app.emit('error', err, this)

    if (headerSent) {
      return
    }

    const { res } = this

    if (typeof res.getHeaderNames === 'function') {
      res.getHeaderNames().forEach(name => res.removeHeader(name))
    } else {
      res._headers = {} // Node < 7.7
    }

    // then set those specified
    this.set(err.headers)

    // force text/plain
    this.type = 'text'

    let statusCode = err.status || err.statusCode

    // ENOENT support
    if (err.code === 'ENOENT') statusCode = 404

    // default to 500
    if (typeof statusCode !== 'number' || !statuses[statusCode]) statusCode = 500

    // respond
    const code = statuses[statusCode]
    const msg = err.expose ? err.message : code
    this.status = err.status = statusCode
    this.length = Buffer.byteLength(msg)
    res.end(msg)
  },

  get cookies () {
    if (!this[COOKIES]) {
      this[COOKIES] = new Cookies(this.req, this.res, {
        keys: this.app.keys,
        secure: this.request.secure
      })
    }
    return this[COOKIES]
  },

  set cookies (_cookies) {
    this[COOKIES] = _cookies
  }
}

/**
 * Response delegation.
 */
delegate(proto, 'response')
  .method('attachment')
  .method('redirect')
  .method('remove')
  .method('vary')
  .method('has')
  .method('set')
  .method('append')
  .method('flushHeaders')
  .access('status')
  .access('message')
  .access('body')
  .access('length')
  .access('type')
  .access('lastModified')
  .access('etag')
  .getter('headerSent')
  .getter('writable')

/**
 * Request delegation.
 */
delegate(proto, 'request')
  .method('acceptsLanguages')
  .method('acceptsEncodings')
  .method('acceptsCharsets')
  .method('accepts')
  .method('get')
  .method('is')
  .access('querystring')
  .access('idempotent')
  .access('socket')
  .access('search')
  .access('method')
  .access('query')
  .access('path')
  .access('url')
  .access('accept')
  .getter('origin')
  .getter('href')
  .getter('subdomains')
  .getter('protocol')
  .getter('host')
  .getter('hostname')
  .getter('URL')
  .getter('header')
  .getter('headers')
  .getter('secure')
  .getter('stale')
  .getter('fresh')
  .getter('ips')
  .getter('ip')

可见context实际上就是一个对象，它对Cookie和onerror做了一个封装。最后使用delegate()来代理request和response对象，delegate不了解的同学可以看下面这个示例。

const delegate = require('delegates');

const obj = {
  aaa: {
    name: 'aaa',
    age: 18,
    isBoy: true,
    say() {
      console.log(`我是${this.name}，今年${this.age}`);
    }
  }
};

delegate(obj, 'aaa')
  .method('say')
  .getter('name')
  .setter('age')
  .access('isBoy')


console.log(obj.name); // 打印 aaa
obj.age = 19; // 可以设置属性
obj.say(); // 打印 我是aaa，今年19
console.log(obj.isBoy); // 打印 true

上面代理了obj对象的aaa属性，所以直接可以通过obj来访问aaa中代理的属性和方法，其中method表示代理方法，getter表示代理get方法，setter表示代理set方法，access表示不但代理了get同时也代理了set。delegates的实现也不难：

function Delegator(proto, target) {
  if (!(this instanceof Delegator)) return new Delegator(proto, target);
  this.proto = proto;
  this.target = target;
  this.methods = [];
  this.getters = [];
  this.setters = [];
  this.fluents = [];
}

Delegator.auto = function(proto, targetProto, targetProp){
  var delegator = Delegator(proto, targetProp);
  var properties = Object.getOwnPropertyNames(targetProto);
  for (var i = 0; i < properties.length; i++) {
    var property = properties[i];
    var descriptor = Object.getOwnPropertyDescriptor(targetProto, property);
    if (descriptor.get) {
      delegator.getter(property);
    }
    if (descriptor.set) {
      delegator.setter(property);
    }
    if (descriptor.hasOwnProperty('value')) { // could be undefined but writable
      var value = descriptor.value;
      if (value instanceof Function) {
        delegator.method(property);
      } else {
        delegator.getter(property);
      }
      if (descriptor.writable) {
        delegator.setter(property);
      }
    }
  }
};

Delegator.prototype.method = function(name){
  var proto = this.proto;
  var target = this.target;
  this.methods.push(name);

  proto[name] = function() {
    return this[target][name].apply(this[target], arguments);
  };

  return this;
};

Delegator.prototype.access = function(name){
  return this.getter(name).setter(name);
};

Delegator.prototype.getter = function(name){
  var proto = this.proto;
  var target = this.target;
  this.getters.push(name);

  proto.__defineGetter__(name, function(){
    return this[target][name];
  });

  return this;
};

Delegator.prototype.setter = function(name){
  var proto = this.proto;
  var target = this.target;
  this.setters.push(name);

  proto.__defineSetter__(name, function(val){
    return this[target][name] = val;
  });

  return this;
};

Delegator.prototype.fluent = function (name) {
  var proto = this.proto;
  var target = this.target;
  this.fluents.push(name);

  proto[name] = function(val){
    if ('undefined' != typeof val) {
      this[target][name] = val;
      return this;
    } else {
      return this[target][name];
    }
  };

  return this;
};

request与response

request与response就是一个简单的对象，没什么好说的，比如request代码大致如下：

module.exports = {
  get header () {
    return this.req.headers
  },

  set header (val) {
    this.req.headers = val
  },

  get headers () {
    return this.req.headers
  },

  set headers (val) {
    this.req.headers = val
  },

  get url () {
    return this.req.url
  },

  set url (val) {
    this.req.url = val
  },

  // 省略其他代码
}

这里需要注意的是有一个this.req对象，这个对象是从哪里来的？请看Application的createContext方法的第61行，在这里把node的req挂载了上来，res同理。

H5 history API

2023-04-18T11:11:37.000Z

对于JS中history对象我们最常用的就是back()、forward()、go()三个方法，H5新增了pushState()和replaceState()用来无刷新页面来更新URL地址，本章所说的H5 history API也指的是这两个方法。

H5 history API浏览器兼容情况请看这里。

PS：虽然H5已经不是什么新东西了，但学学总没害处。

pushState

pushState根据API的意思是向浏览器的历史栈中添加一个状态，这个函数本来是用来添加状态的，而附加能力是修改URL，所以第一个参数是状态，最后一个参数才是URL，URL是可选的，如果不写URL则URL不会变，但是仍然会在历史栈中添加一条数据，点击浏览器的回退按钮会出栈这条历史信息，相当于页面回到原来的状态，页面内容并没有变化。其签名如下：

1	history.pushState(state, title[, url])

pushState第一个参数是状态，这个状态state可以是可结构化拷贝的任意类型，传对象、传数字、传布尔都没问题。第二个是标题，但是浏览器压根不鸟它，你设置了也不会修改浏览器标题，所以我们一般传入null就可以了。第三个是URL，一般是一个字符串，新版本浏览器对URL对象（new URL()这种）也是支持的，但考虑到兼容性还是使用字符串比较好，需要注意的是URL必须是跟当前页面地址是同源的。

来看一个简单的例子：

const state = {
    msg: '我是状态'
};

history.pushState(state, null, '/a');

console.log(history.state); // 打印 state 即 { msg: '我是状态' }

上述state是一个对象，调用pushState会在历史栈中增加一条信息，同时修改URL的pathName为/a。如果把上述state的值修改为123，那么调用pushState后history.state就变成了123。但是需要注意的是history.state !== state，这里采用了结构化深拷贝，相当于调用了structuredClone(state)，结构化深拷贝不仅可以拷贝基本类型，而且对象在存在循环引用也是可以拷贝成功的，比JSON.parse(JSON.stringify(state))要更加安全。浏览器原生的structuredClone方法目前兼容性还不够好，其相关内容可以看这里。当然结构化深拷贝也不是万能的，对于dom节点，error对象、function函数来说也会拷贝失败，上述stete传这些类型的值时，会报错。

第三个参数URL又可分为这几种情况，比如当前路径为https://www.kai666666.com/2023/04/18/H5-history-API/?1=1#more（这里为了方便查看search的情况，添加了一个1=1的参数）。

URL情况	处理情况	url值	url处理结果
URL全路径	整体替换	`https://www.kai666666.com/a`	`https://www.kai666666.com/a`
`/`开头	替换pathName部分	`/a`	`https://www.kai666666.com/a`
`./`开头	替换当前路径，也就是最后一位	`./a`	`https://www.kai666666.com/2023/04/18/H5-history-API/a`
`../`开头	替换上一级	`../a`	`https://www.kai666666.com/2023/04/18/a`
`?`开头	替换search部分	`?2=2`	`https://www.kai666666.com/2023/04/18/H5-history-API/?2=2`
`#`开头	替换hash部分	`#hash`	`https://www.kai666666.com/2023/04/18/H5-history-API/?1=1#hash`
`单词或数字`开头	替换当前路径部分，等价与`./单词或数字`开头	`aaa`	`https://www.kai666666.com/2023/04/18/H5-history-API/aaa`

这里有几点需要注意一下。首先地址最后一位有没有/会影响到当前路径和上一级路径的判断，如果有/则认为当前路径是斜杠后面的路径，虽然后面是空的。举个例子URLhttps://www.kai666666.com/2023/04/18/H5-history-API/和https://www.kai666666.com/2023/04/18/H5-history-API调用history.pushState(state, null, './a');得到的结果分别是https://www.kai666666.com/2023/04/18/H5-history-API/a和https://www.kai666666.com/2023/04/18/a。

第二点需要注意的是/开头的路径将会把search和hash部分也替换掉；?开头的路径会把hash部分也替换的，如果需要保留则需要手动添加对应的部分，如`/a${location.search}${location.hash}`。

当前路径与上一级路径也可以混用：

1 2	history.pushState(null, null, './a/../b/c'); // 路径修改为 https://www.kai666666.com/2023/04/18/H5-history-API/b/c

对了URL路径中只有./或者../可以省略后面的/。

1 2	history.pushState(null, null, '..'); // 替换到上一级目录路径修改为 https://www.kai666666.com/2023/04/18/

最后如果URL中含有中文，调用location.pathname得到的是转码后的内容。

1 2	history.pushState(null, null, '/你好'); console.log(location.pathname)// /%E4%BD%A0%E5%A5%BD

replaceState

replaceState与pushState用法一模一样，区别是replaceState是把当前的历史栈替换了，而pushState是添加了一个历史栈，这样就导致replaceState点返回按钮会回到上一个历史栈中。replaceState的签名如下：

1	history.replaceState(stateObj, title[, url]);

base元素对路径的影响

HTML中base元素提供了基础的路径，如果设置了base，那么相对路径都是基于base元素中的路径来算出新的路径的。

1	<base href="/base/aaa">

如添加如上base元素后，上述情况处理的结果如下：

URL情况	url值	url处理结果
URL全路径	`https://www.kai666666.com/a`	`https://www.kai666666.com/a`
`/`开头	`/a`	`https://www.kai666666.com/a`
`./`开头	`./a`	`https://www.kai666666.com/base/a`
`../`开头	`../a`	`https://www.kai666666.com/a`
`?`开头	`?2=2`	`https://www.kai666666.com/base/aaa?2=2`
`#`开头	`#hash`	`https://www.kai666666.com/base/aaa#hash`
`单词或数字`开头	`bbb`	`https://www.kai666666.com/base/bbb`

popstate事件

popstate事件是浏览器历史栈返回或者前进的时候会触发，调用history.pushState()和history.replaceState()方法的时候并不会触发popstate事件，只有hash改变或者调用这两个函数后并点击浏览器的前进/后退或者使用JS API前进/后退（如调用history.back()、history.go(-1)或history.forward()）的时候才会触发。

1
2
3

window.addEventListener('popstate', (event) => {
  console.log(event.state); // 这里可以获取到状态
})

如果不修改hash或不调用者两个函数的时候，直接前进后退一般都是会刷新页面，也就不会触发事件回调函数。当然你也可以手动触发popstate事件。

1	window.dispatchEvent(new PopStateEvent('popstate'));

使用随机数生成器估算π

2023-03-10T16:45:26.000Z

编写函数，使用随机数生成器估算π。

各种计算机语音中都会给出π的具体值，如JavaScript中就有Math.PI，但是如何不使用该值来粗略估算π的值呢？

整体思路：如图所示，在坐标系(x, y)的作用域[-1，1]与值域[-1，1]中随机生成点，点在圆x² + y² = 1内的概率为π / 4，那么π可以由4 * 点在圆内的数量 / 所有点的数量得到。实际上我们不需要计算整个圆，我们只要计算作用域[0，1]与值域[0，1]的部分，也就是第一象限，也就是π = 4 * 点在第一象限圆内的数量 / 第一象限所有点的数量。

代码：

function estimatePi(iterations = 100000000) {
  let randX;
  let randY;
  let inside = 0;
  for(let i = 0; i < iterations; i++) {
    randX = Math.random(); // 生成第一象限x的值
    randY = Math.random(); // 生成第一象限y的值
    if((randX * randX) + (randY * randY) <= 1) { // 点在圆内
      inside++;
    }
  }
  return 4 * inside / iterations; // 计算π
}

上述代码中，iterations越大耗时越长，结果越准确。

计算整数二进制表示中各个1位的数目

2023-03-10T15:45:26.000Z

编写一个函数，确定给定整数的二进制表示中各个1位的数目。

举例：给定一个数字是7，假设是8位操作系统，二进制表示为00000111，其中有3个1，则调用函数返回3。

整体思路：循环统计，检测二进制表示中的最后一位，如果最后一位是1的时候计数器加1，然后把数字右移一位，直到整个数字全部移完。

代码：

function numOnesInBinary(number) {
  let numOnes = 0;
  while(number != 0) { // 直到数字全部移完
    if((number & 1) === 1) { // 判断最后一位是1
      numOnes++; // 计数器自增
    }
    number = number >>> 1; // 二进制右移1位
  }
  return numOnes;
}

上述算法已经很不错了，不过还有可以优化的部分。

一个数的二进制跟这个数减1的二进制相比，前半部分是相同的，只是翻转了最低位的1以及之后的各个位。例如有个数的二进制位01110000(十进制112)，该值减去1以后的二进制是01101111（十进制111），可以看到前三位是相同的，后面的位数是想反的。一个数的二进制跟这个数减1的二进制相与（&）会发生什么呢？实际上就是该二进制去掉最后一个1，如01110000 & 01101111 = 01100000，01100000实际上就是01110000去掉最后一个1的结果。

有了上面的知识，我们可以稍微改造一下代码：

function numOnesInBinary(number) {
  let numOnes = 0;
  while(number != 0) { // 直到不等于0
    number = number & (number - 1); // 去掉二进制最后一位1
    numOnes++; // 计数器自增
  }
  return numOnes;
}

拓展

上述得出一个重要的结论number & (number - 1)的值就是number二进制去掉最后一个1的结果。利用这个结论我们还可以最很多事，比如有题目：

给你一个正整数 n，请你判断该正整数是否是 2 的幂次方。如果是，返回 true ；否则，返回 false。

比如，n=4的时候就返回ture，如果n=3的时候就返回false。

整体思路：由于一个正整数是2的幂次方，那么它的二进制一定是1后面好多0这种格式，比如4的二进制就是100，8的二进制就是1000。所以按照这个思路我们可以去掉最后一个1，如果结果是0的时候就说明这个正整数是2的幂次方。

1
2
3

function isPowerOfTwo(n) {
    return n > 0 && (n & (n - 1)) === 0;
};

《JavaScript DOM 编程艺术》小记

2022-07-24T15:24:07.000Z

在HTML中的Script块中可以使用HTML注释，甚至可以不写结尾。如，以下代码都是可以正常运行的。

<script type="text/JavaScript">
  console.log(1);
  
  console.log(1);
script>

<script type="text/JavaScript">
  console.log(2);
  
<div>v-show truediv>
<div style="display: none;">v-show falsediv>

可见，v-show是使用display来控制是否显示的，而v-if则直接控制是有有该元素。

v-if多条件判断：

1
2
3

<div v-if="state === 'loading'">加载中..。div>
<div v-else-if="state === 'error'">出错了div>
<div v-else>其他内容div>

v-for的使用

v-for是循环指令，可以用在数组，对象和数字上。

数组循环：

<div id="app">
  <ul>
    <li v-for="(item, index) in dogs" :key="index">{{ 1 + index + ':' + item }}li>
  ul>
div>
<script>
  new Vue({
    el: '#app',
    data: {
      dogs: ['Rex', 'Rover', 'Henrietta', 'Alan']
    }
  });
script>

对象循环：

<div id="app">
  <ul>
    <li v-for="(value, key) in obj" :key="key">{{ key + ':' + value }}li>
  ul>
div>
<script>
  new Vue({
    el: '#app',
    data: {
      obj: {
        a: 1,
        b: 2,
        c: 3,
      }
    }
  });
script>

数字循环，这里打印1~10，注意v-for用在数字上，索引会从1开始而不是0：

<div id="app">
  <ul>
    <li v-for="num in 10" :key="num">{{ num }}li>
  ul>
div>
<script>
  new Vue({
    el: '#app',
    data: {
    }
  });
script>

属性绑定

属性绑定使用v-bind:，或者简写形式:冒号

<div id="app">
  <button v-bind:type="buttonType">Test buttonbutton>
  <button :type="buttonType">Test buttonbutton>
div>
<script>
  new Vue({
    el: '#app',
    data: {
      buttonType: 'submit'
    }
  });
script>

由于Vue是使用Object.defineProperty来做的响应式的，所以对于给对象添加新的属性、使用数组下标修改数组值、修改数组长度来删除数组元素这三种操作是无法做到响应式，所以Vue提供了set和delete方法：

Vue.set(data, 'key', value);
// 组件内可以
this.$set(data, 'key', value);

Vue.delete( data, index);
// 组件内可以
this.$delete( data, index);

v-html

如果需要把一段字符串当做HTML元素来使用的时候可以使用v-html，否则HTML标签会被转移。需要注意的是v-html的内容一点要保证是安全的，否则容易受到XSS攻击。

1	<div v-html="yourHtml">div>

v-modal双向绑定

<div id="app">
  <input type="text" v-model="inputText">
  <p>inputText: {{ inputText }}p>
div>

方法

<div id="app">
  <ul>
    <li v-for="number in filterPositive(numbers)">{{ number }}li>
  ul>
div>
<script>
  new Vue({
    el: '#app',
    data: {
      numbers: [-5, 0, 2, -1, 1, 0.5]
    },
    methods: {
      filterPositive(numbers) {
        return numbers.filter((number) => number >= 0);
      }
    }
  });
script>

计算属性

<div id="app">
  <p>Sum of numbers: {{ numberTotal }}p>
div>
<script>
  new Vue({
    el: '#app',
    data: {
      numbers: [5, 8, 3]
    },
    computed: {
      numberTotal() {
        return numbers.reduce((sum, val) => sum + val);
      }
    }
  });
script>

计算属性与方法的区别：计算属性会被缓存，如果在模板中多次调用一个方法，方法中的代码在每一次调用时都会执行一遍，但是如果计算属性被多次调用，其中的代码会执行一次，之后每次调用都会使用被缓存的值。只有当计算属性的依赖发生变化时，代码才会被再次执行。此外方法可以携带参数，但是计算属性可以设置值，如下：

<div id="app">
  <p>Sum of numbers: {{ numberTotal }}p>
div>
<script>
  new Vue({
    el: '#app",
    data: {
      numbers: [5, 8, 3]
    },
    computed: {
      numberTotal: {
        get() {
          return numbers.reduce((sum, val) => sum + val);
        },
        set(newValue) {
          const oldValue = this.numberTotal;
          const difference = newValue - oldValue;
          this.numbers.push(difference)
        }
      }
    }
  });
script>

watch的使用

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  watchers: {
    count(newValue, oldValue) {
      // this.count has been changed!
      console.log('新的值：' + newValue)
      console.log('旧的值：' + oldValue)
    }
  }
});

注意：在watch中一定不要去修改当前监听的值，否则容易造成死循环。如上面count方法中不要写this.count = XXX。

watch也可以监听对象的某个属性：

new Vue({
  data: {
    formData: {
      username: ''
    }
  },
  watch: {
    'formData.username'(newValue, oldValue) {
      // this.formData.username has changed
    }
  }
});

当然也可以使用函数来监听：

1
2
3

this.$watch('formData.username', function (newValue, oldValue) {

})

对于watch监听对象的情况如果对象的引用不变，则不会调用监听的方法，如上面formData.username改变如果只监听formData则不会调用，如果这种情况需要调用的时候，可以传递deep参数：

new Vue({
  data: {
    formData: {
      username: ''
    }
  },
  watch: {
    formData: {
      handler(newValue, oldValue) {
        // formData.username改变也会调用
      },
      deep: true
    }
  }
});

filter的使用

<div id="app">
  <p>Product one cost: {{ productOneCost | formatCost('$') }}p>
div>
<script>
  new Vue({
    el: '#app',
    data: {
      productOneCost: 998,
    },
    filters: {
      formatCost(value, symbol = '￥') {
        return symbol + (value / 100).toFixed(2);
      }
    }
  });
script>

上述最后渲染出的是Product one cost: $9.98，filter也可以不传参数，如下

1	<p>Product one cost: {{ productOneCost \| formatCost }}p>

上述渲染出的是Product one cost: ￥9.98

除此之外还可以定义全局的过滤器：

1
2
3

Vue.filter('formatCost', function (value, symbol = '￥') {
  return symbol + (value / 100).toFixed(2);
})

使用ref访问元素或者组件

<canvas ref="myCanvas"/>

事件

最简单的使用：

1 2	<button v-on:click="counter++">Click to increase counterbutton> <p>You've clicked the button {{ counter }}P> times.

使用方法：

<div id="app">
  <button v-on:click="increase">Click to increase counterbutton>
  <p>You've clicked the button {{ counter }}p> times.
div>

<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increase(e) {
        this.counter++;
      }
    }
  });
script>

v-on:可以使用@来代替简写：

1	<button @click="increase">Click to increase counterbutton>

修饰符：

1 2	<button @click.stop.prevent="increase">Click to increase counterbutton> <input @keyup.enter="submit">

Vue的修饰符有很多，不同修饰符间可以连用，修饰符的顺序不同左右可能也会不同。这里简单的列举一下常用的修饰符：

常用修饰符	说明
.stop	阻止事件冒泡
.prevent	阻止默认行为
.capture	捕获模式
.self	只监听元素自身而不监听子元素
.once	只调用一次方法
.passive	提前告知不阻止默认行为（可以提高移动端性能），不可与.prevent一起使用，如果同时存在则忽略.prevent
.exact	准确地触发，如`@click.ctrl.exact`则只有当ctrl按下并且点击的时候才触发；再如`@click.exact`则只有点击切不能按任何其他键才触发
.ctrl	ctrl按下时
.alt	alt按下时
.shift	shift按下时
.meta	Command或者Windows键被按下时

鼠标按钮修饰符：

修饰符	说明
.left	鼠标左键，如`@mousedown.left`表示鼠标左键被按下
.right	鼠标右键
.middle	鼠标滚轮

对于keyup等按键事件来说，提供了专门的按键修饰符，如：.enter、.tab、.delete(捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、.right和.数字(数字对应的是keyCode)

也可以自定义键名，如v-on:keyup.f1

1	Vue.config.keyCodes.f1 = 112

生命周期钩子函数

new Vue({
  beforeCreate() { // 实例初始化前被触发
  },
  created() {// 初始化后被添加到DOM之前触发
  },
  beforeMount() {// 已经准备好添加DOM前触发
  },
  mounted() {// 元素创建后触发（不一定添加到DOM中了，需要使用nextTick来保证添加进去了）
  },
  beforeUpdate() {// 数据更新后将对dom做一些更改时触发
  },
  updated() {// DOM更新后触发
  },
  deforeDestroy() {// 即将销毁时触发
  },
  destroyed() {// 销毁后触发
  }
})

自定义指令

<p v-blink>This content will blinkp>

<script>
Vue.directive('blink', {
  bind(el, binding, vnode, oldVno) {
    let isVisible = true;
    el.dataset.blinkTimer = setInterval(() => {
      isVisible = !isVisible;
      el.style.visibility = isVisible ? 'visible' : 'hidden';
    }, binding.value || 1000);
  },
  unbind(el) {
    if(el.dataset.blinkTimer) {
      clearInterval(el.dataset.blinkTimer);
      delete el.dataset.blinkTimer
    }
  }
});
script>

指令有5个钩子函数：bind、inserted、update、componentUpdated、unbind。
update指的是当前组件被更新时调用，此时可能子组件还没有更新。componentUpdated是所有子组件都更新后调用。

定义指令还有一种简写的形式：

Vue.directive('my-directive', (el) => {
  // 这里的回调将会在bind和update的时候调用
});

钩子函数的参数有el、binding、vnode 和 oldVnod。其中binding又是一个对象，它的属性有：name、value、oldValue（仅在 update 和 componentUpdated钩子中可用）、expression、arg、modifiers。

transition动画

<transition name="fade">
  <div v-if="divVisible">This content is sometimes hiddendiv>
transition>

<style>
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}
style>

过渡类名：{name}-enter、{name}-enter-active、{name}-enter-to、{name}-leave、{name}-leave-active、{name}-leave-to。

过渡也可以使用JS的钩子函数来做：

<transition
    v-on:before-enter="handleBeforeEnter"
    v-on:enter="handleEnterp"
    v-on:leave="handleLeave">
  <div v-if="divVisible">...div>
transition>

<script>
new Vue({
  el: '#app',
  data: {
    divVisible: false
  },
  methods: {
    handleBeforeEnter(el) {
      el.style.opacity = 0;
    },
    handleEnter(el, done) {
      TweenLite.to(el, 0.6, { opacity: 1, onComplete: done });
    },
    handleLeave(el, done) {
      TweenLite.to(el, 0.6, { opacity: 0, onComplete: done });
    }
  }
});
script>

绑定Class

静态使用class：

1
2
3

<div class="foo bar">
  
div>

可以使用数组：

1
2
3

<div :class="['foo', 'bar']">
  
div>

也可以使用对象，如果值为true的时候则使用该类：

1
2
3

<div :class="{foo: false, bar: true}">
  
div>

还可以混着使用数组和对象：

1
2
3

<div :class="['class1', {foo: false, bar: true}]">
  
div>

还可以写一个静态的和一个动态的class，最终的结果是两者的合并：

1
2
3

<div class="class1" :class="{foo: false, bar: true}">
  
div>

绑定style

style的绑定和class有些类似，需要注意的是对于font-weight这种带有连字符的属性需要使用驼峰形式，如fontWeight。

对象形式：

1	<div :style="{ fontWeight: 'bold', color: 'red' }">div>

数组形式，可以串联多个对象：

1	<div :style="[{fontWeight: 'bold'}, {color: 'red'}]">...div>

一般情况下，Vue会自动加上浏览器的前缀的，当然也可以自己设置多重置：

1	<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">...div>

vue-loader的Scoped CSS

在.vue文件中样式默认是全局的，如果在style标签中加入scoped则只会应用在本组件内：

<template>
  <p>The number is <span class="number">123span>p>
template>

<script>
  export default {
  };
script>

<style scoped>
  .number {
    font-weight: bold;
  }
style>

为什么会只改变本组件呢？实际上当写有scoped后，打包出来的组件元素都将会有一个data-v-{hash}的属性，而样式也会加上该属性，如下(hash可能是其他的值)：

<p data-v-e0e8ddca>The number is <span data-v-e0e8ddca class="number">123span>p>

<style>
.number[data-v-e0e8ddca] {
  font-weight: bold;
}
style>

vue-loader的CSS Modules

style标签中使用module属性，表示使用了CSS Modules，如下：

<template>
  <p>The number is <span :class="$style.number">{{ number }}span>p>
template>

<style module>
  .number {
    font-weight: bold;
  }
style>

使用SCSS

首先需要安装SCSS，使用命令：

1	npm install --save-dev sass-loader node-sass

然后在style上使用lang="scss"属性就可以了：

<style lang="scss" scoped>
  $color: red;

  .number {
    font-weight: bold;
    color: $color;
  }
style>

《CSS选择器世界》读书笔记

2021-05-23T14:00:27.000Z

你敢相信吗，CSS选择器都可以写一本书！张鑫旭大佬的这本书绝对值得一读！

概述

CSS选择器可分为4类：选择器（如body{}）、选择符（如相邻兄弟关系选择符+）、伪类（如:hover）和伪元素（如::before）。

CSS只有一个全局作用域，但是Shadow DOM中的样式不会影响外面的样式。

CSS选择器的优先级

等级	选择器	例子
0级	通配选择器、选择符和逻辑组合伪类	通配选择器*、选择符（+、~、空格、>）、伪类如:not等
1级	标签选择器	body {}
2级	类选择器、属性选择器和伪类	.foo{} [foo]{} :hover
3级	ID选择器	#foo{}
4级	style属性内联	`文字`
5级	!important	.foo{color:red !important;}

举例：

<style>
body .foo {color:red;}
html .foo {color:blue;}
style>

<div class="foo">这里是什么颜色div>

这里html与body等级相同，.foo也是一样的，所有优先级是相同的，如果优先级相同时，就符合后来居上的原则，所以是蓝色的。

部分资料上优先级是按照计数来算的，但是并不意味着10个类选择器和一个id选择器优先级相同，上一级比下一级有永远无法逾越的差距，但是IE浏览器256个上一级选择器要比下一级的优先级大（老式浏览器8字节存储所导致的），现代浏览器则没有此问题。

CSS选择器的命名

选择器大小写敏感问题：

选择器类型	示例	是否大小写敏感
标签选择器	div{}	不敏感
属性选择器-纯属性	[attr]	不敏感
属性选择器	[attr=val]	属性不敏感、值敏感
类选择器	.container	敏感
ID选择器	#id	敏感

选择器命名可以以数字开头，但是在CSS中需要转义，如下面是合法的：

<style>
.1-foo {color:red;} /* 不合法 */
.\31 -foo{color:blue;} /* 合法，注意有个空格，\Unicode简写 加空格，如果不简写则不需要空格  */
.\000031-foo{color:blue;} /* 合法 */
style>

<div class="1-foo">这里是什么颜色div>

CSS的命名可以是中文、中文标点符号甚至Emoji.

精通CSS选择符

四大选择符：后代选择符（空格），孩子选择器（>），相邻兄弟选择符（+）、后面兄弟选择符（~）。

思考题：

<style>
.red {color:red;}
.blue {color:blue;}
style>

<div class="red">
  <div class="blue">
    <p>1. 颜色是？p>
  div>
div>
<div class="blue">
  <div class="red">
    <p>2. 颜色是？p>
  div>
div>

上面1和2是什么颜色呢？由于颜色都是继承自父标签的，所有应该取距离近的父标签的颜色，所以第一个是蓝色，第二个是红色。修改此题如下：

<style>
.red p {color:red;}
.blue p {color:blue;}
style>

<div class="red">
  <div class="blue">
    <p>1. 颜色是？p>
  div>
div>
<div class="blue">
  <div class="red">
    <p>2. 颜色是？p>
  div>
div>

本题稍微变化了一下，这里1和2的颜色不是继承来的，而是匹配到了CSS样式，并且2个样式都可以匹配到，此时就得看优先级了，由于优先级相同，所以后来居上故都是蓝色的。

JS获取元素补充说明：

<div id="myId">
  <div class="blue">2div>
  <div class="blue">
    <div>2div>
  div>
div>

<script>
document.querySelectorAll('#myId div div').length // 1
document.querySelector('#myId').querySelectorAll('div div').length // 3 某个元素的querySelectorAll会把自己也算进去 不算进去则使用下面
document.querySelector('#myId').querySelectorAll(':scope div div').length // 1
script>

相邻兄弟选择符（+），选择的是元素，会忽略中间的文本和注释，如下面3个p标签都是红色的：

<style>
h4 + p {
  color: red;
}
style>

<h4>标题h4>
<p>文字p>

<h4>标题h4>
这里是文字
<p>文字p>

<h4>标题h4>

<p>文字p>

元素选择器

元素选择器包括标签选择器和通配符选择器。

多个选择器时，元素选择器必须写在前面，如这样是不合法的[type=radio]input {} 或者 [type=radio]* {}

属性选择器

7种属性选择器格式：

选择器格式	匹配规则	举例	说明
[attr]	包含指定属性就可以了	`[disabled] {}`	boolean型属性用的比较多
[attr=”val”]	属性和值都需要匹配	`[type="radio"] {}`	值可以是单引号、双引号或者不写，结果都是一样的
[attr~=”val”]	值包含则匹配（val必须是一个值，不能是值里面的一部分）	`[rel~="noopener"] {}`	匹配：不匹配：
[attr\|=”val”]	值起始片段相同（片段是指用-连接的属性值）	`[attr\|=val] {}`	匹配：匹配：不匹配：不匹配：
[attr^=”val”]	属性值以val开头的元素	`[href^="https"] {}`	匹配href以https开头的元素
[attr$=”val”]	属性值以val结尾的元素	`[href$=".pdf"] {}`	匹配href以.pdf结尾的元素
[attr*=”val”]	属性值包含val的元素	`[attr*=val] {}`	匹配： \n 匹配：

之前说过属性选择器，属性是忽略大小写的，属性的值是大小写敏感的，如果需要属性值也忽略大小写的话可以在属性中加一个i或者I，则表示大小写不敏感，如：[attr*="val" i]。

用户行为伪类

手型经过伪类:hover。

激活状态伪类:active。

焦点伪类:focus可以生效的元素：

非disabled状态的表单元素；
包含href属性的a元素；
元素，不过可生效的CSS属性有限；
HTML5中的
元素。

其他元素不能生效，非要生效可以设置属性contenteditable="true"或者添加属性tabindex="数字"。

一个页面最多只有一个元素响应:focus。

整体焦点伪类:focus-within，在当前元素或者当前元素的任意子元素处于聚焦状态的时候都会匹配。（少有的子元素行为决定父元素的伪类选择器）

键盘焦点伪类:focus-visible，元素聚焦，同时浏览器认为聚焦轮廓应该显示。（目前只有Chrome支持）

URL定位伪类

:link伪类用来匹配页面上href链接没有访问过的元素，已访问的元素则不匹配（用处不大，通常直接用a标签选择符就可以了）。

:visited标签访问过选择器，该选择器由于安全考虑有以下特性：

支持的CSS有限，只支持color，background-color，border-color，border-bottom-color，border-left-color，border-right-color，border-top-color，column-rule-color，outline-color，不支持伪元素；
颜色不支持半透明；
只能重置，不能设置原来没设置的样式（如要设置background-color则a标签的样式需要设置过background-color）；
JS的getComputedStyle()方法无法获取到色值。

:any-link不兼容IE11，其他浏览器兼容性良好，匹配规则如下：

匹配所有设置了href属性的链接元素，包括，和；
匹配所有匹配:link伪类或者:visited伪类的元素。

:target：当浏览器是有锚点与当前元素相同时则匹配，这里的锚点也就是路由上hash指向的id所对应的元素。该伪类有一个特性，就是当元素不显示的时候也能匹配，但是不显示的时候设置当前元素的样式也不会有什么效果，毕竟不显示嘛，但是可以操作他后面的兄弟节点（可以利用该伪类选择器实现“显示全部”的功能）。

:target-within：匹配:target伪类匹配的元素，或者后代存在匹配:target伪类的元素的元素。目前还没有浏览器支持！😢

输入伪类

:enabled元素可用，:disabled元素不可用，他们是对立的，readonly的表单是:enabled的，另外:enabled可以用在a标签上，a标签没有:disabled状态，哪怕给a标签设置了disabled属性。

:read-only表单只读，:read-write表单可读可写（默认就是，比较鸡肋）。表单disabled的时候匹配的是:read-write，虽然此刻也不能写😂。

:placeholder-show：占位符显示时匹配，由于占位符是在输入内容为空的时候出现，所以可以使用:placeholder-show来判断表单是否为空。

:default：默认状态的表单选中元素，如select标签下的option可以给一个默认值，这个默认值就可以用:default匹配。这里需要注意的时候如果option标签没有给默认值的时候:default并不会匹配，但是浏览器会默认选中第一个元素。

:checked：checkbox选中时的伪类。

checkbox的:checked伪类比[checked]属性选择器优势在于JS控制选中的时候（checkbox.chencked = true这种情况），由于没有改变checked属性，所以[checked]不准确，而:checked则不会有问题。同样的:disabled和[disabled]也一样，另外:disabled是表单元素实际是否被禁用，比如表单外面包裹着一层

，里面的表单元素则是禁用状态，此时:disabled能匹配到，但是由于里面的表单元素没有加disabled属性所以[disabled]匹配不到。

:indeterminate：不确定值伪类，实际上就是当JS设置checkbox.indeterminate = true的时候则会匹配，也就是浏览器常见的复选框一个横线的时候的那种状态。该伪类也可以用于单选框，当单选框的组没有一个选中的时候则单选框的每一项都匹配。

:valid：输入验证有效的时候匹配。:invalid：输入严重无效的时候匹配。就是我们在标签中设置required或者pattern等属性的时候，会判断是否有效，匹配对应的伪类。由于首次进来的时候往往没有输入内容，这时如果有required属性，此时:invalid会匹配，这样就有点不太友好了，更好的伪元素就是:user-invalid，可以避免首次判断，但是目前兼容性非常不好。

范围验证伪类:in-range和:out-of-range使用于type=number和type=range的input标签。

:required表示表单必填，:optional表示表单可选（非必填）。

树结构伪类

:root匹配根元素，IE9以上才支持，在XHTML中根元素就是html，另外也可以匹配的SVG的根元素，但不能匹配Shadow DOM的的根元素，Shadow DOM的的根元素是:host。:root最常用的是声明CSS变量。

:empty用来匹配空元素，这里的空元素包括前后闭合的空元素，甚至这种非闭合的标签。如果标签内有空格、换行、注释则不能匹配:empty。具有::before或者::after的空元素可以匹配:empty。

:first-child第一个子元素；:last-child最后一个子元素；:only-child唯一的子元素。

:nth-child()与:nth-last-child()表示第几个子元素和倒数第几个子元素，从1开始，也可以是odd（基数）和even（偶数），也可以An+B这种形式，如:nth-child(3n + 4)匹配第4、7、10…

:first-of-type当前类型元素的第一个；:last-of-type当前类型元素最后一个；:only-of-type当前类型只有一个。:only-child匹配到的元素一定是:only-of-type，但是反之不成立。:nth-of-type()和:nth-last-of-type()与上面的类似，不再重复。

逻辑组合伪类

否定伪类:not()：如果当前元素与括号里面的选择器不匹配，则:not()后会匹配。需要注意的是:not()括号里面的只能出现一个选择器，如:not(p)，不可以:not(p.class1)或者:not(p, div)，可以写多个:not()来支持这种情况如：:not(p):not(class1)。另外:not()本身的优先级权重是0，整体权重则由括号内的权重来决定。

与:not()相反的伪类是:is()，:is()是老版本浏览器的:matches()和:any()演化来的。:is()的权重与:not()一样由括号内的权重来决定。还有一个伪类:where()匹配规则与:is()相同，但是整体权重是0，不管括号内的权重是多少。

其他伪类选择器

:scope作用域选择伪类，由于CSS只有一个全局作用域，所以:scope与:root一样，都相当于html。不过JS倒是支持的，详见上面精通CSS选择符最后部分。

:fullscreen用来匹配全屏状态下的DOM元素（调用dom.requestFullScreen()方法的dom元素），:backdrop伪元素用来匹配浏览器默认的黑色全屏背景元素的。

:dir(ltr|rtl)匹配从左到右，还是从右到左。

:lang()语言类伪类，如:lang(zh)。

video或者audio播放状态伪类:playing和:paused。