之前项目里有遇到在DOM中增加大量的html结构的时候,傻乎乎的在js中写一堆模版,然后用replace一个一个做替换。当时就是难看了点,不觉得啥,现在了解了模版引擎之后回头来看真的比较捉急了,以后是不会那么傻了。

今天就介绍一下个人认为比较好用的一个模版引擎,Underscore中的template方法,我觉得underscore这个库真的不错,有计划边看源码边分析学习,到时候也会总结一些心得吧。

_.template(templateString, [data], [settings])

这是template方法的api,可接受三个参数,其中:

第一个参数也是必须的参数是模版字符串,你可以通过<%=  %> 来插入变量,还可以通过<%  %>来插入js代码,也可以通过<%-  %>来进行html转义,如果变量很多,可以使用<% print() %>来简化。

第二个参数是传入模版的数据,如果不传第二个参数,那么这个方法会返回一个模版函数,这个模版函数可以穿入数据返回完成的模版,如果传入data参数则会直接返回一个已完成的模版。

第三个参数是设置,比如这个方法默认是寻找<%  %>来进行替换,可以通过设置它来改变具体的方法可以参照这里

用法其实很简单

var cmpiled = _.template("hello <%= name %>");
compiled.({name: mike}); // "hello mike"

可以注意到,模版中可以插入js代码,那么对于很长的带有相当重复性的内容,可以做这样的处理

<script type="text/template" id="tpl">
<% _.each(data, function(n){ %>
<p>姓名:<%= n.name %>,年龄:<%= n.age %>,性别:<%= n.sex %></p>
<% }); %>
</script>
var data = [
{
name: 'mike',
age: 18,
sex: '男'
},
{
name: 'nina',
age: 20,
sex: '女'
},
{
name: 'elle',
age: 26,
sex: '女'
}
];
$('body').append(_.template($('#tpl').html(), data));

这样在js代码中就可以只作数据处理,而不用出现那一串又臭又长的模版字符串,大大提高了代码可读性,也在某种意义上实现了数据和表现的分离。

Underscore模版引擎的使用-template方法的更多相关文章

  1. JavaScript模板引擎artTemplate.js——template()方法

    template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染 ...

  2. JavaScript模板引擎artTemplate.js——template.compile()方法

    template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...

  3. T4((Text Template Transformation Toolkit))模版引擎之基础入门 C#中文本模板(.tt)的应用

    1 关于C#中文本模板(.tt)的简单应用https://blog.csdn.net/zunguitiancheng/article/details/78011145 任何一个傻瓜都能写出计算机能理解 ...

  4. Smarty模版引擎的原理

    Smarty是一个使用php写出来的模版引擎,用来将原本与html代码混杂在一起PHP代码逻辑分离,实现前后端分离. Smarty模板优点: 1. 速度:采用Smarty编写的程序可以获得最大速度的提 ...

  5. 简单JavaScript模版引擎优化

    在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...

  6. PHP模版引擎 – Twig

    在网站开发过程中模版引擎是必不可少的,PHP中用的最多的当属Smarty了.目前公司系统也是用的Smarty,如果要新增一个页面只需把网站的头.尾和左侧公共部分通过Smarty的include方式引入 ...

  7. T4教程1 T4模版引擎之基础入门

    T4模版引擎之基础入门   额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又在背后默默无闻的奉献着,直到现在我们项目组的人除了我之外,其它人还是对其豪无兴趣,基本上是连看一眼都懒得看 ...

  8. 黄聪:VS2010开发T4模版引擎之基础入门

    原文:http://www.cnblogs.com/lzrabbit/archive/2012/07/15/2591085.html 额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又 ...

  9. 模版引擎(NVelocity)开发

    在net中用模版开发,在handler中用到了大量的html代码.为解决这个问题,我可以采用模版引擎(NVelocity)进行开发.1.首先需要将NVelocity.dll文件放入项目,其次引用.2. ...

随机推荐

  1. sorted()&enumerate()

    d = {1:2,3:1,44:5,4:5,7:8}l = d.items() #转换为列表print(l)  # dict_items([(1, 2), (3, 1), (44, 5), (4, 5 ...

  2. html 更新

    HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5 ...

  3. .NET MVC ToList() 转Json

    #region 方法一 #region ToList()转json /// <summary> /// 通过类别 Id 获相应产品 /// </summary> /// < ...

  4. vb 使用StreamWriter书写流写出数据并生成文件

    sql = "Select case when date ='' then '0'else CONVERT(varchar(100), date, 101) end as date,case ...

  5. ubuntu16.04安装python3,numpy,pandas等量化计算库

    ubunt安装python3 sudo add-apt-repository ppa:fkrull/deadsnakessudo apt-get updatesudo apt-get install ...

  6. 2018-2019-2 《网络对抗技术》Exp5 MSF基础应用 Week7-8 20165233

    Exp5 MSF基础应用 目录 一.基础问题 二.攻击实例 主动攻击 ms08_067_netapi(成功) ms10_061_spoolss(失败) 针对浏览器的攻击 ms14_064_ole_co ...

  7. Linux编辑器|gedit|vi|vim编辑器

    gedit编辑器 gedit是一个Linux环境下的文本编辑器,类似windows下的写字板程序,在不需要特别复杂的编程环境下,作为基本的文本编辑器比较合适. sublime编辑器 Sublime T ...

  8. 机器学习入门-提取文章的主题词 1.jieba.analyse.extract_tags(提取主题词)

    1.jieba.analyse.extract_tags(text)  text必须是一连串的字符串才可以 第一步:进行语料库的读取 第二步:进行分词操作 第三步:载入停用词,同时对分词后的语料库进行 ...

  9. Spring MVC 异常处理 - SimpleMappingExceptionResolver

    希望对一些异常统一处理,他将异常类名映射为视图名,即发生异常时使用对应的视图报告异常.

  10. 19 网络编程--Socket 套接字方法

    1.Socket(也称套接字)介绍 socket这个东东干的事情,就是帮你把tcp/ip协议层的各种数据封装啦.数据发送.接收等通过代码已经给你封装好了 ,你只需要调用几行代码,就可以给别的机器发消息 ...