一、简介
在实际项目中，难免会遇到在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模板的一些总结，仅供大家学习参考，日常积累，希望对大家有所帮助。