js中使⽤HTML模板字符串
jquery在项目里是干啥的
⼀、简介
在实际项⽬中，难免会遇到在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 : "")
+'   ' + s + '⼈</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) {
String().match(/\/\*([\s\S]*?)\*\//)[1].replace(/\$\{\w.+\}/g, function (variable) {
var value = scope;
variable = place('${', '').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) {
String().match(/\/\*([\s\S]*?)\*\//)[1].replace(/\$\{\w.+\}/g, function (variable) {                var value = scope;
variable = place('${', '').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',
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">${t}</div>
</div>
*/
});
var newHTML02 = template02(object02);
console.log(newHTML02);
$("#example02").after(newHTML02);
</script>
</body>
</html>
这样就实现了在js中使⽤HTML模板避免动态拼接的⽅法，⽅便后期维护和代码清晰。
三、总结
本⽂是笔者对在js中使⽤HTML模板的⼀些总结，仅供⼤家学习参考，⽇常积累，希望对⼤家有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。