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 具有不斷變化的背景和一個矩形。