前言
一些项目有时候，因为需求不同，比如需要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>
通过ES6的module模块以及JQuery的load方法就可以初步实现一个简单的原生HTML的组件化开发，也可以实现父子组件的传值，也可以通过Object.defineProperty实现简单的数据监听操作。
本文原创，原创不易，如需转载，请联系作者授权。
