以前一直是用 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. https基础

    面试题 https://blog.csdn.net/xihuangwutong/article/list/5? TLS 有三大功能:内容加密,身份认证,数据完整性认证 内容加密是依赖于秘钥协商协议数据 ...

  2. ubantu搭建oj——第一天（6.11）

    oj第一份作业: 按照DMOJ的文档将代码搬运到ubantu上 sudo apt install git gcc g++ make python-dev libxml2-dev libxslt1-de ...

  3. nginx指定配置文件启动

    /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

  4. ODOO(ERP源码安装)

    cat /etc/centos-release CentOS Linux release 7.4.1708 (Core) uname -r 3.10.0-693.el7.x86_64 IP:192.1 ...

  5. 【Codeforces Round 650】Codeforces #334 (Div. 1)

    模拟CF650,ABC三题,RK90 Codeforces 650 A 思路:首先看式子 \(\sqrt{(x_i-x_j)^2+(y_i-y_j)^2}=|x_i-x_j|+|y_i-y_j|\) ...

  6. 4-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(云端电脑(Windows)安装配置数据库,使用本地Navicat for MySQL和手机APP 远程连接测试)

    3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(安装配置数据库,使用Navicat for MySQL和手机APP 连接测试) 根据前面的教程把软件复制到云 ...

  7. 【React】开发一个城市选择控件

    想到做这个,是因为无意中在github上看到了这一个仓库https://github.com/lunlunshiwo/ChooseCity,做的就是一个城市选择控件,是用vue写的,说的是阿里的一道题 ...

  8. 【记一次pull request的惨痛教训】不可见的分隔符之Zero-with-space

    问题描述: 我在修改 ctf-wiki 目录后进行 mkdocs build 去生成索引目录的时候报错: 然后我尝试定位到第 2 行和第 288 行,这些行我似乎并没有修改过啊. 未果,开始去找师傅解 ...

  9. Oja’s rule

    目录 Oja's rule 背景 Hebbian learning 主要的一些理论 论文里面一些主要的假设 引理1 引理2 引理3 定理1 LEMMA 3(ALL) 引理 4 定理 2 定理 3(关于 ...

  10. java中流的简单小结

    1.分类 按字节流分: InputStream(输出流)     OutputStream(输入流) 按字符流分: Reader Writer  提示:输入.输出是站在程序的角度而言,所有输入流是“读 ...