最近临时一个负责公司官网的妹纸请假，于是临时接手了下官网的项目，官网都是静态页面，算是很简单的，但发现页面挺多，而每个页面总有部分是和其他页面一模一样的，比如页头、页尾等，这样就导致一个地方的修改要在其他N个页面手动重复的改下，当然，这是我无法忍受的，于是思考下怎样将公用的部分独立出来供调用。

开始想直接用js异步请求一个公用模块的页面即可，但考虑到官网的SEO问题，就放弃了，接着就想能否用webpack将代码分为开发环境和生产环境，在开发环境进行页面的拼接，完成后输出到生产环境，这样就不会影响seo，同时还能借助webpack的强大打包功能将资源进行打包压缩等处理，下面简要阐述demo的搭建。

demo的整体结构如下：



base-config

   --webpack.dir-foreach.config.js

css

images

js

lib

publicLayout

   --main.js

publish

templateSource

　　　--commonhtml

　　　--course

　　　　--course.ejs

　　　　--course.js

　　　--index

　　　　--index.ejs

　　　　--index.js

　　　.........

package.json

webpack.build.config.js

webpack.config.js

主要的构建模块实在publicLayout和templateSource两个目录：

publicLayout: 主要封装公共模块的引用模块，main.js代码如下：



const header = require('../templateSource/commonhtml/header.html');  //引入公共页面头

const topbar = require('../templateSource/commonhtml/topbar.html');  //引入body中存在的公共模块

const footer = require('../templateSource/commonhtml/footer.html');  //引入公页面脚

const htmlconfig = {

    header: header,

    topbar: topbar,

    footer: footer

};

module.exports = htmlconfig;  //导出供调用

templateSource: 存放页面的构建模板，此demo中采用ejs作为前端模板，如index页，由index.ejs生成：

 <%= header %>

     <link type="text/css" rel="stylesheet" href="css/course.css">

 </head>

 <body>

     <div class="nav-bar">

         <div class="nav">

             <ul class="navigation">

                 <li>

                     <a href="index.html" target="_self" title="">首页</a>

                 </li>

                 <li>

                     <a href="course.html" target="_self" title="" class="cur">课程定制</a>

                 </li>

                 ......

             </ul>

         </div>

     </div>

     <!-- wrapper -->

     <div id="container">

         <div>主内容部分1</div>

         <%= topbar %>

         <div>主内容部分2</div>

     </div>

     <!-- footer -->

     <%= footer %>

 </body>

 </html>
<%= header %>即是引入main.js中封装的公共头部分，与当前的html完成拼接，最终输出到发布环境（publish）中。
index.js代码如下：


const publiclayout = require('../../publicLayout/main.js');  //总是引入封装的页面公共部分

const mainindex = require('./index.ejs');  //引入当前页的模板模块

module.exports = mainindex(publiclayout);  //将公共部分的多个变量导出到页面模板中进行页面拼接

整个demo相对简单，仅仅是为了规避在多个页面中修改同一处的重复劳动这一痛点。

详细的项目脚手架可前往GitHub查看：https://github.com/frankshin/public-html-layout

ps：后续脚手架会阶段性升级，加入新功能，所以本文中涉及代码的部分具体还是以github中的为准

