以前一直是用 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. D. Diverse Garland

    题意:灯有三种颜色R,G,B.只要同一种颜色相邻就不可以.问最少需要换几次,可以使在一串灯中没有相邻灯的颜色相同. 思路:贪心思路:我们知道一个程序都是要子阶段,然后子阶段各个组合起来形成这个程序.那 ...

  2. mybatis 常用

    1.新增时获得主键 <insert ...> <selectKey resultType="java.lang.Integer" keyProperty=&quo ...

  3. （二 -3-3） 天猫精灵接入Home Assistant-自动发现Mqtt设备-自动生成配置信息

    http://www.hassmart.com/products/switches/#tab=config switch: - platform: mqtt name: keting state_to ...

  4. layui之日期和时间组件

    参考文档:https://www.layui.com/doc/modules/laydate.html代码片段如下: layui.use('laydate', function(){ var layd ...

  5. Python协程（真才实学，想学的进来）

    真正有知识的人的成长过程,就像麦穗的成长过程:麦穗空的时候,麦子长得很快,麦穗骄傲地高高昂起,但是,麦穗成熟饱满时,它们开始谦虚,垂下麦芒. --蒙田<蒙田随笔全集> *** 上篇论述了关 ...

  6. jenkins+svn安装

    参考资料: http://blog.csdn.net/wuxuehong0306/article/details/50016547 https://www.ibm.com/developerworks ...

  7. c# 设置IE浏览器版本运行程序-设置webBrowser对应的IE内核版本来运行

    //通常情况下,我们直接调用C#的webBrowser控件,默认的浏览器内核是IE7.  那么如何修改控件调用的默认浏览器版本呢?using System; using System.Collecti ...

  8. 用包来组织模型 -- Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. 在我们使用python manage.py ...

  9. 深入浅出Tomcat/2 - Tomcat启动和停止

    Tomcat启动和停止 很明显,我们启动或停止Tomcat,一般调用的是bin下的startup.sh或shutdown.sh(以Linux为例,以下涉及到平台,若无特殊说明,一般都指Linux).我 ...

  10. 扒一拔：Java 中的泛型（一）

    目录 1 泛型 1.1 为什么需要泛型 1.2 类型参数命名规约 2 泛型的简单实用 2.1 最基本最常用 2.2 简单泛型类 2.2.1 非泛型类 2.2.2 泛型类的定义 2.2.3 泛型类的使用 ...