JS模板工具lodash.template的用法

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("<%- value %>");
template({value: '

nodejs中：推荐：

data是填充的数组数据；

file是html文件；

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

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

 

 

把下面代码保存成html：

_.template(templateString, [settings])

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

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

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数组负责提供内容。