时间戳

首页 > 解决方案 > p5.j​​s 实例模式下的依赖，不传递实例

javascript - p5.j​​s 实例模式下的依赖，不传递实例

问题描述

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

标签： javascriptp5.js

解决方案

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

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

考虑下面的示例，它是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）会导致画布具有不断变化的背景和一个矩形。

推荐阅读