如何实现类似p5.js的可自定义预定义自动执行函数？

p5.js的这套机制本质是框架主动检测全局（或指定作用域）中的特定命名函数，并在对应时机自动调用。下面是一套可直接复用的实现方案：

一、核心实现逻辑拆解 #

• 生命周期函数（setup/draw）：框架控制执行时机，setup仅执行一次，draw在setup完成后进入循环调用
• 事件响应函数（mousePressed/keyPressed等）：框架绑定原生DOM事件，触发时检查对应自定义函数是否存在，存在则调用并传递简化后的事件数据

二、完整代码实现 #

1. 自定义框架核心代码 #

// 自定义草图框架核心
const MySketch = {
  _isLooping: true,

  // 框架初始化入口
  init() {
    // 执行用户定义的setup（如果存在）
    typeof setup === 'function' && setup();

    // 启动draw循环（如果存在draw函数）
    typeof draw === 'function' && this._startDrawLoop();

    // 绑定所有事件监听
    this._bindEventListeners();
  },

  // 启动draw循环
  _startDrawLoop() {
    if (!this._isLooping) return;
    draw();
    requestAnimationFrame(() => this._startDrawLoop());
  },

  // 暂停draw循环（类似p5.js的noLoop）
  noLoop() {
    this._isLooping = false;
  },

  // 恢复draw循环（类似p5.js的loop）
  loop() {
    this._isLooping = true;
    this._startDrawLoop();
  },

  // 绑定原生事件到自定义响应函数
  _bindEventListeners() {
    // 鼠标点击事件
    window.addEventListener('mousedown', e => {
      typeof mousePressed === 'function' && mousePressed({ x: e.clientX, y: e.clientY });
    });

    // 键盘按下事件
    window.addEventListener('keydown', e => {
      typeof keyPressed === 'function' && keyPressed({ key: e.key, code: e.code });
    });

    // 鼠标移动事件
    window.addEventListener('mousemove', e => {
      typeof mouseMoved === 'function' && mouseMoved({ x: e.clientX, y: e.clientY });
    });
  }
};

// 页面加载完成后自动启动框架
window.addEventListener('load', () => MySketch.init());

2. 用户侧使用示例 #

// 用户自定义的初始化函数，仅执行一次
function setup() {
  console.log('setup执行完毕，即将启动draw循环');
}

// 用户自定义的循环执行函数
function draw() {
  console.log('draw正在循环运行...');
}

// 鼠标点击响应
function mousePressed(pos) {
  console.log(`点击位置：x=${pos.x}, y=${pos.y}`);
}

// 键盘按下响应
function keyPressed(keyInfo) {
  console.log(`按下按键：${keyInfo.key}`);
  // 按空格键暂停循环
  if (keyInfo.key === ' ') MySketch.noLoop();
}

三、扩展优化建议 #

• 作用域隔离：避免全局函数冲突，可改成让用户传入配置对象，比如MySketch.init({ setup, draw, mousePressed })，框架内部从对象中读取函数
• 全局状态管理：添加全局变量（如mouseX/mouseY），实时更新鼠标位置，让用户无需从事件参数中读取
• 错误捕获：在调用用户自定义函数时包裹try-catch，避免用户代码报错导致框架崩溃
• 自定义事件：开放事件注册API，让用户可以扩展更多自定义响应函数

内容的提问来源于stack exchange，提问作者whycan'ticode