javascript:Lodash模板函数教程与实例了解Lodash模板 Lodash是一个流行的javascript库

了解Lodash模板

Lodash是一个流行的javascript库，它提供了简单实用的可重复使用的函数。它还提供了字符串模板操作。在本教程中，我们将通过实例介绍模板函数的基础知识。
这是以前关于Lodash库的文章的续篇

语法

_.template(templateString)

模板是用来格式化、绑定和显示javascript数据的。模板是由HTML代码和标记组成的字符串，与javascript数据相一致，并输出新的DOM元素。写一个模板和使用模板函数调用模板有两个部分

字符串模板声明

在HTML内容中使用脚本标签作为一个字符串。动态数据用javascript对象数据代替。这里的数据可以用一个变量来检索。变量是一个普通的字符串或任何对象，用下面的分隔符格式。对象的属性可以像普通方式一样被访问。变量在运行时被操作。
浏览器认为script标签是javascript代码，为了防止在浏览器中执行这个，请使用文本/模板类型。Id需要一个属性来检索javascript代码中的模板。

<script type="text/template" id="DemoTemplate">  
  <p>"Hello {{ name }}!"</p>  
</script>

数据可以用不同的方式插入

插值分界线

在这里，变量或表达式的结果在运行时被评估并返回这些数据。

语法

<%=variables/expression%>

在这里，变量或表达式的结果在运行时被评估，返回的数据就是这些。

转义定界符表达式

插入变量值或表达式的结果。使用_.escape()函数对以下字符进行转义语法

例子

_.template("Hello <%-name%>!", { name: "" })  
    'Hello !'

评估定界符

评估代码。代码可以包含循环和条件表达式。我们可以使用forEach和if else条件。

语法

<%code%>

例子

let template = _.template('<% if (marks >35 ) { %> passed! <% } else { %> Failed! <% } %>');  
template({  
  marks: 50  
});

使用函数代码调用模板字符串

使用jquery选择器获取带有id的模板，并将这个模板的HTML作为一个字符串传递给lodash模板函数。

<script>  
 var nameDisplayTempateStr = $('#nameDisplayTempate').html();  
    var nameData = {name:'kiran'};  
 var template=_.template(nameDisplayTempateStr);  
 var rendered=template(nameData);  
` $('#output').html(rendered);  
 </script>

浏览器上显示的输出是hello Kiran。