JS模板工具lodash.template的用法

最新推荐文章于 2023-06-30 20:08:57 发布

温暖会追上来的.

最新推荐文章于 2023-06-30 20:08:57 发布

阅读量7.2k

点赞数

分类专栏：前端HTML+CSS+JS基础

本文链接：https://blog.csdn.net/Strawberry_595/article/details/88984468

版权

前端HTML+CSS+JS基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

underscore的template方法是比较常用的JS模板工具，它的好处是，你不用额外找工具了，通常你的项目都会加载一个underscore。

template _.template(templateString, [settings])
将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data对象。如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数. 参数 settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b>&lt;script&gt;</b>"

也可以在 JavaScript 代码中使用 print. 有时候这会比使用 <%= ... %> 更方便.

var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"

如果ERB式的分隔符您不喜欢, 您可以改变Underscore的模板设置, 使用别的符号来嵌入代码.定义一个 interpolate 正则表达式来逐字匹配嵌入代码的语句, 如果想插入转义后的HTML代码则需要定义一个 escape 正则表达式来匹配,还有一个 evaluate 正则表达式来匹配您想要直接一次性执行程序而不需要任何返回值的语句.您可以定义或省略这三个的任意一个.例如, 要执行Mustache.js类型的模板:

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

默认的, template 通过 with 语句来取得 data 所有的值. 当然, 您也可以在 variable 设置里指定一个变量名. 这样能显著提升模板的渲染速度.

_.template("Using 'with': <%= data.answer %>", {variable: 'data'})({answer: 'no'});
=> "Using 'with': no"

预编译模板对调试不可重现的错误很有帮助. 这是因为预编译的模板可以提供错误的代码行号和堆栈跟踪, 有些模板在客户端(浏览器)上是不能通过编译的在编译好的模板函数上, 有 source 属性可以提供简单的预编译功能.

<script>
  JST.project = <%= _.template(jstText).source %>;
</script>

nodejs中：推荐：

data是填充的数组数据；

file是html文件；

返回的file是被填充好的html文件；

      if(data) {
        let compiled = _.template(file)
        file = compiled(data)
        // console.log(file)
      }

把下面代码保存成html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>

<script type="text/template" id="tpl1">
<% _.each(datas, function (item) { %>
    <div class="outer">
        <%= item.film %> - <%= item.url %> - <%= item.director %>
    </div>
<% }); %>
</script>
<script type="text/template" id="tpl2">
<% if ( 2 + 4 === 6 ) {
    _.each(datas, function (item) { %>
        <div class="outer">
            <%= item.film %> - <%= item.url %> - <%= item.director %>
        </div>
    <% });
} %>
</script>

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript">
var datas = [
    {
        film: '电影名称1',
        url: 'http://www.baidu.com',
        director: '导演名称1'
    },
    {
        film: '电影名称2',
        url: 'http://www.baidu.com',
        director: '导演名称2'
    },
    {
        film: '电影名称3',
        url: 'http://www.baidu.com',
        director: '导演名称4'
    },
    {
        film: '电影名称4',
        url: 'http://www.baidu.com',
        director: '导演名称4'
    },
];

$('#example1').html( _.template($('#tpl1').html(), datas) );
$('#example2').html( _.template($('#tpl2').html(), datas) );
</script>

</body>
</html>

_.template(templateString, [settings])

下划线变量是underscore变量的别称。

templateString是一个模板字符串，template函数负责解析这个模板字符串，所以这个模板字符串需要按规矩写，根据官方的介绍，这个字符串本质是js、标识符、html代码三者糅合的字符串。

<script type="text/template" id="tpl">
<% _.each(datas, function (item) { %>
    <div class="outer">
        <%= item.film %> - <%= item.url %> - <%= item.director %>
    </div>
<% }); %>
</script>

type="text/template"是为了让浏览器不把这个script内的内容当做js来解析，同时script的display:none还继续生效，保证模板字符串不会被显示出来。

模板里凡是js代码，要被<% … %>包裹起来，比如<% _.each(datas, function (item) { %>和<% }); %>。对于列表内容，这句代码足够用了。

模板里凡是变量代码，要被<%= … %>包裹起来，比如<%= item.film %>、<%= item.url %>和<%= item.director %>。

所以，我们写代码的方式可以是先写JS代码，然后写HTML代码，然后把JS代码用<% … %>包裹起来，以及把HTML代码中的变量用<%= … %>包裹起来，这样就能满足90%的日常需要了。

[settings]是一个json数组，数组的每个元素都是一个json对象，这个json数组负责提供内容。

温暖会追上来的.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS模板工具lodash.template的用法

underscore的template方法是比较常用的JS模板工具，它的好处是，你不用额外找工具了，通常你的项目都会加载一个underscore。template _.template(templateString, [settings])将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。...
复制链接

扫一扫