如何向ES6闭包传递参数以实现多份可配置的P5.js草图实例

你可以通过高阶函数封装sketch生成逻辑，先接收自定义配置参数，再返回符合p5实例要求的sketch函数，无需重复定义sketch模板，即可生成不同配置的独立实例。

完整实现代码如下：

// 封装可传入自定义参数的sketch工厂函数
const createSketch = (options) => {
  // 解构传入的配置参数，可自定义默认值避免参数缺失报错
  const { 
    id = 0, 
    rectX = 100, 
    rectY = 100, 
    rectColor = [255,255,255] 
  } = options;

  // 返回p5实例需要的sketch函数
  return (sketch) => {
    sketch.setup = () => {
      sketch.createCanvas(500, 500);
      // 直接使用传入的id参数
      console.log(`当前实例ID：${id}`);
    };

    sketch.draw = () => {
      sketch.background(100);
      sketch.fill(rectColor);
      sketch.rect(rectX, rectY, 50, 50);
      sketch.text(`实例ID: ${id}`, 10, 20);
    };
  };
};

// 生成不同配置的实例，仅需传入对应参数即可
const myp5_1 = new p5(
  createSketch({
    id: 1,
    rectX: 50,
    rectY: 50,
    rectColor: [255, 0, 0]
  }), 
  document.getElementById('p5-sketch1')
);

const myp5_2 = new p5(
  createSketch({
    id: 2,
    rectX: 200,
    rectY: 200,
    rectColor: [0, 255, 0]
  }), 
  document.getElementById('p5-sketch2')
);

const myp5_3 = new p5(
  createSketch({
    id: 3,
    rectX: 350,
    rectY: 350,
    rectColor: [0, 0, 255]
  }), 
  document.getElementById('p5-sketch3')
);

该方案基于闭包特性实现，每个实例的配置参数相互独立不会干扰，后续如果需要新增配置项，直接在参数解构处添加对应字段即可，也可以根据传入的ID参数做分支判断，实现不同实例执行完全不同的绘制逻辑。

内容的提问来源于stack exchange，提问作者erik