I am experimenting with JavaScript 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
Is this the correct, or recommended way of doing this, or is there a better way?
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 };
