目录结构
BaseComponent.js
class BaseComponent {
props = {
elementId: ''
};
constructor(props) {
this.props = props;
document.getElementById(this.props.elementId).innerHTML = this.render();
this.events();
}
events() {
}
render() {
}
}
export {BaseComponent};
Component1.js
import {BaseComponent} from './BaseComponent.js';
class Component1 extends BaseComponent{
events() {
document.getElementById(this.props.elementId).onclick = function () {
alert('组件1被点击')
};
}
render() {
return `<div style="height: 100px; border: 1px solid red;">
我是组件1
</div>`;
}
}
export {Component1};
Component2.js
import {BaseComponent} from './BaseComponent.js';
class Component2 extends BaseComponent{
events() {
document.getElementById(this.props.elementId).onclick = function () {
alert('组件2被点击')
};
}
render() {
return `<div style="height: 100px; border: 1px solid blue;">
我是组件2
</div>`;
}
}
export {Component2};
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="component1"></div>
<div id="component2"></div>
</body>
</html>
<script type="module">
import {Component1} from "./Component1.js";
import {Component2} from "./Component2.js";
new Component1({
elementId: 'component1',
});
new Component2({
elementId: 'component2',
});
</script>
效果