导入自定义元素在javascript

我尝试使用自定义元素。我想用JS来创建元素并将它们添加到DOM。如果我在一个基本的HTML页面中使用这一切都工作正常。当我尝试代码分割成单独的文件导入自定义元素在javascript

'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); 
});

然后我transpile中的package.json文件

"watch": "watchify elements/*.js -t babelify --plugins transform-es2015-classes 
-o js/bundle.js --debug --verbose",

的错误我使用NPM脚本因为出口/进口的javascript get in Chrome 55 is

Failed to construct 'HTMLElement': Please use the 'new' 
operator, this DOM object constructor cannot be called as a function.

所以传输的代码试图调用HTMLElement对象上的构造函数方法，但该方法在这种情况下不是函数。

我的问题是我怎么分割我的代码到单独的文件，因为我试图以上，但在某种程度上transpiler可以正确地解释？

来源

2016-12-30 leonormes

你应该尝试在构造函数（）方法来使用Reflect.construct（），而不是超（）。

var self = Reflect.construct(HTMLElement, [], Flashcard) 
self.cardSet = cardSet 
... 
return self

此外，你可以试试这个plugin是应该解决这个问题（我没有测试）。

来源

2016-12-30 12:24:25 Supersharp

谢谢@Supersharp。 Reflect.construct代替super（）;没有为我工作。我得到一个错误，说我需要一个超级（）;.但插件工作出色。我非常感激，因为我一直盯着它好几个小时。 – leonormes

导入自定义元素在javascript

回答

相关问题