Question

我正在研究其他人的代码并遇到令人费解的事情。

代替调用函数，代码调用绑定函数，然后通过字符串触发它。

示例1：

bind("hello.world", function(){
     console.log("hello world");
});

trigger("hello.world");

而不是---

示例2：

helloWorld = function(){
    console.log("hello world");
}

helloWorld();

示例1和示例2之间的优缺点是什么。谢谢。

Answer 1

好吧，既然javascript是一种事件驱动的编程语言，我会推荐第一种。
这是一个案例，说明了使用事件处理程序而不是简单函数调用的优点：

function someEventHandler(){
    if($(this).hasClass('some-class'))
        // do something
}
$('element').bind('eventName.eventNamespace',someEventHandler);

现在，如果您只是调用此函数，例如：

someEventHandler();

你可以看到它没有任何效果，因为它被设计为在 dom元素上下文中执行。
如果您触发具有someEventHandler函数的事件，因为它的事件处理程序：

$('element').trigger('eventName.eventNamespace');

在元素上下文中调用该函数，如：

someEventHandler.call($('element').get(0));

会产生预期的效果此外，您可以将多个事件处理程序绑定到同一事件并将其绑定到多个元素如果你想为每个dom元素列表调用一个函数，你必须做这样的事情：

someEventHandler.call($('element1').get(0));
someEventHandler.call($('element2').get(0));
someEventHandler.call($('element3').get(0));
// ... and so on

虽然，第一种方法会更容易：

$('element1,element2,element3').bind('eventName.eventNamespace',someEventHandler);
$('element1,element2,element3').trigger('eventName.eventNamespace');

请注意，您采用的方法取决于您使用这些函数的上下文。如果您的函数与dom元素无关，或者您不希望更多对象订阅到您的事件，您可能应该保持简单并使用经典函数声明和调用。

通过字符串触发绑定“函数”而不是调用函数

1 个答案: