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

php也有类似的方式

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

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

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

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

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

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

结语：

三步走结束

这样的代码是挺简短的

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

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

会搜，也得知道怎么搜

HTML实现包含公共部分：通过ECMA6的模块化，纯前端实现类似jsp:include的功能的更多相关文章

  1. jsp的静态包含与动态包含：<%@ include file="" %>和<jsp:include page=""></jsp:include>区别与分析

    <%@ include file="" %>是将文件原封不动的copy进现有的文件中,像是拼接好后,再编译成为servlet运行. <jsp:include pa ...

  2. jQuery刷新包含的<jsp:include>页面

    jQuery刷新包含页面 JQuery刷新包含页面,以下两种形式均可: <%@include file="../include/header.jsp" %>   < ...

  3. jsp include包含html页面产生的乱码问题

    大家都知道在jsp中include的有两种方式,一种是<jsp:include page="">,另一种是<%@ include file="" ...

  4. 玩转Web之Jsp（一)-----jsp中的静态包含（<%@include file="url"%>）与动态包含（<jsp:include>）

    在jsp中include有两种形式,其中<%@include file="url"%>是指令元素,<jsp:include page="" f ...

  5. JSP基本语法--包含指令<%@include file="路径"%> <jsp:include page>

    包含指令,真正改变的地方只有具体内容处: 方法1: 在每个jsp页面(HTML)都包含工具栏,头部信息,尾部信息,具体内容 方法2: 将工具栏,头部信息,尾部信息都分成各个独立的文件,使用的时候直接导 ...

  6. SQL判断某列中是否包含中文字符、英文字符、纯数字 (转)

    一.包含中文字符 select * from 表名 where 列名 like '%[吖-座]%' 二.包含英文字符 select * from 表名 where 列名 like '%[a-z]%' ...

  7. .net中 页面包含子页面 类似include的功能--（记录九）

    aspx页面中: //加上这一段代码 <%@ Register Tagprefix="ImgEvaTask" TagName="content1" src ...

  8. jsp:include怎么设置才能正确显示包含的页面呢

    1.项目的所有jsp都放在WEB-INF文件夹之下,使用的是SpirngMVC进行了过滤,jsp:include只能引入WEB-INF外部的jsp文件,对于改变后缀显示为htm的jsp的WEB-INF ...

  9. [github项目]基于百度地图二次开发实现的车辆监管（包含车辆定位、车辆图片和方向控制，电子围栏，图形绘制等功能）前端实现(不包含后端实现)

    前言:基于百度地图javascript版本开发,百度地图中所用的key已承诺仅用于测试,不用于商业用途 注:本文所有代码可以到github上进行下载,github地址:http://map.eguid ...

随机推荐

  1. （二 -0） 天猫精灵接入Home Assistant-安装MQTT服务器

    ubuntu 1604  阿里云 学生版轻型服务器 1 安装MQTT 进入官网 http://emqtt.com/ 点击下载 找到  ubuntu 1604  右键-复制链接 粘贴办理内容是下载链接第 ...

  2. MySQL 主主配置

    一.准备 1.两个数据库版本最好保持一致(因为官方就是这么建议的,主要的问题就是考虑到兼容性问题) 2.连个数据库的数据保持一致,若不一致,可手动调整,比如A比B多一个库,那就将这个库导入到B库,达到 ...

  3. selenium中遇到div弹框，一起引申到其他弹框

    1.div弹框和DOM普通元素一样处理 2.出现一下就自动消失的弹框,也是在DOM中有描述的,可以使用xpath,用其内容定位 3.(转,其他弹框处理,包括alert和不同windows) https ...

  4. Spring Security（二十八）：9.4 Authentication in a Web Application

    Now let’s explore the situation where you are using Spring Security in a web application (without we ...

  5. nginx+tomcat9+redisson+redis+jdk1.8简单实现session共享

    一.环境安装 由于资源限制,在虚拟机中模拟测试,一台虚拟机,所有软件均安装到该虚拟机内 安装系统:CentOS Linux release 7.4.1708 (Core) CentOS安装选择版本:B ...

  6. python：HTMLTestRunner测试报告优化

    之前的博客有介绍过python的单元测试框架unittest,基于其扩展的测试报告模块HTMLTestRunner,不过这个报告本身的界面看起来太丑... 趁着今天有时间,找了两个二次开发优化后的HT ...

  7. 洛谷 P2404 自然数的拆分问题

    题目链接 https://www.luogu.org/problemnew/show/P2404 题目背景 木有...... 题目描述 任何一个大于1的自然数n,总可以拆分成若干个小于n的自然数之和. ...

  8. 线程安全之CAS机制详解（分析详细，通俗易懂）

    背景介绍:假设现在有一个线程共享的变量c=0,让两个线程分别对c进行c++操作100次,那么我们最后得到的结果是200吗? 1.在线程不安全的方式下:结果可能小于200,比如当前线程A取得c的值为3, ...

  9. Linux中断管理 (2)软中断和tasklet

    目录: <Linux中断管理> <Linux中断管理 (1)Linux中断管理机制> <Linux中断管理 (2)软中断和tasklet> <Linux中断管 ...

  10. Java获取Window和Linux系统的项目ClassPath路径

    不啰嗦,直接复制工具类 /** * 在windows和linux系统下均可正常使用 * Create by yster@foxmail.com 2018/6/6/006 14:51 */ public ...