javascript - ES6 通过字符串值调用类方法

Question

我(我正在尝试使用通用方法来解析 dom 元素并将事件监听器附加到它们。

所以我添加了一个 html5 数据属性来指定触发事件时应该调用的方法。

我正在寻找的是一种通过字符串值调用类内部方法的方法:

static addEvent(element, trigger, action)
{
    element.on(trigger, action);
}

其中 element 是要附加 eventListener 的 dom 元素，trigger 是监听器的类型，action 是我们应该在此类中调用的方法(这里我想调用 toggleFullscreen)。

有办法吗？

编辑:需要避免 eval 解决方案，我用这个 [action] 进行了测试，但这不是异常(exception)结果。

这是我的代码

dom 元素:

<div class="interface">
    <span class="home_common-fullscreen action fa fa-desktop" data-action="toggleFullscreen" aria-hidden="true"></span>
</div>

javascript 函数:

class Interface {
    constructor() {
        this.domElements = jQuery(".interface");

        this.attachAction();
    }

    attachAction()
    {
        let fullScreenButtonElement = this.domElements.find(".action");
        if(fullScreenButtonElement !== undefined)
        {
            if(Array.isArray(fullScreenButtonElement))
            {
                jQuery(fullScreenButtonElement).each(function()
                {
                    Interface.parseAction(this);
                });
            }
            else
            {
                Interface.parseAction(fullScreenButtonElement);
            }
        }
    }

    static parseAction(element)
    {
        let action = element.attr("data-action");
        if(action === undefined)
        {
            throw new InterfaceError("Trying to parse action element without defined data-action attribut");
        }

        let trigger = typeof element.attr("data-trigger") !== 'undefined' ? element.attr("data-trigger") : "click";

        try
        {
            Interface.addEvent(element, trigger, action);
        }
        catch(err)
        {
            console.log(action + "not found in Interface")
        }
    }

    static addEvent(element, trigger, action)
    {
        element.on(trigger, action);
    }

    toggleFullscreen()
    {
        alert("foo");
    }
}

JSFiddle

Answer 1

class Interface {
    // This method is a property of the class itself
    static addEvent(element,trigger,action) {
        element.on(trigger,Interface[action]);
    }

    // May need to be static if you don't plan on creating objects
    static toggleFullscreen() {
        console.log("It Works");
    }
}

// Or the Event Handler could be in another object
class EventHandlers {

    // It'd be accessed with EventHandlers["toggleFullscreen"];
    static toggleFullscreen() {

    }
}

// Or make it a global function
// Which would be accessed with window["toggleFullscreen"];
function toggleFullscreen() {

}