[英]Converting threejs' IIFE functions to es6?
我正试图将我的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函数分解为自己的文件并导入。 由于它是自动执行的,因此我对如何使用感到困惑。 有人可以帮我吗?
而不是分配给(全局?) 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';
可以说我想将此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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.