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

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}}

 

有疑问或技术交流，扫描公众号一起讨论学习。

更多React在线学习访问：http://each.sinaapp.com/react/index.html

更多实例应用扫码体验：