前言

通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的。例如:头部,底部,侧边栏等等。如果是制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面的数量上去了而中途公共的部分出现要修的地方。不过有上10个页面都用到了这个公共的html代码。那修改起来不是很麻烦吗?

对于后端的同学而言,他们可以通过模版来进行拆分。这样做可以提高html代码的复用性和可维护性。但对于只是对设计图而制作成静态页面的同学而言他们,html没有提供像模版的include这种方法。但又不想使用到后端的模版,那么接下来的我介绍的几个工具也许可以帮助到你。

gulp-file-include

第一个我要介绍的是一个gulp的插件,他提供了一个include的方法让我们可以想后端模版一样把公共的部分分离出去。而且提供的include方法有许多配置项,详细可以去看看 gulp-file-include

下面我们写一个小demo来快速的了解一下,我们需要先安装gulp以及gulp-file-include

npm install -g gulp
mkdir gulp-file-include && cd gulp-file-include
npm install gulp --save-dev
npm install gulp-file-include

安装好之后,来简单的组织一下文件的目录:

|-node_modules
|-src // 生产环境的 html 存放文件夹
|-include // 公共部分的 html 存放文件夹
|-*.html
|-dist // 编辑后的 html 文件
gulpfile.js

在新建的gulpfile.js,配置好gulp-file-include

var gulp = require('gulp');
var fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() {
gulp.src('src/**.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'));
});

接着新建两个html文件,分别是头部和底部:

header.html

<h1>这是 header 的内容</h1>

footer.html

<h1>这是 footer 的内容</h1>

最后在新建一个html,把要用到的headerfooterinclude进来。

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
@@include('include/header.html') <p> 这是 layout 的内容 </p> @@include('include/footer.html')
</body>
</html>

最后回到命令行工具里,执行gulp fileinclude

看到编译完成之后,到dist目录一下有一个layout.html的文件,这就是最后编译出来的。

好了,上面的一个小实例也明白之后。也许能够在以后的工作中大大提供生产力,使得自己写的html代码更加具有维护性和可复用性。

前端模版

上面说道gulp-file-include简单而且易上手,对于不想使用模版的同学是一个很好的小工具。但是熟悉前端模版的同学来说,我们一样可以使用模版来做到html代码的维护性和可复用性。那么我就用一个我自己比较常用的ejs这个模版来说说一下如何分离那些公共部分的html文件。

把上一个例子的整个文件夹复制到一个新的地方,然后把名字修改为ejs。接着把node_modules文件夹给删除,dist文件夹下的html文件都删除。

用到ejs模版的话,需要把src里面的html文件的后缀名都修改成.ejs。把ejs文件编译成html的工具依旧是使用gulp。只需要安装gulp-ejs就可以了。

npm install gulp --save-dev
npm install gulp-ejs --save-dev

接着就是修改gulpflie.js文件了:

var gulp = require('gulp');
var ejs = require('gulp-ejs'); gulp.task('ejs', function() {
gulp.src('src/**.ejs')
.pipe(ejs())
.pipe(gulp.dest('dist'));
});

然后是修改layout.ejs文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<%-include include/header %> <p> 这是 layout 的内容 </p> <%-include include/footer %>
</body>
</html>

最后就是在命令行工具里面运行gulp ejs,在到dist目录下看到编译好的layout.html文件。就大功告成了。

其实模版具有许多强大的方法,而上面的例子主要还是演示include这个方法,可能会觉得有点大才小用。有兴趣的同学可以再去了解一下模版的一些方法。

