ES6模塊出口 - DOM元素擴展方法

當涉及到自定義擴展元素的方法，如PlainJS closest() DOM元素的方法：ES6模塊出口 - 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模塊導入/導出？將導出放在方法定義之前會導致「意外標記這個」錯誤。將ES6模塊系統導出爲包括IIFE的最佳方法是什麼？

如果目標是使用諸如.closest()這樣的方法作爲Element類方法，則在另一個可導出函數中進行包裝看起來不正確。

謝謝你的時間。

來源

2015-11-09 Alexander Staroselsky

您不需要導出，你只是運行它。 'import'path/to/your/lib.js';' – zerkms

使用該語法執行導入會導致假設的'lib.js'文件中的每個導出的函數被導入或者只是擴展的類方法？ [MDN]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import）指出「僅用於副作用，無需導入任何綁定」，但這並未真正指定。 –

不，如果您不指定要導入的位置 - 則不會將任何內容導入當前作用域。 – zerkms

您的代碼將不會與模塊系統一起工作 - 所有模塊都以嚴格模式運行，因此全局這是未定義的。

你有兩個選擇：

導出功能以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

來源

2016-08-30 12:46:01 Ginden

ES6模塊出口 - DOM元素擴展方法

回答

相關問題