JS中Class能否导入外部文件函数？贪吃蛇类拆分遇require报错

我正在开发一款贪吃蛇（GreedySnake）游戏，发现GreedySnake类中包含过多大型函数，希望将这些函数拆分到其他文件并导入到类文件中，但不清楚具体实现方法。尝试使用require导入相关函数时，出现报错：snackClass.js:29 Uncaught ReferenceError: require is not defined。

现有代码片段 #

GreedySnake类代码：

class GreedySnake {
  constructor() {
    this.canvas = document.querySelector("#snake");
    this.ctx = this.canvas.getContext("2d");
    this.maxX = 64; // 最大行数
    this.maxY = 40; // 最大列数
    this.itemWidth = 10; // 点位尺寸
    this.direction = "right"; // 移动方向：上、下、左、右
    this.speed = 150; // 移动速度（毫秒）
    this.isStop = false; // 是否暂停
    this.isOver = false; // 是否游戏结束
    this.isStart = false; // 是否开始游戏
    this.score = 0; // 得分
    this.timer = null; // 移动定时器
    this.j = 1;
    this.canChange = true;
    this.grid = new Array();

    for (let i = 0; i < this.maxX; i++) {
      for (let j = 0; j < this.maxY; j++) {
        this.grid.push([i, j]);
      }
    }

    // this.drawGridLine();
    this.getDirection();
  }
  // 创建蛇身
  createSnake() {
    this.snake = [
      [4, 25],
      [3, 25],
      [2, 25],
      [1, 25],
      [0, 25],
    ];
  }

  // 移动逻辑
  move() {
    ...

    // 如果下一步不是食物
    ...
  }

  // 开始游戏
  start() {
    ...
  }
  // 暂停游戏
  stop() {
    ...
  }
}

尝试的导入代码：

createPos = require("./food");
createFood = require("./food");

报错信息：

snackClass.js:29 Uncaught ReferenceError: require is not defined

解决方法 #

浏览器原生不支持Node.js的require（CommonJS模块规范），要改用浏览器支持的ES模块（ESM）来实现文件拆分与导入：

1. 修改拆分函数的导出方式
   在food.js中用export导出需要的函数：

   // food.js
   export function createPos(grid) {
     // 你的食物位置生成逻辑
   }
   
   export function createFood(ctx, itemWidth, foodPos) {
     // 你的食物绘制逻辑
   }
   

2. 改用ES模块的import语法
   在snackClass.js顶部导入函数：

   import { createPos, createFood } from './food.js';
   

3. HTML中声明脚本为模块
   引入snackClass.js时，必须添加type="module"属性，浏览器才会按ES模块解析：

   <script type="module" src="snackClass.js"></script>
   

4. 适配类实例的属性访问
   如果拆分的函数需要使用GreedySnake类的实例属性（比如this.grid、this.ctx），可以在调用时传入实例相关参数：

   class GreedySnake {
     // ... 原有代码
   
     generateFood() {
       // 传入当前实例的grid生成食物位置
       this.foodPos = createPos(this.grid);
       // 传入ctx、itemWidth等属性绘制食物
       createFood(this.ctx, this.itemWidth, this.foodPos);
     }
   }
   

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