如何在IIFE中使用p5.js且不启用实例模式（免API前缀）

先解决重复导入警告 #

检查你的HTML文件，确保只引入了一次p5.js脚本（不要同时引入p5.js和p5.min.js，也不要重复添加同一个p5脚本标签），移除重复的引入即可消除该警告。

实现命名空间下直接使用p5 API（无需实例模式） #

方法一：借助p5全局模式的生命周期函数 #

p5全局模式会自动执行setup()函数，此时所有p5 API已经挂载到全局作用域。你可以在命名空间外定义setup()，调用命名空间内的初始化方法：

var game = game || {};

(function(ns) {
    var canvasWidth = 480;
    var canvasHeight = 480;

    ns.initGame = function() {
        createCanvas(canvasWidth, canvasHeight);
        background(153);
        // 这里可以直接使用所有p5全局API，无需前缀
    }
})(game);

// p5全局模式自动执行setup，触发游戏初始化
function setup() {
    game.initGame();
}

方法二：等待资源完全加载后调用初始化 #

如果一定要用jQuery的时机触发，不要用$(document).ready（它仅等待DOM加载，不等待脚本资源），改用$(window).load，确保p5.js完全加载并初始化后再调用方法：

var game = game || {};

(function(ns) {
    var canvasWidth = 480;
    var canvasHeight = 480;

    ns.initGame = function() {
        createCanvas(canvasWidth, canvasHeight);
        background(153);
    }

    $(window).load(function() {
        ns.initGame();
    });
})(game);

为什么之前的代码报错？ #

你之前用$(document).ready调用initGame时，DOM虽然加载完成，但p5.js可能还没完成初始化，createCanvas等API还未挂载到全局作用域，所以会提示“未定义”。而print()和select()能生效，是因为这两个函数在p5脚本加载过程中较早被挂载到全局，属于特殊情况。

内容的提问来源于stack exchange，提问作者Stephen