doT js模板引擎使用自定义函数进行渲染的两种方法

最新推荐文章于 2024-03-14 11:53:05 发布

原创最新推荐文章于 2024-03-14 11:53:05 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #众观千象 #每天进步一点点 #学习永无止境 #doTJs

js 专栏收录该内容

123 篇文章

订阅专栏

本文介绍了doT.js模板引擎的使用，强调其速度、小巧和优秀的渲染效果。文中通过两个解决方案——原生js函数和模板js函数，展示了如何在doT.js中进行自定义函数渲染。同时，提供了丰富的js模板引擎资源链接和React学习入口，鼓励读者进行技术交流和学习。

doT模板是一款js渲染模板引擎，速度快，文件小，渲染效果良好而著称。

官网-Logo，点击进入：

更多丰富js模板引擎，猛击：https://qiaolevip.github.io/frontend-template-engines/

doT模板Example：https://qiaolevip.github.io/frontend-template-engines/doT.html

解决方案1（原生js Fn）：

// 定义js函数
var maskText = function(text) {
  return text.replace(/(^.).*/g, '$1XXX');
};

// 模板引擎渲染
<div class="line">{{=maskText(it.top10[i-1].username)}}</div>

解决方案2（模板js Fn）：

// 模板里面定义函数
{{##def.maskText = function() {return '我在这里'}#}}

// 模板里面使用函数
{{#def.maskText()}}

更多模板传参函数调用：

// 自定义函数
{{##def.testFunctionWithParam = function(str) {
		return "My name is: " + str;
	}
#}}

// 使用自定义函数一
{{##def.mytestparam: {{=it.name}} #}}
{{#def.testFunctionWithParam(def.mytestparam)}}

// 使用自定义函数二
{{#def.testFunctionWithParam("\{\{=it.name\}\}")}}

// 自定义函数
{{##def.testParamDef:myparam:
My name is: {{=myparam}}
#}}

{{#def.testParamDef:it.name}}