如何将代码分成单独的文件？

Question

我正在建立Three.js项目，并且在如何将两个函数划分为单独文件的过程中苦苦挣扎了一段时间

我有Main.js（反应性类组件）文件，其中包含200>行代码，而我想分开的其中两个函数是：

startAnimationLoop（）

  startAnimationLoop = () => {
    const tableBoard = this.scene.getObjectByName('tableSurface');
    tableBoard.rotation.y += this.title.RotationSpeed;

    this.renderer.render(this.scene, this.camera);
    this.requestID = window.requestAnimationFrame(this.startAnimationLoop);
  };

userGUI（）（'dat.gui'控制器）

  userGUI = () => {
    const getTableSurface = this.scene.getObjectByName('tableSurface');

    this.gui = new dat.GUI();
    const controls = function() {
    this.RotationSpeed = 0.00;
  }
    this.title = new controls();
    this.gui.add(this.title, 'RotationSpeed', 0.0, 0.025);
  }

我在componentDidMount（）内部调用这些函数

componentDidMount() {
    this.sceneSetup();
    addLights({ scene: this.scene });
    addFloor({ scene: this.scene })
    this.userGUI();
    this.startAnimationLoop();
    window.addEventListener("resize", this.handleWindowResize);
  }

我已经为此苦苦挣扎了很长时间，对我如何进行此过程的任何建议将不胜感激。

Answer 1

就我个人而言，我不会对其进行介绍，但是如果您也愿意，则需要导出和导入方法。您还需要确保在的适当范围内调用它this。

因此使文件导出功能

export const startAnimationLoop = () => {
  /* The Code
}

和你的反应成分

import { startAnimationLoop } from './path/startAnimationLoop'

当你叫它

startAnimationLoop.call(this)

或者，您可以使用bind在构造函数中进行设置，并在componentDidMount中使用 this.startAnimationLoop()

constructor(props) {
  super(props);
  this.startAnimationLoop = startAnimationLoop.bind(this);
}