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

    当前session可以直接用prompt修改 mysql> prompt \u@\h \d \r:\m:\s>PROMPT set to '\u@\h \d \r:\m:\s>'ro ...

  2. [Android Tips] 30.如何在 Android Studio 中一次性格式化所有代码

    在目录上面右击,有 Reformat Code Ctrl + Alt + L 参考 如何在IntelliJ IDEA或Android Studio中一次性格式化所有代码?

  3. 解决pip install 安装慢问题

    使用豆瓣源 比如安装pyspark pip install -i https://pypi.douban.com/simple/ pyspark 速度就比用pip install快N倍 关注公众号:

  4. supervisor安装篇

    服务器环境: [root@kafka60 supervisor-]# uname -a Linux kafka60 -.el6.x86_64 # SMP Tue May :: UTC x86_64 x ...

  5. Oracle数据库类型date

    date日期类型 说明 oracle dd-mm-yyyy create table test1(birthday date); timestamp(n) 说明:邮戳的时间类型 于date的区别,邮戳 ...

  6. Strongly connected---hdu4635（强联通分量）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4635 先判断图是否强连通.如果不是强连通的,那么缩点. 我们的目的是加最多的边,那么最后的图中,肯定两 ...

  7. 【Loadrunner】性能测试：通过服务器日志获取性能需求

    性能测试:通过服务器日志获取性能需求          接触过性能测试的童鞋都知道,想要做好一个项目的性能测试,性能需求的获取至关重要~!如果公司有做过性能测试还好,大家可以拿之前的性能测试数据作为参 ...

  8. （2.3）DDL增强功能-流程化控制与动态sql

    1.流程控制 在T-SQL中,与流程控制语句相关的关键字有8个: BEGIN...END BREAK GOTO CONTINUE IF...ELSE WHILE RETURN WAITFOR 其实还可 ...

  9. uva 11105 - Semi-prime H-numbers(数论)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u011328934/article/details/36644069 option=com_onli ...

  10. JavaScript中的作用域以及this变量

    原文:Scope and this in JavaScript 今天我想简单讨论下关于JavaScript的作用域和this变量."作用域"的概念就是说.我们的代码能够从哪里去訪问 ...