使用JavaScript模板遇到的错误_js 模板库处理不了{{}}-CSDN博客

在制作一个简单的图片直播网页时，作者遇到了在移动端访问时JavaScript模板不显示的问题。通过尝试和错误定位，发现问题是由于`replaceAll`方法在某些环境中不被支持。通过引入百度的js模板库并修改相关JS方法，成功解决了问题。同时提醒在HTML中引入JS文件时，要避免缓存问题，可使用时间戳参数。

最近做了一个简易的图片直播网页，就一个html页面，所以就懒得搞vue什么的，想着直接一个JavaScript就差不多OK了。万万没想到差点栽在这个纯JavaScript上了。

遇到的问题

模板

<script id="J_picTpl" type="template">
    <li class="col-md-3 post">
        <figure>
            <img src="url" data-id="{id}">
            <figcaption>
                <h3>{title}</h3>
                <span>{datetime}</span>
            </figcaption>
        </figure>
    </li>
</script>

js语句

...
let template = $("#J_picTpl").html();
let html = template.replaceAll('url', item.coverUrl);
...

好，那么问题来了，正常情况下，在pc端，无论是哪个浏览器，都是没有任何问题的。

但是，谁能告诉我为什么移动端访问，甚至就是pc端的微信访问都会不显示模板呢？？

最让人头痛的还是没想到问题出在哪里了，这里我是找到了错误是replaceAll导致的，当你不知道的情况下，移动端都没有控制台，也不知道错误在哪里。

还好我的Java经验告诉了我，try catch是个好东西，JavaScript也有

加上

try {
	...
	let template = $("#J_picTpl").html();
	let html = template.replaceAll('url', item.coverUrl);
	...
}catch(err) {
	// 我用的layui，如果没有的话可以直接把结果通过$("id").html输出到页面上
	layer.msg(err.message)
}

移动端运行后显示错误是template.replaceAll不是一个方法

行吧，原生模板的问题，那我换个js模板呗

搜了一下用了百度js模板完美解决，这里记录一下解决方法

引入js包

<script type="text/javascript" src="js/baiduTemplate.js"></script>

编写模板文件

<script id="J_picTpl" type="text/template">
    <li class="col-md-3 post">
        <figure>
            <img lay-src="<%=src%>" data-id="<%=id%>">
            <figcaption>
                <h3><%=title%></h3>
                <span><%=datatime%></span>
            </figcaption>
        </figure>
    </li>
</script>

其他用法可以参考他的文档，我这里只是简单的替换，就没搞那些花里胡哨的了

改写js方法

// 使用百度模板
let bt = baidu.template;
// 模板中的数据
let date = {
	src: "",
	id: 0,
	title: "",
	datatime: ""
}
...
date.src = "https://xxxx/xxx.png";
date.id = 11;
title = "title";
datetime = "2021年1月5日";
...
let outHtml = baidu.template('J_picTpl', date);
// outHtml就是渲染出来的页面代码
$("#id").html(outHtml);
...