最近临时一个负责公司官网的妹纸请假，于是临时接手了下官网的项目，官网都是静态页面，算是很简单的，但发现页面挺多，而每个页面总有部分是和其他页面一模一样的，比如页头、页尾等，这样就导致一个地方的修改要在其他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. Haskell中cabal install glib遇到的问题

    1. 运行命令cabal install glib时出现错误: Cannot find gtk2hsC2hs Please install `gtk2hs-buildtools` first and ...

  2. Golang学习-第二篇 搭建一个简单的Go Web服务器

    序言 由于本人一直从事Web服务器端的程序开发,所以在学习Golang也想从Web这里开始学起,如果对Golang还不太清楚怎么搭建环境的朋友们可以参考我的上一篇文章 Golang的简单介绍及Wind ...

  3. python threading.thread

    Thread 是threading模块中最重要的类之一,可以使用它来创建线程.有两种方式来创建线程:一种是通过继承Thread类,重写它的run方法:另一种是创建一个threading.Thread对 ...

  4. Python3、Unicode、UTF-8、编码

    text = u'你好,今天天气不错' text print(text) text = '\u4f60\u597d\uff0c\u4eca\u5929\u5929\u6c14\u4e0d\u9519' ...

  5. 自动化工具构建vue项目

    其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记.但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法.就算是在实际项 ...

  6. 【Loadrunner】使用LR录制HTTPS协议的三种方法

    使用LR录制HTTPS协议的三种方法 一.最简单的方法:浏览器配置打开浏览器,安装证书,配置完成后直接用http协议录制即可(配置完成的标识就是打开网页,不显示安全提示) 二.LR配置修改操作步骤如下 ...

  7. 测试命令运行时间：timeit和profile

    先说timeit from timeit import Timer def test1(): n=0 for i in range(101): n+=i return n def test2(): r ...

  8. sql server 用脚本管理作业

    转自:https://blog.csdn.net/yunye114105/article/details/6594826 摘要: 在SQL SERVER中用脚本管理作业,在绝大部分场景下,脚本都比UI ...

  9. Scala的类与类型

    类和类型 List<String>和List<Int>类型是不一样的,但是jvm运行时会采用泛型擦除.导致List<String>和List<Int>都 ...

  10. [py][mx]实现按照课程机构排名,按照学习人数排名

    原型是 实现效果 因为要按照这两个指标排名, 模型中现在还没有这2个字段(整数),所以需要修改模型. 修改模型,添加2个排序指标的字段 class CourseOrg(models.Model): . ...