调用其他对象功能的Eventmanager [英] Eventmanager that calls other objects' functions

问题描述

我正在使用javascript和jQuery.我有一个问题"，即我的Web应用程序具有不同的视图，并且一项操作(如单击鼠标)应在不同的视图中执行不同的操作.

I'm using javascript and jQuery. I have a "problem" that my web app has different views, and one action (like mouse click) should do different things in the different views.

我创建了一个ActionManager，该事件在触发click事件时会得到通知.该管理器对象知道当前视图.现在，我将不再需要动作管理器来触发不同对象中的功能.

I've created an ActionManager that get's notified when an click event is fired. This manager object knows about the current view. Now I wan't the actionmanager to be able to trigger a function in different objects.

我所做的是，管理器获取了不同对象的实例.这是通过在初始化时进行注册来完成的，在注册时，他们将注册不愿处理的事件类型以及所负责的视图类型.

What I've done is that the manager gets an instance of the different objects. This is done via a registration when they are initialized, where they register what kind of event they wan't to handle and what kind of view they are responsible for.

问题是我想让它尽可能通用，这样动作管理器就不必知道将要调用的函数的名称是什么.然后，不同的实例可以具有不同的函数名称，而无需让动作管理器知道它.通过发送对该函数的引用，我可以让注册部分在该实例中存储该事件的函数名称，但是我不能这样做:

the problem is that I want to make this as generic as possible, so that the actionmanager doesn't need to know about what the name of the function that is gonna be called is. Then the different instances can have different function names without letting the actionmanager to know about it. I could let the registration part store the function name for that event in that instance by sending a reference to the function, but then I can't do this:

myfunc : function (myinstance, myfunction)
{
    myinstance.myfunction();
}

假定myfunction()作为myinstance中的一个函数存在，而不使用实际的函数名称，该名称可能是"onMouseClick".

that will assume that myfunction() exists as a function in myinstance, and not use the real function name which could be "onMouseClick".

对其他人的解释说明了这一点，并想知道为什么:我的eventmanager的原因是我只想在需要它的元素上添加一个click事件，而不更改click事件代码.我也只想调用一个方法并在该方法中运行代码.我不想调用多个方法，而让这些方法根据视图决定是否应该运行.

Explanation for others seeing this tread and wondering why: The reason for my eventmanager is that I want to only add one click event on the elements that need it, and not changing the click event code. I also want to only call one method and run the code in that method. I don't want to call several methods and let the methods decide based on the view if they should run or not.

推荐答案

如果myfunction是字符串:

您可以执行以下操作:

If myfunction is a string:

You can do this:

myfunc : function (myinstance, myfunction)
{
    myinstance[myfunction]();
}

对象上的函数只是分配给该对象上的属性的函数对象.在JavaScript中，您可以通过以下两种方式之一访问属性:

A function on an object is simply a function object assigned to a property on that object. In JavaScript, you can access properties in one of two ways:

1. 使用点分符号和属性名称的文字，例如x = obj.foo;或
2. 使用方括号和属性名称的字符串，例如x = obj["foo"];

1. Using dotted notation and a literal for the property name, e.g. x = obj.foo;, or
2. Using bracketed notation and a string for the property name, e.g. x = obj["foo"];

它们的作用完全相同，但是第二种形式当然更加灵活.实际上，正是针对您所描述的情况而设计的.

They do exactly the same thing, but of course the second form is much more flexible — designed, in fact, for exactly the situation you're describing.

您可以执行以下操作:

myfunc : function (myinstance, myfunction)
{
    myfunction.call(myinstance);
}

该调用myfunction并确保在通话期间this = myinstance.所有JavaScript函数对象都具有call函数和apply函数.它们都执行相同的操作(使用特定的this值调用函数)，但是它们在将参数传递给函数的方式上有所不同:

That calls myfunction and ensures that this = myinstance during the call. All JavaScript function objects have a call function and an apply function. They both do the same thing (call the function with a specific this value), but they differ in how you pass arguments to the function:

使用call，您可以在call调用中将它们作为离散参数传递:

With call, you pass them as discrete arguments in the call call:

func.call(inst, arg1, arg2, arg3);

使用apply，您传入一个参数数组:

With apply, you pass in an array of arguments:

func.apply(inst, [arg1, arg2, arg3]);
//               ^----------------^---- note that this is an array

例如:

var a = [arg1, arg2, arg3];
func.apply(inst, a);

以上所有示例

实时复制-由于您说过您使用的是jQuery，因此我为了方便起见继续使用它，但没有上面的内容与jQuery有关，这就是原始JavaScript的工作方式.

Example of all of the above

Live copy - Since you said you were using jQuery, I went ahead and used it for convenience, but none of the above is related to jQuery, it's how vanilla JavaScript works.

var myinstance = {
  foo: "bar",
  myfunction: function(arg1, arg2) {
    display("<code>myfunction</code> called, <code>this.foo</code> is: " + this.foo);
    if (arg1) {
      display("<code>arg1</code> is: " + arg1);
    }
    if (arg2) {
      display("<code>arg1</code> is: " + arg2);
    }
  }
};

// Without arguments
callUsingString(myinstance, "myfunction");
sep();
callUsingFunction(myinstance, myinstance.myfunction);
sep();

// With arguments
callUsingStringWithArgs(myinstance, "myfunction", ["one", "two"]);
sep();
callUsingFunctionWithArgs(myinstance, myinstance.myfunction, ["one", "two"]);
sep();

function callUsingString(inst, func) {
  inst[func]();
}

function callUsingFunction(inst, func) {
  func.call(inst);
}

function callUsingStringWithArgs(inst, func, args) {
  // Easier using the function reference:
  callUsingFunctionWithArgs(inst, inst[func], args);
}

function callUsingFunctionWithArgs(inst, func, args) {
  func.apply(inst, args);
}

(display只是将带有给定文本的段落元素添加到页面上； sep只是将hr元素添加到页面上.)

(display just appends a paragraph element to the page with the given text; sep just appends an hr element.)

更多阅读内容:

• 神话般的方法
• 您必须记住this

• Mythical methods
• You must remember this

这篇关于调用其他对象功能的Eventmanager的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！