HTML 代碼複用實踐

時間 2019-11-06

標籤 html 代碼實踐欄目 HTML 简体版

原文原文鏈接

前言

一般咱們所作的一些頁面，咱們能夠從設計圖裏面看出有一些地方是相同的。例如：頭部，底部，側邊欄等等。若是是製做靜態頁面的同窗，對於這些重複的部分只可以經過複製粘貼到新的頁面來，若是頁面的數量上去了而中途公共的部分出現要修的地方。不過有上10個頁面都用到了這個公共的html代碼。那修改起來不是很麻煩嗎？html

拿sf來講，他們的頭部和底部在每一頁都是同樣的（有些頁面不一樣）：

↑頭部↑
↓底部↓
前端

對於後端的同窗而言，他們能夠經過模版來進行拆分。這樣作能夠提升html代碼的複用性和可維護性。但對於只是對設計圖而製做成靜態頁面的同窗而言他們，html沒有提供像模版的include這種方法。但又不想使用到後端的模版，那麼接下來的我介紹的幾個工具也許能夠幫助到你。node

gulp-file-include

第一個我要介紹的是一個gulp的插件，他提供了一個include的方法讓咱們能夠想後端模版同樣把公共的部分分離出去。並且提供的include方法有許多配置項，詳細能夠去看看 gulp-file-include。npm

下面咱們寫一個小demo來快速的瞭解一下，咱們須要先安裝gulp以及gulp-file-include。gulp

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文件，分別是頭部和底部：ui

header.htmlspa

<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這個方法，可能會以爲有點大才小用。有興趣的同窗能夠再去了解一下模版的一些方法。