HTML 代码复用实践
前言
通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的。例如:头部,底部,侧边栏等等。如果是制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面的数量上去了而中途公共的部分出现要修的地方。不过有上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
,把要用到的header
和footer
给include
进来。
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 代码复用实践的更多相关文章
- HTML 代码复用实践 (静态页面公共部分提取复用)
原文:HTML 代码复用实践 上面的链接里面安装配置步骤已经非常详细,这里主要记录我操作过程中遇到的几个问题 gulp-file-include 的使用 按上面的步骤安装之后,node_mod ...
- 基于CMS的组件复用实践
目前前端项目大多基于Vue.React.Angular等框架来实现,这一类框架都有一个明显的特点:基于模块化以及组件化思维.所以,开发者在使用上述框架时,实际上是在写一个一个的组件,并且组件与组件之间 ...
- 美团外卖Android平台化的复用实践
美团外卖平台化复用主要是指多端代码复用,正如美团外卖iOS多端复用的推动.支撑与思考文章所述,多端包含有两层意思:其一是相同业务的多入口,指美团外卖业务需要在美团外卖App(下文简称外卖App)和美团 ...
- 深入理解JavaScript系列(46):代码复用模式(推荐篇)
介绍 本文介绍的四种代码复用模式都是最佳实践,推荐大家在编程的过程中使用. 模式1:原型继承 原型继承是让父对象作为子对象的原型,从而达到继承的目的: function object(o) { fun ...
- if __name__== "__main__" 的意思(作用)python代码复用
if __name__== "__main__" 的意思(作用)python代码复用 转自:大步's Blog http://www.dabu.info/if-__-name__ ...
- Atitit 代码复用的理解attilax总结
Atitit 代码复用的理解attilax总结 1.1. 继承1 1.1.1. 模式1:原型继承1 1.1.2. 模式2:复制所有属性进行继承 拷贝继承1 1.1.3. 模式3:混合(mix-in)1 ...
- javascript 模式(1)——代码复用
程序的开发离不开代码的复用,通过代码复用可以减少开发和维护成本,在谈及代码复用的时候,会首先想到继承性,但继承并不是解决代码复用的唯一方式,还有其他的复用模式比如对象组合.本节将会讲解多种继承模式以实 ...
- 《JavaScript模式》第6章 代码复用模式
@by Ruth92(转载请注明出处) 第6章:代码复用模式 GoF 在其著作中提出的有关创建对象的建议原则: -- 优先使用对象组合,而不是类继承. 传统模式:使用类继承: 现代模式:"类 ...
- javascript代码复用(四)-混入、借用方法和绑定
这篇继续说js的现代复用模式:混入.借用方法和绑定. 混入 可以针对前面提到的通过属性复制实现代码复用的想法进行一个扩展,就是混入(mix-in).混入并不是复制一个完整的对象,而是从多个对象中复制出 ...
随机推荐
- Redis笔记(1)数据结构与对象
1.前言 此系列博客记录redis设计与实现一书的笔记,提取书本中的知识点,省略相关说明,方便查阅. 2.基本数据结构 2.1 简单动态字符串SDS(simple dynamic string) 结构 ...
- Zookeeper--0200--安装与集群搭建、常用命令、客户端工具
看这里,http://www.cnblogs.com/lihaoyang/p/8358153.html 1,先使用可视化客户端软件 ZooInspector 连接上集群中的一个节点,看下zk的结构: ...
- 怎么样imageview实现铺满全屏
<ImageView android:layout_width="match_parent" android:layout_height="match_parent ...
- 全网最详细的HBase启动以后,HMaster进程启动了,几秒钟以后自动关闭问题的解决办法(图文详解)
不多说,直接上干货! 问题详情 情况描述如题所示,hbase启动以后,HMaster进程启动了,几秒钟以后自动关闭,但是HRegionServer进程正常运行: 解决办法: 1.检查下每台机器的时间是 ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- es-02-elasticsearch安装及遇到的问题
最近因为工作需要, 又使用到了es, 版本已经从当年的2.4 更新到了6.3 基本上解压即用, elasticsearch 5.x 版本, 在 centos6下, 很多性能不能够发挥, 建议 cent ...
- solr(二) : 整合ik-analyzer
一. 问题: 在使用solr时, 分词器解析中文的时候, 是一个一个字解析的. 这并不是我们想要的结果. 而在lucene中, 使用的中文分词器是 IKAnalyzer. 那么在solr里面, 是不是 ...
- dig命令详解
dig命令是常用的域名查询工具,可以用来测试域名系统工作是否正常 语法 dig(选项)(参数) 选项 @<服务器地址>:指定进行域名解析的域名服务器: -b<ip地址>:当主机 ...
- 【K8S学习笔记】Part2:获取K8S集群中运行的所有容器镜像
本文将介绍如何使用kubectl列举K8S集群中运行的Pod内的容器镜像. 注意:本文针对K8S的版本号为v1.9,其他版本可能会有少许不同. 0x00 准备工作 需要有一个K8S集群,并且配置好了k ...
- vuex数据管理-数据模块化
对于vue这类mvvm框架来说,其核心就是组件与数据,因此做好相应的数据管理极为重要.这里分享下vuex数据模块化管理的方法,有利于搭建便于维护.协作的vue项目. vuex管理基本方法和使用 模块化 ...