以前一直是用 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. 四、Oracle 序列、常用函数、多表连接

    一.序列定义:是oracle数据库专门用来产生连续且自动增长的数字的对象创建语法:create sequence 序列名(sq_表名) nocache(无缓存) create sequence sq_ ...

  2. flask上传excel文件，无须存储，直接读取内容

    运行环境python3.6 import xlrd from flask import Flask, request app = Flask(__name__) @app.route("/& ...

  3. 如果redis没有设置expire，他是否默认永不过期？

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/soulmate_P/article/details/81136054如果没有设置有效期,即使内存用完 ...

  4. TextField

    TextFiled 是一个输入Widget,属性如下: this.controller,//这个是传输数据用的this.focusNode,this.decoration = const InputD ...

  5. 【LOJ 2145】「SHOI2017」分手是祝愿

    LOJ 2145 100pts 这题...BT啊 首先我们很容易想出\(dp(msk)\)表示现在灯开关的情况是\(msk\),期望通过多少步走到终结态. 很明显\(dp(msk)=\frac{1}{ ...

  6. linux内存源码分析 - 内存回收(整体流程)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 概述 当linux系统内存压力就大时,就会对系统的每个压力大的zone进程内存回收,内存回收主要是针对匿名页和文 ...

  7. There is no action xxxFun defined for api controller api/subitem

    在使用abp的框架时,访问某个接口方法出现错误: There is no action xxxFun defined for api controller api/subitem 原因:肯定是访问的接 ...

  8. [03] 线程同步 synchronized

    1.线程同步概述 线程之间有可能共享一些资源,比如内存.文件.数据库等.多个线程同时读写同一份共享资源时,就可能引起冲突,所以引入了线程的"同步"机制. 所谓同步,就是说线程要有先 ...

  9. linux配置PS1

    自己常用的格式: vi ~/.bashrc export PS1="\[\e[31;1m\]\u@\[\e[34;1m\]\h \[\e[36;1m\]\W $\[\e[37;1m\] &q ...

  10. 记一次Dubbo服务注册异常

            公司项目重构,把dubbo版本从2.5.8升级为2.6.2.升级后在本地运行一点问题都没有:可是通过公司自研的发布系统将项目发布到测试环境的linux服务器下面后,出现了dubbo服务 ...