導入自定義元素在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

回答

相關問題