Question

说到自定义扩展元素方法，例如PlainJS closest() DOM元素方法：

// closest polyfill
this.Element && function(ElementPrototype) {
    ElementPrototype.closest = ElementPrototype.closest ||
    function(selector) {
        var el = this;
        while (el.matches && !el.matches(selector)) el = el.parentNode;
        return el.matches ? el : null;
    }
}(Element.prototype);

使用ES6 Module Imports / Exports导出和导入此类扩展方法最安全的方法是什么？将导出放在方法定义的前面会导致“意外令牌此错误”。使用ES6模块系统导出包括IIFE的最佳方法是什么。

如果目标是使用诸如.closest()之类的方法作为Element类方法，则包装在另一个可导出函数中似乎不正确。

感谢您的时间。

Answer 1

您的代码无法使用模块系统 - 所有模块都以严格模式运行，因此全局未定义。

您有两种选择：

导出函数以Element为参数并扩展该对象。这可能是最好的选择 - 你的模块有单一的责任 - 扩展它的论点。它没有找到对全局对象的引用，它无处不在。
使用空导出，空导入并扩展全局Element

在polyfill.js：

if (typeof Element === 'function') {
    Element.prototype.closest = ...
}
export {}; // empty export to signal to your module loader that's ES6 module

在main.js中：

import 'polyfill.js'; // import for side-effects only

ES6模块导出 - DOM元素扩展方法

1 个答案: