js: can class import function from other files?

Question

i was writting a greedy snack game ,but i found that the class GreedySnack has too many big functions.so i want put the functions in other files and import them into the class file. but i jst dont know how to do. part of the codes:

class GreedySnake {
  constructor() {
    this.canvas = document.querySelector("#snake");
    this.ctx = this.canvas.getContext("2d");
    this.maxX = 64; // max row
    this.maxY = 40; // max col
    this.itemWidth = 10; // size of the point
    this.direction = "right"; // up down right left direction
    this.speed = 150; // ms speed
    this.isStop = false; //
    this.isOver = false; //
    this.isStart = false; //
    this.score = 0; //
    this.timer = null; // movement timer
    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();
  }
  // create the body
  createSnake() {
    this.snake = [
      [4, 25],
      [3, 25],
      [2, 25],
      [1, 25],
      [0, 25],
    ];
  }

  // movement
  move() {
    ...

    // if the next-step is not food
    ...
  }

  // start
  start() {
    ...
  }
  // pause
  stop() {
    ...
  }
}

i've tired the require

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

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

Could this help you? https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file — , Nov 04 '22 at 09:59
One of the most important things in modern JS world is to reuse code and imports one file content to another but it;s really well documented in man y places, hope you've tried to search a bit, but here you go an example https://blog.bitsrc.io/javascript-require-vs-import-47827a361b77 https://bobbyhadz.com/blog/javascript-import-function-from-another-file — devzom, Nov 04 '22 at 18:29

T.J. Crowder · Answer 1 · 2022-11-04T10:57:33.170

You can use functions defined elsewhere as functions in your class, although they won't be methods in the ES2015+ sense (specifically: they can't use super). They'll still be "methods" in the general sense that you call them on the instance and they work just like real methods. (They'll be like the methods we used to have before ES2015's class syntax.) You can even set them up using modern property syntax.

Here's a simple example:

// The functions declared elsewhere
function start() {
    console.log(`Doing a start operation for ${this.name}`);
}
function stop() {
    console.log(`Doing a stop operation for ${this.name}`);
}

// The class
class Example {
    constructor(name) {
        this.name = name;
    }

    // Using property syntax to set up the `start` and `stop` "methods"
    start = start;
    stop = stop;
}

// Using it
const e = new Example("test");
e.start();
e.stop();

Unlike true methods, those:

Will be "own" properties of each instance, not prototype properies
Will be enumerable

You could fix #1 by assigning them to your constructor functions' prototype object instead:

// The functions declared elsewhere
function start() {
    console.log(`Doing a start operation for ${this.name}`);
}
function stop() {
    console.log(`Doing a stop operation for ${this.name}`);
}

// The class
class Example {
    constructor(name) {
        this.name = name;
    }
}
Object.assign(Example.prototype, { start, stop });

// Using it
const e = new Example("test");
e.start();
e.stop();

You can fix #2 by using Object.defineProperty (or Object.defineProperties):

// The functions declared elsewhere
function start() {
    console.log(`Doing a start operation for ${this.name}`);
}
function stop() {
    console.log(`Doing a stop operation for ${this.name}`);
}

// The class
class Example {
    constructor(name) {
        this.name = name;
    }
}
for (const [name, method] of Object.entries({start, stop})) {
    Object.defineProperty(Example.prototype, name, {
        value: method,
        writable: true,
        configurable: true,
    })
}

// Using it
const e = new Example("test");
e.start();
e.stop();

js: can class import function from other files?

1 Answers1