核心问题
在支持 EventDispatcher 的一个类上发出的事件不会被支持 EventDispatcher 的另一类拾取。
如何在应用程序范围内实现通信,以便我可以传递消息?
目前看来它只支持将消息传递给它自己的类。
背景
我正在使用这个样板,它给了我三个.js 和 es6:
https://github.com/paulmg/ThreeJS-Webpack-ES6-Boilerplate
我已手动更新软件包以使用 Three.js r97。
我正在查看 EventDispatcher 类,我认为这是一种在系统中传递消息同时保持系统解耦的干净方法。例如,我有一些监视复选框的 HTML UI。
精简到核心示例,我有interaction.js:
import {EventDispatcher} from 'three';
// Manages all input interactions
export default class Interaction {
constructor() {
// Add event dispatcher support
Object.assign( this, EventDispatcher.prototype );
// setup the trigger for the event
let outer = this;
$("#" + Config.uiElements.boxOpenStateId).change(function() {
console.log("event emitting");
outer.dispatchEvent( { type: 'boxOpenStateToggled', message: { isChecked: "example" } } );
console.log("event emitted");
});
// setup a event listener
this.addEventListener( 'boxOpenStateToggled', function ( event ) {
console.log("event caught in Interaction.js", event);
});
}
}
我有 boxmanager.js (精简到核心部分):
import {EventDispatcher} from 'three';
export default class BoxManager {
constructor() {
// Add event dispatcher support
Object.assign( this, EventDispatcher.prototype );
}
setupBoxes(manager) {
console.log("adding event listener on BoxManager.js");
this.addEventListener( 'boxOpenStateToggled', function ( event ) {
console.log("event caught by BoxManager.js", event);
} );
}
}
当我在 Interaction
上触发 boxOpenStateToggled
事件时,BoxManager
事件监听器不会捕获它。
我得到这样的控制台日志:
adding event listener on BoxManager.js
adding event listener on Interaction.js
(I trigger the event)
event emitting
event caught in Interaction.js {type: "boxOpenStateToggled", message: {…}, target: Interaction}
event emitted
我在这里期待的是看到“BoxManager 中捕获的事件”——它是系统范围的事件调度程序吗?或者它只能在每个类的基础上在内部调度事件吗?
展示我的工作
我不确定这是否是我使用它的方式,所以我尝试过:
在类上使用
extends
关键字来提供EventDispatcher
功能,并且它只能在类内工作。最初使用的是
.call
版本,该版本位于 Three.js 的早期版本中。
我找不到任何使用 EventDispatcher 的真正讨论或示例,也找不到它在库中的使用位置。
我是否误解了它的目的?难道是我用错了?
最佳答案
你可以考虑做这样的事情:
const myEventBus = new THREE.EventDispatcher()
const foo = new Foo(myEventBus)
const bar = new Bar(myEventBus)
如果你想避免将实例传递给这样的对象,或者创建工厂,你可以这样做:
//Events.js
const Events = new THREE.EventDispatcher()
export default Events
然后:
//Foo.js
import Events from 'common/Events'
import {BOX_OPEN} from 'Bar'
export default class Foo {
constructor(){
Events.addEventListener( BOX_OPEN, this.onBoxOpen);
}
}
dispatch
//Bar.js
export const BOX_OPEN = 'box_open'
export default class Bar {
constructor(){
$("#" + Config.uiElements.boxOpenStateId).change(this.onChange);
}
onChange = () => {
console.log("event emitting");
Events.dispatchEvent({ type: BOX_OPEN, message: { isChecked: "example" } });
console.log("event emitted");
}
}
关于javascript - Three.js EventDispatcher可以用来在类之间进行通信吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52689932/