Question

我试图返回我班级的一系列实例。然而，回报只是从我认为的window.addEventListener('load', function(){} );函数返回。当我在控件中键入plugins时，它是未定义的。

;class Parallax {

    constructor(node) {

        // Settings and defaults
        // this.settings = {
        //     container: null,
        //     panels: [],
        //     defaultSpeed: 0.5
        // };

    }

    static initialize() {

        // Ensure DOM has loaded
        window.addEventListener('load', function() {
            // Does page contain any parallax panels?
            let panels = document.querySelectorAll('[data-parallax]');
            if (panels.length > 0) {

                let instances = [];

                // Parallax panels found, create instances of class and return them for reference
                for (const panel in panels) {
                    if (panels.hasOwnProperty(panel)) {
                        instances.push(new this(panels[panel]));
                    }
                }

                return instances;
            } else {
                // Page doesn't appear to have Parallax
                return false;
            }
        }.bind(this));
    }
}
window.plugins = { "parallax-instances": Parallax.initialize() };

不太确定如何执行此操作，我已尝试将window.addEventListener分配给变量，但不会返回该值。我通过将this绑定到事件监听器中的函数调用来保留类范围。

修改我确实想通过简单地使用下面的代码来启动插件，但是不太确定如何返回类的可能的多个实例，当然下面首先运行constructor方法。

window.plugins = { "parallax-instances": new Parallax };

编辑2 如果我在EventListener之外返回实例，我会得到我想要的结果。但是，在页面加载之前，这可能会返回instances吗？

static initialize() {

        this.instances = [];

        // Ensure DOM has loaded
        window.addEventListener('load', function() {
            // Does page contain any parallax panels?
            let panels = document.querySelectorAll('[data-parallax]');
            if (panels.length > 0) {

                // Parallax panels found, create instances of class and return them for reference
                for (const panel in panels) {
                    if (panels.hasOwnProperty(panel)) {
                        this.instances.push(new this(panels[panel]));
                    }
                }
            }
        }.bind(this));

        return this.instances;
    }

我在控制台中得到了什么：

{parallax-instances: Array(2)}
    parallax-instances:Array(2)
        0:Parallax {}
        1:Parallax {}
        length:2
    __proto__:Array(0)
    __proto__:Object

Answer 1

事件侦听器函数是一个回调函数，仅在事件发生时运行（在您的情况下，在加载时）。

回调无法返回值。您可以在外部范围内使用变量（例如，在您的类中），并在事件侦听器中重新分配它。

E.g。

constructor () {
  this.instances = []
}

然后（而不是从你的事件监听器返回）：

this.instances = instances

Answer 2

您的initialize没有返回任何内容。如果将instances提升到事件侦听器之外并返回该事件，则可以删除其他return语句。 请注意，在实际调用回调之前（load之后），返回的数组将为空。

static initialize() {

    const instances = [];

    window.addEventListener( "load", () => {

        const panels = document.querySelectorAll( "[data-parallax]" );
        for ( let i = 0; i < panels.length; i++ )
            instances.push( new this( panels[ i ] ) );

    });

    return instances;

}

由于您将立即返回一个数组，因此您的错误语法将消失，您将测试.length === 0。您可以使用getter来获取您指定的行为。

JS：从EventListener函数返回值

2 个答案: