我正在尝试使用自定义元素。我想使用 JS 创建元素并将它们添加到 DOM 中。 如果我在一个带有基本 html 页面的文件中使用所有这些,一切都可以正常工作。
'use strict';
class FlashCard extends HTMLElement {
constructor(cardSet) {
super();
this.cardSet = cardSet;
this.cardNumber = 0;
}
connectedCallback() {
this.id = 'flashcard';
this.style.cursor = 'pointer';
this.render(this.cardSet);
this.addEventListener('click', this.onClick);
}
render() {
this.innerHTML = this.cardSet[this.cardNumber];
}
onClick() {
let deckSize = this.cardSet.length;
if (this.cardNumber === deckSize-1) {
this.cardNumber = 0;
} else {
this.cardNumber++;
};
this.render();
}
}
customElements.define('flash-card', FlashCard);
document.addEventListener('DOMContentLoaded', function() {
let card = new FlashCard(['a', 'b', 'c', 'd']);
document.getElementsByTagName('body')[0].appendChild(card);
});
当我尝试将代码拆分为单独的文件时,我的问题就开始了。
'use strict';
export default class FlashCard extends HTMLElement {
constructor(cardSet) {
super();
this.cardSet = cardSet;
this.cardNumber = 0;
}
connectedCallback() {
this.id = 'flashcard';
this.style.cursor = 'pointer';
this.render(this.cardSet);
this.addEventListener('click', this.onClick);
}
render() {
this.innerHTML = this.cardSet[this.cardNumber];
}
onClick() {
let deckSize = this.cardSet.length;
if (this.cardNumber === deckSize-1) {
this.cardNumber = 0;
} else {
this.cardNumber++;
};
this.render();
}
}
customElements.define('flash-card', FlashCard);
并在一个单独的文件中
import FlashCard from './flashcard';
document.addEventListener('DOMContentLoaded', function() {
let card = new FlashCard(['a', 'b', 'c', 'd']);
document.getElementsByTagName('body')[0].appendChild(card);
});
然后,由于使用 package.json 文件中的 npm 脚本进行导出/导入,我转译了 javascript
"watch": "watchify elements/*.js -t babelify --plugins transform-es2015-classes
-o js/bundle.js --debug --verbose",
我在 Chrome 55 中遇到的错误是
Failed to construct 'HTMLElement': Please use the 'new'
operator, this DOM object constructor cannot be called as a function.
因此,转译代码尝试调用 HTMLElement 对象的构造函数方法,但在这种情况下该方法不是函数。
我的问题是如何将我的代码分割成单独的文件,就像我在上面尝试的那样,但转译器可以正确解释?
最佳答案
您应该尝试在 constructor() 方法中使用 Reflect.construct() 而不是 super()。
var self = Reflect.construct( HTMLElement, [], Flashcard )
self.cardSet = cardSet
...
return self
另外,你可以试试这个plugin这应该可以解决问题(我没有测试它)。
关于javascript - 在 JavaScript 中导入自定义元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41394754/