了解 Javascript 在事件上的窗口调度程序

Question

我有一个下面的代码:

var EventOne = "Event_Created"; 
var myFunction = function(){//codes};
var dispatcher = window.dispatcher;
dispatcher.on( EventOne, myFunction() );

因此该事件是string而不是正常事件。我不明白调度员的概念。事件监听器如何监听字符串并执行函数?

Answer 1

我来解释一下。我希望它足够简洁，并且是你所需要的。我最初打算解释原生功能"CustomEvent"但那不是你最终想要理解的。请记住，下面您可以创建一个新的类或函数(相同)，但为了解释目的，我只使用一个简单的对象。

var EventOne = "Event_Created";var myFunction = function(){//代码};Var dispatcher = window.dispatcher;调度员。on(EventOne, myFunction());

让我给你一个非常有限/缩小的版本。这绝不是生产准备，但我将使用它来解释的目的。

->让我们创建一个全局对象来包含我们的行为。

var dispatcher = {} || window.dispatcher 

->让我们创建我们的"。"的方法。这将创建我们的"关联"或"密钥:操作"对。在你的例子中，你有"EventOne, myFunction()"

var dispatcher = {
      actions: {},
      on: function(key, action) {
        // you could add your new actions to an array,
        // lets just overwrite for simplicity sake
        this.actions[key] = action
      }
}

->目前为止非常简单。我们有一个"dispatcher"对象，它有一个。

->让我们添加一个"。方法，以便能够随意调用我们的"事件"。你会看到，当这个方法被调用时，它只是请求我们传入的键的值/动作。既然它们是函数，我们就直接解雇它们……阿拉巴马州this.actionskey

var dispatcher = {
      actions: {},
      on: function(key, action) {
        // you could add your new actions to an array,
        // lets just overwrite for simplicity sake
        this.actions[key] = action
      },
     trigger: function(key) {
       if(this.actions[key]) {
          this.actions[key]()
       }
     }
}

->让我们测试一下

function testit() {
   console.log("TEST IT FUNCTION CALLED")
}
function testit2() {
   console.log("CALLING TESTIT2 FUNCTION NOW")
}
dispatcher.on('test1', function() {
    setTimeout( function() {
      testit()
    }, 2000)
})
dispatcher.on('test2', testit2)

所以，你在OP中显示的可能是模仿我上面所做的模式，或者让我们说-我的代码模仿了其他一些更健壮的解决方案。基本上分配一个键，动作/事件，在我的情况下是功能通过"。"的方法。然后在稍后的时间，用"。"触发器"通过传递一个字符串，然后引用对象，我设置"动作"与该"字符串"…这是关键。

那么，如果我们按字面意思使用上面的代码，它看起来会是这样的:

var EventOne = "Event_Created"; 
var myFunction = function(){ console.log("MyFunction Called")};
var dispatcher = window.dispatcher;
dispatcher.on( EventOne, myFunction() );