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

    在细节栏中的字段的属性, 在样式的text-color,右边的表达式 输入下面表达式即可! =IF( [ALL_VALUE] > 50 ; "black" ; IF([ALL ...

  2. make linux test main attempt to index a nil value

    Lua: getting started http://www.lua.org/start.html#learning Building from source Lua is very easy to ...

  3. Linux下的pure-ftp的安装详解

    FTP(File Transfer Protocol)是文件传输协议,常用于Internet上控制文件的双向传输.同时,它也是一个应用程序,用户可以通过它把自己PC机与世界各地所运行FTP协议的服务器 ...

  4. Python开发【Django】：ModelForm操作

    ModelForm 内容回顾: Model - 数据库操作 - 验证 class A(MOdel): user = email = pwd = Form class LoginForm(Form): ...

  5. laravel常用的artisan命令

    转载来源链接: https://blog.csdn.net/jiandanokok/article/details/72897682 全局篇 查看artisan命令 php artisan php a ...

  6. WebDriver API 实例详解（四）

    三十一.使用页面的文字内容识别和处理新弹出的浏览器窗口 被测试网页的HTML源码: <html> <head> <meta charset="UTF-8&quo ...

  7. 通过生成器yield实现单线程的情况下实现并发运算效果（异步IO的雏形）

    一.协程: 1.生成器只有在调用时才会生成相应的数据 2.调用方式有 " str__next__.()   str.send() ", 3.并且每调用一次就产生一个值调用到最后一个 ...

  8. Linux Find命令使用方法举例

    linux命令之find命令使用举例. 在当前目录和子目录下查找文件MyCProgram.c  # find . -name "MyCProgram.c" 查找文件且忽略大小写  ...

  9. 零碎收集cocos知识

    Configuration类 返回环境变量 local function menuCallback(tag, pSender) printInfo("selected item tag:%d ...

  10. 系统管理命令之whoami

    whoami命令用于打印当前有效的用户名称,相当于执行id  --un命令. 1.显示该命令帮助信息: # whoami --help 2.显示该命令的版本信息: # whoami --version ...