js中使用HTML模板字符串

一、简介

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

js中使用HTML模板字符串相关推荐

js中json数组和字符串互转
js中json数组和字符串互转 const jsonStr1 = JSON.stringify( res.responseObject); //json转字符串.//const area = J ...
js中的concat函数-字符串拼接+数组拼接
js中的concat函数-字符串拼接+数组拼接一.concat() 方法用于字符串拼接字符串 let str1 = "abc"let str2 = "123" ...
JS中怎样将时间字符串转换成Date并比较大小
场景在js中通过前端日期选择控件获取的时间参数为字符串"2020-09-30" 现在要将其转换为Date类型并与当前日期进行对比,看是否在当前日期之前. 注: 博客: https ...
java和js中判断两个字符串是否相等对比
链接一: JavaScript中的基本字符串与字符串对象的区别链接二: JAVA如何判断两个字符串是否相等链接三: js中的"=="和equals()以及is()三者的区别在 ...
关于js中replace()只能替换字符串中第一个对象的问题
工作中用到js的replace比较多,将一个字符串中某个内容替换成另一个内容,但是往往只找到第一个符合条件的内容后就不往后替换了,可以用正则来解决此问题. var a="aaa,bbb,cc ...
js中的数组和字符串的一些方法
数组的一些方法: 1.join()和split()方法 <script type="text/javascript"> var x; var a=new Array() ...
JS中的数组和字符串
1.Array对象用于定义数组 //方式一var arr=new Array(1,2,3);alert(arr);//方式二 var arr=[1,2,3]; alert(arr); //特点:JS数 ...
js中判断两个字符串是否相等
在javascript判断两个变量值是否相等,可以使用 ==(等同)操作符或者 ===(恒等)操作符 == 操作符 "等同"操作符,简单判断2个变量值是否相等,变量类型不一致时, ...
js中常用的操作字符串的方法大全
charCodeAt()返回一个整数,代表指定字符的Unicode编码 fromCharCode()从一些Unicode字符串得到一个字符串 charAt()根据指定下标位置返回对应字符,如果下标超 ...
js中数组拼接成字符串
在本例中,我们将使用分隔符来分隔数组中的元素: <script type="text/javascript">var arr = new Array(3) arr[0] ...

js中使用HTML模板字符串

一、简介

二、方法

三、总结

js中使用HTML模板字符串相关推荐

最新文章

热门文章