將Threejs的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';

Answer 2

可以說我想將此updateCamera函數分解為自己的文件並導入。 由於它是自動執行的，因此我對如何使用感到困惑。 有人可以幫我嗎？

那么，在這種情況下，IIFE的唯一要點是使euler “私有”。 由於每個文件都在Node中為您提供了自己的上下文，因此無需IIFE即可輕松完成此操作

// Camera.js

import { Euler } from 'three'

const euler = new Euler( 0, 0, 0, 'YXZ' )

export const 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
}

像這樣使用

import { updateCamera } from './Camera'

// const camera = ..., motion = ...

updateCamera(camera, motion)