首页 > 代码库 > 前端引用公共html模块方案探索

前端引用公共html模块方案探索

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

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

demo的整体结构如下:

 1 base-config
 2     --webpack.dir-foreach.config.js
 3 css
 4 images
 5 js
 6 lib
 7 publicLayout
   --main.js
8 publish 9 templateSource
    --commonhtml
    --course
     --course.ejs
     --course.js
    --index
     --index.ejs
     --index.js
    .........
10 package.json 11 webpack.build.config.js 12 webpack.config.js

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

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

1 const header = require(‘../templateSource/commonhtml/header.html‘);  //引入公共页面头
2 const topbar = require(‘../templateSource/commonhtml/topbar.html‘);  //引入body中存在的公共模块
3 const footer = require(‘../templateSource/commonhtml/footer.html‘);  //引入公页面脚
4 const htmlconfig = {
5     header: header,
6     topbar: topbar,
7     footer: footer
8 };
9 module.exports = htmlconfig;  //导出供调用

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

 1 <%= header %>
 2     <link type="text/css" rel="stylesheet" href="http://www.mamicode.com/css/course.css">
 3 </head>
 4 <body>
 7     <div class="nav-bar">
 9         <div class="nav">
10             <ul class="navigation">
11                 <li>
12                     <a href="http://www.mamicode.com/index.html" target="_self" title="">首页</a>
13                 </li>
14                 <li>
15                     <a href="http://www.mamicode.com/course.html" target="_self" title="" class="cur">课程定制</a>
16                 </li>
17                 ......
18             </ul>
20         </div>
22     </div>
24     <!-- wrapper -->
25     <div id="container">
26         <div>主内容部分1</div>
27         <%= topbar %>
28         <div>主内容部分2</div>
29     </div>
30     <!-- footer -->
31     <%= footer %>
32 </body>
33 </html>
<%= header %>即是引入main.js中封装的公共头部分,与当前的html完成拼接,最终输出到发布环境(publish)中。
index.js代码如下:
1 const publiclayout = require(‘../../publicLayout/main.js‘);  //总是引入封装的页面公共部分
2 const mainindex = require(‘./index.ejs‘);  //引入当前页的模板模块
3 module.exports = mainindex(publiclayout);  //将公共部分的多个变量导出到页面模板中进行页面拼接

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

GitHub:https://github.com/frankshin/public-html-layout

前端引用公共html模块方案探索