js简单实现通用组件_如何开发一个js通用组件-CSDN博客

本文链接：https://blog.csdn.net/qq_34908844/article/details/113919249

目录结构

在这里插入图片描述

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>

<!-- type=module则允许执行导入导出操作 -->

<script type="module">

    import {Component1} from "./Component1.js";
    import {Component2} from "./Component2.js";

    new Component1({
        elementId: 'component1',
    });

    new Component2({
        elementId: 'component2',
    });

</script>

效果

在这里插入图片描述