避免在 p5 中使用全局范围

Question

刚刚在p5新建了一个项目，我已经在浏览器中直接导入使用了，不过这次由于是比较复杂的项目，所以打算在 webpack 中使用它。

我导入了库并以这种方式引导它：

import * as p5 from 'p5';

function setup() {
  createCanvas(640, 480);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

但是不行。

原因很简单：webpack 将模块包装在本地范围内，而 p5 并不知道它。

出于这个原因，我将函数分配到全局范围：

import * as p5 from 'p5';

window.setup = function () {
  createCanvas(640, 480);
}

window.draw = function () {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

它工作正常，但看起来还是不对。我不认为污染全局范围是 2019 年使用 JS 的正确方法。特别是如果我正在使用 webpack 并且我即将实现 TypeScript。

那么，我如何告诉 p5 在模块范围内而不是在全局范围内查找函数？

Answer 1

您会使用 instance mode，它不依赖于全局变量。这是该页面的示例：

var sketch = function( p ) {

  var x = 100; 
  var y = 100;

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

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

var myp5 = new p5(sketch);

实例：

var sketch = function( p ) {

  var x = 100; 
  var y = 100;

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

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

var myp5 = new p5(sketch);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

避免在 p5 中使用全局范围

Avoid using global scope in p5

javascript

scope

webpack

p5.js