HTML 代码复用实践的更多相关文章

  1. HTML 代码复用实践 (静态页面公共部分提取复用)

    原文:HTML 代码复用实践 上面的链接里面安装配置步骤已经非常详细,这里主要记录我操作过程中遇到的几个问题 gulp-file-include 的使用     按上面的步骤安装之后,node_mod ...

  2. 基于CMS的组件复用实践

    目前前端项目大多基于Vue.React.Angular等框架来实现,这一类框架都有一个明显的特点:基于模块化以及组件化思维.所以,开发者在使用上述框架时,实际上是在写一个一个的组件,并且组件与组件之间 ...

  3. 美团外卖Android平台化的复用实践

    美团外卖平台化复用主要是指多端代码复用,正如美团外卖iOS多端复用的推动.支撑与思考文章所述,多端包含有两层意思:其一是相同业务的多入口,指美团外卖业务需要在美团外卖App(下文简称外卖App)和美团 ...

  4. 深入理解JavaScript系列(46):代码复用模式(推荐篇)

    介绍 本文介绍的四种代码复用模式都是最佳实践,推荐大家在编程的过程中使用. 模式1:原型继承 原型继承是让父对象作为子对象的原型,从而达到继承的目的: function object(o) { fun ...

  5. if __name__== "__main__" 的意思(作用)python代码复用

    if __name__== "__main__" 的意思(作用)python代码复用 转自:大步's Blog  http://www.dabu.info/if-__-name__ ...

  6. Atitit 代码复用的理解attilax总结

    Atitit 代码复用的理解attilax总结 1.1. 继承1 1.1.1. 模式1:原型继承1 1.1.2. 模式2:复制所有属性进行继承 拷贝继承1 1.1.3. 模式3:混合(mix-in)1 ...

  7. javascript 模式(1)——代码复用

    程序的开发离不开代码的复用,通过代码复用可以减少开发和维护成本,在谈及代码复用的时候,会首先想到继承性,但继承并不是解决代码复用的唯一方式,还有其他的复用模式比如对象组合.本节将会讲解多种继承模式以实 ...

  8. 《JavaScript模式》第6章 代码复用模式

    @by Ruth92(转载请注明出处) 第6章:代码复用模式 GoF 在其著作中提出的有关创建对象的建议原则: -- 优先使用对象组合,而不是类继承. 传统模式:使用类继承: 现代模式:"类 ...

  9. javascript代码复用(四)-混入、借用方法和绑定

    这篇继续说js的现代复用模式:混入.借用方法和绑定. 混入 可以针对前面提到的通过属性复制实现代码复用的想法进行一个扩展,就是混入(mix-in).混入并不是复制一个完整的对象,而是从多个对象中复制出 ...

随机推荐

  1. [Leetcode]134.加油站

    这一题是贪心不是模拟 是贪心不是模拟 是贪心不是模拟! 如果用模拟的做法会比较慢,也失去了做这一题的趣味了. 模拟的方法很简单,就是每一个加油站都做起点模拟一遍,试一下能不能完成一圈,能完成一圈就保存 ...

  2. docker学习实践之路[第一站]环境安装

    安装虚拟机(VMware Workstation) 这步就不多说了,下载完软件之后一路点击下一步,直至安装完成. 安装Ubuntu 16.4 server 下载ubuntu 16.4,并安装在虚拟机中 ...

  3. 高可用Hadoop平台-实战

    1.概述 今天继续<高可用的Hadoop平台>系列,今天开始进行小规模的实战下,前面的准备工作完成后,基本用于统计数据的平台都拥有了,关于导出统计结果的文章留到后面赘述.今天要和大家分享的 ...

  4. Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态

    使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...

  5. Vue + Element UI 实现权限管理系统 前端篇(五):国际化实现

    国际化支持 1.安装依赖 执行以下命令,安装 i18n 依赖. yarn add vue-i18n $ yarn add vue-i18n yarn add v1.9.4 warning packag ...

  6. 基数估算HyperLogLog

    HyperLogLog HyperLogLog 可以接受多个元素作为输入,并给出输入元素的基数估算值: • 基数:集合中不同元素的数量.比如 {'apple', 'banana', 'cherry', ...

  7. Hibernate关联关系映射之一对一(主键关联)

    在业务成的域模型中,类和类之间最普遍的关系就是关联关系,而关联也是有方向的. 就以例子来说明:一个人对应一张身份证.对其进行增删改. 对于人在数据创建表的时候,我们就给他两个字段,一个是id号,一个就 ...

  8. .Net Core vs .Net Framework 如何为一个应用程序选择一个运行时(翻译)

    .Net Core是下一件大事吗?我已经使用了一段时间了,我倾向认为它是.事实上,我们推测,在2018年,对这项技术熟练的开发人员将会有巨大的需求.但是它和.Net Framework的区别是什么?你 ...

  9. [leetcode]238. 除自身以外数组的乘积

    题目描述 给定长度为 n 的整数数组 nums,其中 n > 1,返回输出数组 output ,其中 output[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积. 示例: 输 ...

  10. smarty 模板标签

    smarty 模板标签 变量标签 数组变量标签 变量调节器 条件标签 循环标签 数组变量标签 模板加载标签 预定义变量标签 常量标签