以前一直是用 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. 一、springBoot简介与环境搭建

    前言:学习计划 1.springBoot环境搭建 2.springBoot入门 3.srpingBoot整合Mybatis 4.springBoot整合Redis,Redis集群 5.springBo ...

  2. Node.js之mysql增删改查

    1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...

  3. 十分钟学会Java8：lambda表达式和Stream API

    Java8 的新特性:Lambda表达式.强大的 Stream API.全新时间日期 API.ConcurrentHashMap.MetaSpace.总得来说,Java8 的新特性使 Java 的运行 ...

  4. Web登录其实没那么简单

    1. 一个简单的HTML例子看看用户信息安全 标准的HTML语法中,支持在form表单中使用<input></input>标签来创建一个HTTP提交的属性,现代的WEB登录中, ...

  5. vue-amap 实例获取与自动缩放

    this.$refs.map.$amap.setFitView(markers) 获取实例,$amap 为 el-map 的 vid,没错,vid 获取方式就是这样 markers 为 Amap.Ma ...

  6. Python股票分析系列——基础股票数据操作（一）.p3

    该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第3部分.在本教程中,我们将使用我们的股票数据进一步分解一些基本的数据操作和可视化.我们将要使用 ...

  7. Windows Community Toolkit 3.0 - Gaze Interaction

    概述 Gaze Input & Tracking - 也就是视觉输入和跟踪,是一种和鼠标/触摸屏输入非常不一样的交互方式,利用人类眼球的识别和眼球方向角度的跟踪,来判断人眼的目标和意图,从而非 ...

  8. 四、Input框改placeholder中字体的颜色

    Input框改placeholder中字体的颜色 input::-webkit-input-placeholder { color: #ccc; font-size: 12px; }

  9. 009-定时关闭弹出广告窗口 By BoAi 20190414

    ;~ 定时关闭弹出广告窗口 By BoAi 20190414 ; ### 参数设置段 ######################################SingleInstance,forc ...

  10. Mysql 中的MVCC原理，undo日志的依赖

    一. MVCC 原理了解   原文点击:MVCC原理浅析 读锁: 也叫共享锁.S锁,若事务T对数据对象A加上S锁,则事务T可以读A但不能修改A,其他事务只能再对A加S锁,而不能加X锁,直到T释放A上的 ...