Is this a good use of Javascript ES6 import / export?


first question here, hope it fits the requirements.

I am experimenting with Javascrip ES6 import and export and wanted to achieve the following :

  • Use the import / export style of including Javascript files.
  • Import a class file and create an instance
  • Import a class file that extends another class
  • Expose functions to the index.html scope – call from an inline onclick event
  • Is document. available within the module scope

Well, it’s appeared I did that. Question = is this the correct, or recommended way of doing this, is there a better way?

Thanks for your input.

index.html

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title>Javascript - Import and Export class examples</title>     </head>     <body>           <h1>Javascript Import and Export class examples</h1>         <div id="myDiv"></div>         <button onclick="window.updateScreen()">Do it</button>         <script type="module">                       import('./main.js').then(module => {                 /* This function is now available on the button onclick */                 window.updateScreen = module.updateScreen;                           });         </script>     </body> </html> 

main.js

import { Animal } from './animal.js'; import { Human } from './human.js'; import { Dog, Cat } from './pets.js';  const petOwner = new Human('Bob', 'Male', '21/03/19'); const pets = [ new Dog('Riley', petOwner), new Cat('Sherry', petOwner) ];  petOwner.speak(); pets[1].speak(); pets[0].speak();  function updateScreen() {     let elem = document.getElementById('myDiv');     elem.textContent = 'HELLO'; }  export { updateScreen }; 

animal.js

class Animal {     constructor(alive, hr) {         this.isAlive = alive;         this.heartRate = hr;     } } export { Animal }; 

human.js

import {Animal} from './animal.js'; class Human extends Animal {     constructor(name, sex, dob) {         super(true, 60);         this.name = name;         this.dob = dob;         this.sex = sex;     }        speak() {         console.log('Hello');        }     get age() {         return now-dob;     } } export { Human }; 

pets.js

import {Animal} from './animal.js';  class Cat extends Animal {     constructor(name, owner) {         super(true, 200);         this.name = name;         this.owner = owner;     }     speak() {         console.log('Meow');         } }  class Dog extends Animal {     constructor(name, owner) {         super(true, 120);         this.name = name;         this.owner = owner;     }     speak() {         document.getElementById('myDiv').textContent = 'Woof';       } }  export { Cat, Dog };