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

Question

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

Answer 1

据我了解，您不必将 p5 实例“传递”到其他文件中的函数中。 p5 实例应该被声明为全局的。 这不应该比全局模式使用更多的资源。

因此，与其将所有 p5 函数附加到全局window object（全局模式），现在我们将它们全部附加到全局 p5 实例 object（实例模式）。 这只是命名空间的问题。

考虑下面的示例，它是p5 网站上示例的修改版本：

//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 具有不断变化的背景和一个矩形。