原生HTML通过JS（ES6、JQuery）引入公共模块(header,footer,menu等)实现模块化以及组件化，实现父子组件传值以及数据监听（基于Object.defineProperty）

本文链接：https://blog.csdn.net/qq_36034945/article/details/131052853

文章介绍了如何在不使用Vue或React等框架的情况下，利用原生的JS（ES6）模块和HTML实现组件化开发。通过JS模块导出和导入功能创建子组件，然后在父组件中调用并传递值。同时，文章提到了使用`Object.defineProperty`进行简单的数据监听，以及利用JQuery的`load`方法加载外部HTML作为组件，实现页面内容的动态插入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

一些项目有时候，因为需求不同，比如需要SEO或者项目很小，亦或者只需要做一个简单好管理的官网或者网站等等，在这种情况下，我们再去使用类似于vue和react等等这类型框架，就有一点大材小用，也有点费时间。
但是，vue这类框架的组件化开发在体验上对开发者非常友好，那么我们如何通过使用原生的前端技术去实现组件化开发？
在这里插入图片描述

通过JS（ES6）module实现组件化，以及父子组件传值

子组件（原生JS（ES6）组件）

export function Mhtml(Mh) {
    return `<div class="module_html">${Mh}</div>`
}

父组件（原生HTML组件）或者（原生JS（ES6）组件）

原生HTML组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父组件</title>
    <style>
        .module_box{
            width: 100%;
            height: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .module_one{
            width: 40%;
            height: 200px;
            background: aqua;
            color: black;
            text-align: center;
            font-size: 40px;
            font-weight: 700;
        }
        .module_two{
            width:55%;
            height:200px;
        }
        .module_html{
            width:100%;
            height:200px;
            background:#10d1f3;
            color:white;
            text-align: center;
            font-size:35px;
        }
    </style>
</head>
<body>
    <div class="module_box">
        <div class="module_one">父组件展示</div>
        <div class="module_two"></div>
        <script type="module">
            import { Mhtml } from "./module.js";
            let anb=document.querySelector('.module_two');
            //向子组件传值：字符串、数组、布尔值等等
            anb.innerHTML=`${Mhtml('子组件：这是一段通过js的module模块插入的模板内容')}`
        </script>
    </div>
</body>
</html>

原生JS（ES6）组件

import {Mhtml} from './subassembly.js';
Mhtml('子组件：这是一段通过js的module模块插入的模板内容')

通过Object.defineProperty方法实现简单的父子组件传值数据监听方法封装

//原始数据
const data = {
    value: {},
};
let zlag=false;//数据发生变化，该布尔值为true，无变化则为false
//数据监听函数
function Watch(Wdata) {
	//Wdata新数据
    console.log(data.value,Wdata)
    let _value=data.value
    Object.defineProperty(data, 'value', {
        get() {
            return _value;
        },
        set(val) {
            if (val !== _value) {
                _value = val;
                zlag=true
                console.log('新数据监听',_value)
            }
        }
    });
    //新数据赋值判断
    data.value=Wdata;
}
//数据监听方法及判断新旧数据布尔值抛出
export {
    Watch,
    zlag
}

通过JQuery实现一个HTML文件插入另一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <style>
        .hu_box{
            width: 1120px;
            height: auto;
            margin: 0 auto;
        }
        .hu_ys_class{
            width: 100%;
            height: 100px;
            background: rgb(127, 255, 8);
            color: rgb(25, 26, 26);
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            font-weight: 700;
        }
        .hu_iframe{
            width: 100%;
            height: auto !important;
        }
    </style>
</head>
<body>
    <div class="hu_box">
        <div class="hu_ys_class">父组件：当前为父组件</div>
        <div class="hu_iframe"></div>
        <script>
        	//通过JQuery的load方法载入远程 HTML 文件代码并插入至 DOM 中。
            $('.hu_iframe').load('./module.html');
        </script>
    </div>
</body>
</html>