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

    思路:在个人中心页面,首先判断全局的 app.js 里面的 globalData 里面的 is_login 状态,并且判断 缓存数据中的 is_login 状态,如果都为真,就正常显示,如果有一个为假 ...

  2. 【转载】国外程序员整理的Java资源大全

    以下转载自: 推荐!国外程序员整理的Java资源大全中文版    https://github.com/akullpp/awesome-java英文版 Java 几乎是许多程序员们的入门语言,并且也是 ...

  3. postgresql----索引失效

    什么是索引失效?如果where过滤条件设置不合理,即使索引存在,且where过滤条件中包含索引列,也会导致全表扫描,索引不起作用.什么条件下会导致索引失效呢? 1.任何计算.函数.类型转换 2.!= ...

  4. [Nginx] – 安全优化 – 配置文件优化

    1.配置Nginx gzip压缩实现性能优化 1.Nginx gzip压缩功能介绍  Nginx gzip压缩模块提供了压缩文件内容的功能,用户请求的内容在发送出用客户端之前,Nginx服务器会根据一 ...

  5. python bug the C library strftime function.

    import timedef date2mktime(date, format_='%Y-%m-%d'): return int(time.mktime(time.strptime(date, for ...

  6. TA-Lib中文文档（一）：快速开始

    TA-Lib 简介: 这是一个Python 金融指数处理库TA-LIB,他是基于 Cython 而不是 SWIG. TA-Lib is widely used by trading software ...

  7. PostgreSQL数据库的安装与PostGIS的安装（转）

    原文:http://lovewinner.iteye.com/blog/1490915 安装postgresql sudo apt-get install postgresql-9.1 postgre ...

  8. scrapy之定制命令

    单爬虫运行 import sys from scrapy.cmdline import execute if __name__ == '__main__': execute(["scrapy ...

  9. synchronized修饰的方法之间相互调用

    1:synchronized修饰的方法之间相互调用,执行结果为There hello  ..因为两个方法(main,hello)的synchronized形成了互斥锁.  所以当main方法执行完之后 ...

  10. java.lang.NoSuchMethodError: scala.Predef$.refArrayOps([Ljava/lang/Object;)Lscala/collection/mutable/ArrayOps;

    用Maven创建了一个spark sql项目,在引入spark sql jar包时引入的是: <dependency> <groupId>org.apache.spark< ...