javascript-避免在p5中使用全局范围

我刚刚在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在模块范围内而不是在全局范围内查找功能？

解决方法:

您将使用不依赖全局变量的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-js,scope,webpack,javascript
来源： https://codeday.me/bug/20191108/2006538.html