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模板的一些总结,仅供大家学习参考,日常积累,希望对大家有所帮助。

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值