前端引用公共html模块方案的更多相关文章

  1. 引用公共页面的js函数报错

    对于网站来说很多页面之间都有着大量的共享模块,如页头,页脚和用户栏等.很多时候为了方便.省事,我们在公共模块写函数,然后在别的页面里调用.但我们在引用公共的js函数时,有些可以引用,有些却报错:这是因 ...

  2. 系统中异常公共处理模块 in spring boot

    最近在用spring boot 做微服务,所以对于异常信息的 [友好展示]有要求,我设计了两点: 一. 在业务逻辑代码中,异常的抛出 我做了限定,一般只会是三种: 1. OmcException // ...

  3. Python引用多个模块，调用模块中的函数时，要注意的地方

    转自:http://blog.csdn.net/yjk13703623757/article/details/70237463 python模块是”从下到上”导入(import)的. 例如: a.py ...

  4. python3 中引用 HTMLTestRunner.py 模块的注意事项

    HTMLTestRunner.py支持python2中运行,如果在python3.6.2中引用HTMLTestRunner.py模块,需要做一下更改: 1.更改HTMLTestRunner.py模块中 ...

  5. 【直接拿来用のandroid公共代码模块解析与分享】の Notification和NotificationManager

    本文源代码托管在https://github.com/ASCE1885/asce-common,欢迎fork Android项目做得多了.会发现原来非常多基础的东西都是能够复用,这个系列介绍一些自己项 ...

  6. 微信小程序引用外部js，引用外部样式，引用公共页面模板

    https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js============= ...

  7. 如何在html中添加引用公共模块文件

    1.首先需要修改apache的配置文件: 打开httpd.conf 搜索“AddType text/html .shtml” 搜索结果: AddType text/html .shtml .html ...

  8. vue多个项目公共化组件方案

    前言 最近项目需求,需要把两个vue项目多个一样的模块抽成公共化.考虑采用的方案 1.把公共部分独立出来一个项目,npm发布私有包,使用的项目npm install下载(目前下载使用出现配置错误) 存 ...

  9. 前端CDN公共库

    通过使用公共的CDN脚本和样式库,可以在一定程度上加速访问.节省服务器流量.提升你的网站用户体验.本文将介绍国内比较常用的几种免费的CDN库,包括百度.新浪.360.又拍和七牛等. 百度CDN公共库 ...

随机推荐

  1. 微信小程序 --- 选择图片和拍照

    wx.chooseImage 选择图片 / 进行拍照 //获取应用实例 const app = getApp() Page({ data: { onOff:true }, btnclick:funct ...

  2. 微信小程序 --- for循环渲染

    循环标签:wx:for <view wx:for="{{['aa','bb','cc']}}"> {{index}} {{item}} </view> 这里 ...

  3. 微信小程序 --- page.js文件

    page.js文件是写当前 page.wxml 页面的 JS 脚本文件: 示例: //获取应用实例 const app = getApp() Page({ data: { navComOneOnOff ...

  4. pta 天梯地图 （Dijkstra）

    本题要求你实现一个天梯赛专属在线地图,队员输入自己学校所在地和赛场地点后,该地图应该推荐两条路线:一条是最快到达路线:一条是最短距离的路线.题目保证对任意的查询请求,地图上都至少存在一条可达路线. 输 ...

  5. kubernetes实战(十)：k8s使用Helm安装harbor

    1.基本概念 对于复杂的应用中间件,需要设置镜像运行的需求.环境变量,并且需要定制存储.网络等设置,最后设计和编写Deployment.Configmap.Service及Ingress等相关yaml ...

  6. 设置XShell快捷键 复制粘贴 并禁用智能选择

    设置XShell快捷键 复制粘贴 并禁用智能选择 1打开选项 2键盘和鼠标->打开编辑 3新建 组合键 Ctrl+C 类型:菜单 ->操作 [编辑]复制  [编辑]粘贴 4选中 ctrl+ ...

  7. Java-idea-PMD源文件级别潜在bug查看

    一.概述 PMD(Project Manager Design)是一种开源分析Java代码错误的工具.与其他分析工具不同的是,PMD通过静态分析获知代码错误.也就是说,在不运行Java程序的情况下报告 ...

  8. （转）在GitHub多个帐号上添加SSH公钥

    GitHub后台可以添加多个SSH Keys,但是同一个SSH Keys只能在添加在一个帐号上(添加时提示“Key is already in use”).理由很容易想到,SSH公钥使用时相当于用户名 ...

  9. python3 函数即变量的使用

    函数即变量的意思是函数被使用时后面不用(),类似变量的使用,具体如下面的示例代码: def say(name): print(name) hi = say hi('你好!') def add(): p ...

  10. 更好的利用配置文件和importlib

    需求:做不同的操作时只需修改配置文件即可完成 # message/email.py from .base import Base # 子类必须实现send方法,否则抛出异常 class Email(B ...