javascript - 将三个js的IIFE函数转换为es6？

Question

我正在尝试将我的 Threejs 项目分解为更小的模块，但我遇到了困难。以这个函数为例:

var updateCamera = (function() {
    var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );

    return function() {
        euler.x = motion.rotation.x;
        euler.y = motion.rotation.y;
        camera.quaternion.setFromEuler( euler );

        camera.position.copy( motion.position );
        camera.position.y += 10.0;
    };
})();

假设我想将这个 updateCamera 函数分解到它自己的文件中并导入它。我对如何做有点困惑，因为它是自动执行的。有人可以帮我吗？

Answer 1

不要分配给(全局？)updateCamera 变量，而是使用(默认)导出。您可以删除整个 IIFE，因为每个模块都有自己的作用域；因此，即使在模块顶层，euler 也将不可访问且是静态的。

您可能还想显式声明对 Three.js 的依赖，而不是依赖全局变量。

// updateCamera.js
import { Euler } from 'three';

var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );

export default function updateCamera(camera, motion) {
    euler.x = motion.rotation.x;
    euler.y = motion.rotation.y;
    camera.quaternion.setFromEuler( euler );

    camera.position.copy( motion.position );
    camera.position.y += 10.0;
}

然后您可以通过执行以下操作在其他模块中使用它

// main.js
import updateCamera from './updateCamera';

…
updateCamer(camera, motion);

请注意，camera 和 motion 应在此处作为参数传递。再次强调，不要依赖全局变量；如果您不想将它们传递到任何地方，您也可以创建一个导出它们的模块，您可以从中执行以下操作

import {camera, motion} from './globals';