前言
一些项目有时候，因为需求不同，比如需要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实现简单的数据监听操作。
本文原创，原创不易，如需转载，请联系作者授权。
