p5.js 实例模式下的依赖不传递实例

Question

据我所知，不鼓励在 p5 中使用全局模式，因为它会污染全局命名空间。我使用实例模式有一段时间了，但创建依赖项总是令人沮丧。为了使用 p5 函数，我在其他文件中的所有函数都必须将整个 p5 实例传递给它们。如果我在一个项目中创建一堆实体，我会浪费一大堆资源，因为让每个实体本质上都包含整个 p5 库。有没有更好的方法来解决这个问题？

Answer 1

据我了解，您不必 "pass" 将 p5 实例添加到其他文件的函数中。 p5 实例应声明为全局实例。这不应使用比全局模式情况下更多的资源。

因此，我们不再将所有 p5 函数附加到全局 window 对象（全局模式），而是将它们全部附加到全局 p5 实例对象（实例模式）。这只是命名空间的问题。

考虑下面的示例，它是 an example on p5 website 的修改版本：

//sketch.js
let sketch = function(p) {
  let x = 100;
  let y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
    p.background(0);
  };

  p.draw = function() {
    p.fill(255);
    p.rect(x, y, 50, 50);
  };
};

var myp5 = new p5(sketch);

并且您可以在其他文件中操作全局 myp5 实例。例如，在您的 other.js:

//other.js
function randomBackgroundColor() {
  myp5.background(myp5.random(0, 255));
}

setInterval(randomBackgroundColor, 1000); //change background color every 1000 milliseconds

在您的 html 文件中包含这两个 js 文件（首先是 sketch.js）会导致 canvas 具有不断变化的背景和一个矩形。

p5.js 实例模式下的依赖不传递实例

Dependency in p5.js instance mode without passing the instance

javascript

p5.js