我有一个包含许多JavaScript文档/项目的p5 JavaScript项目文件夹。为了在浏览器中查看我的代码，我只需运行链接的HTML文档。
我的问题是，如果我要在index.html中链接多个p5 JavaScript项目，我只会获得最后一个链接的JavaScript项目。
我可以简单地为每个项目创建一个单独的HTML文档，但这会使我的项目文件夹中的文档数量翻倍，并可能为自己创建大量不必要的工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JS learnings</title>
</head>
<body>
<script language="javascript" type="text/javascript" src="node_modules/p5/lib/p5.js"></script>
<script language="javascript" type="text/javascript" src="node_modules/p5/lib/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="node_modules/p5/lib/addons/p5.sound.js"></script>
<script src="./classes.js"></script>;
<script src="./function-picture.js"></script>;
<script src="./ifs-within-ifs.js"></script>;
<script src="./while-and-for-loops.js"></script>;
<script src="./Boolean.js"></script>;
<script src="./object-var.js"></script>;
<script src="./move.js"></script>;
</body>
</html>
此代码只是在浏览器中显示./move.js。
如果要在一个窗口中支持多个草图，则需要使用实例模式。
默认情况下，P5.js将全局命名空间用于其变量和函数。因此，每次定义setup()或draw()函数时，都会覆盖以前的任何值。这就是为什么你只看到你加载的最后一个草图。
要解决此问题，您可以使用实例模式将每个草图封装在非全局范围中。您可以阅读有关实例模式here的更多信息，但这是一个示例：
var s = function( sketch ) {
var x = 100;
var y = 100;
sketch.setup = function() {
sketch.createCanvas(200, 200);
};
sketch.draw = function() {
sketch.background(0);
sketch.fill(255);
sketch.rect(x,y,50,50);
};
};
var myp5 = new p5(s);
您可能希望为每个草图创建一个新的p5实例。