以前一直是用 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. 5linux引导流程解析

    课程大纲  Linux引导流程  Linux运行级别  Linux启动服务管理  GRUB配置与应用  启动故障分析与解决     常用固件设置 安全设置 可引导介质列表 可引导介质搜索顺序 ...

  2. 微信硬件平台（八） 4 ESP8266通过微信公众号给用户推送消息

    https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=自己申请微信公众号的TOKEN 输出结果:  由于aRDUINO串 ...

  3. 错误Matplotlib is building the font cache using fc-list. This may take a moment.

    这上面的错误是因为你环境中没有安装GUI工具,但是你在代码中又想要显示图片,即有下面的语句: plt.imshow(np.transpose(npimg, (, , ))) plt.show() 那么 ...

  4. Spring Security（二十五）：7. Sample Applications

    There are several sample web applications that are available with the project. To avoid an overly la ...

  5. 异常：NoNodeAvailableException

    现象 1.启动时候出现 node null not part of the cluster Cluster [********], ignoring... 2.启动时正常,但是请求时出现 NoNode ...

  6. Python脱产8期 Day09 2019/4/23

    内存管理 一.引用计数:垃圾回收机制的依据 1.变量的值被引用,该值的引用计数 +12.变量的值被解绑,该值的引用计数 -13.引用计数为0时就会被垃圾回收机制回收 二.引用计数会出现循环引用问题:相 ...

  7. [MicroPython]TurniBit开发板旋转按钮控制脱机摆动

    一.实验目的: ?学习在PC机系统中扩展简单I/O 接口的方法 ?学习TurnipBit拼插编程 ?了解舵机工作原理 ?学习TurnipBit扩展板舵机和旋转按钮接线方式 二.所需原器件: ?Turn ...

  8. Java NIO4：缓冲区Buffer(续)

    一.什么是缓冲区      一个缓冲区对象是固定数量的数据的容器,其作用是一个存储器,或者分段运输区,在这里数据可被存储并在之后用于检索.缓冲区像前篇文章讨论的那样被写满和释放,对于每个非布尔原始数据 ...

  9. Java多线程（二）——常用的实现多线程的两种方式

    一.继承Thread类创建线程类 Java使用Thread类代表线程,所有的线程对象都必须是Thread类或其子类的实例.每个线程的作用是完成一定的任务,实际上就是执行一段程序流即一段顺序执行的代码. ...

  10. PHP基础介绍

    php之基本操作 1.常用数据类型: 字符串.整形.浮点数.逻辑.数组.对象.NULL. 字符串: $x = "hello"; 整形:$x = 123; 浮点数:$x =1.123 ...