js中使用HTML模板字串
阿新 • • 發佈：2018-12-16
一、簡介
在實際專案中，難免會遇到在js中動態拼接html的程式碼，這樣雖然比較簡單，但是相對來說不太好維護，後期如果改了html結構，那麼js改動的東西會比較多。如下程式碼就是動態拼接html的不太好的程式碼：
var html = '<a class="weui-cell weui-cell_access" href="">'+ '<div class="weui-cell__hd">'+ '<div class="round"></div>'+ '</div>'+ ' <div class="weui-cell__bd">'+ '<p class="font30 text-title">'+ (item.clsname ? item.clsname : "") +' ' + item.zrs + '人</p>'+ '<div class="text-desc font24 mgt10">'+ '<span>男生 '+item.nszrs+'人</span>'+ '<span class="divider-vertical"></span>'+ '<span>女生'+item.nvzrs+'人</span>'+ '</div></div><div class="weui-cell__ft"></div></a>';
以下用類似ES6中模板字串的方式來說明如何在js中使用HTML模板。
二、方法
【a】首先，擴充套件一個解析HTML程式碼的方法：
/** * 擴充套件HTML模板解析的方法 * @param functionObject 解析的物件 * @returns {function(*): string} */ Object.prototype.parseHTMLTemplate = function (functionObject) { return function (scope) { return functionObject.toString().match(/\/\*([\s\S]*?)\*\//)[1].replace(/\$\{\w.+\}/g, function (variable) { var value = scope; variable = variable.replace('${', '').replace('}', ''); variable.split('.').forEach(function (section) { value = value[section]; }); return value; }); } };
該方法主要是通過正則替換${xxx}的值來實現解析HTML程式碼。
【b】將HTML模板通過註釋方式寫在js方法裡面：
var template01 = parseHTMLTemplate(function () { /* <div> <h2>${title}</h2> <div class="content">${content}</div> </div> */ }); var object01 = { title: 'title01', content: 'content01' }; var newHTML = template01(object01);
示例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js中使用HTML模板</title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="example01">示例一:使用${title}指定替換的值</div>
<div id="example02">示例二:使用${data.title}指定替換的值</div>
<script type="text/javascript">
/**
* 擴充套件HTML模板解析的方法
* @param functionObject 解析的物件
* @returns {function(*): string}
*/
Object.prototype.parseHTMLTemplate = function (functionObject) {
return function (scope) {
return functionObject.toString().match(/\/\*([\s\S]*?)\*\//)[1].replace(/\$\{\w.+\}/g, function (variable) {
var value = scope;
variable = variable.replace('${', '').replace('}', '');
variable.split('.').forEach(function (section) {
value = value[section];
});
return value;
});
}
};
/************************示例一:使用${title}指定替換的值***********************/
var template01 = parseHTMLTemplate(function () {
/*
<div>
<h2>${title}</h2>
<div class="content">${content}</div>
</div>
*/
});
var object01 = {
title: 'title01',
content: 'content01'
};
var newHTML = template01(object01);
console.log(newHTML);
$("#example01").after(newHTML);
/************************示例二:使用${data.title}指定替換的值******************/
var object02 = {
data: {
title: 'title02',
content: 'content02'
}
};
var template02 = parseHTMLTemplate(function () {
/*
<div>
<h2>${data.title}</h2>
<div class="content">${data.content}</div>
</div>
*/
});
var newHTML02 = template02(object02);
console.log(newHTML02);
$("#example02").after(newHTML02);
</script>
</body>
</html>
這樣就實現了在js中使用HTML模板避免動態拼接的方法，方便後期維護和程式碼清晰。
三、總結
本文是筆者對在js中使用HTML模板的一些總結，僅供大家學習參考，日常積累，希望對大家有所幫助。