HTML实现包含公共部分:通过ECMA6的模块化,纯前端实现类似jsp:include的功能

本文介绍了一种使用ECMA6模块化方式在纯前端实现引用公共部分的方法,通过将header.html改为header.js并导出字符串形式的公共标签,再在需要的html文件中引入,实现了代码的解耦合和优化。

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

 

以前一直是用 jsp:include 的方式来引入 html 头部的公共部分

php也有类似的方式

 

但以上两种,个人感觉都并不纯粹,本着折腾的精神,优化原有代码,解耦合

使用 ECMA6 的模块化方式来 纯前端实现引用公共部分

 

1.首先,原来的 header.html 改为 header.js, 使用字符串来表示公共需要的标签, 并 export

2.创建 对应的引用的JS文件,接受 1 export 的 header

如此,就将 需要的 公共标签给写入了 html的head中

3.最后,在需要引用的 html文件中,这样写

 

 

结语:

三步走结束

这样的代码是挺简短的

但网上一开始搜,并没有找到现成案例,只能一个个知识点搜索,最终摸索把这个做出来的

会抄没啥用,要知道怎么抄

会搜,也得知道怎么搜

转载于:https://www.cnblogs.com/ihaokun/p/10290372.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值