之前项目里有遇到在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. final修饰的类有什么特点

    变量定义为final,一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引用不可再变. 方法定义为final,是为了防止任何继承类改变它. 类定义为final, ...

  2. flask高阶

    内容: 1.进程线程复习 2.flask多线程的问题 3.线程隔离 4.LocalStack 5.flask上下文整理 6.多app应用 1.进程线程复习 (1)进程 进程是一个具有一定独立功能的程序 ...

  3. svn快速安装

    windows版本控制系统. 用VisualSVN server 服务端和 TortoiseSVN客户端搭配使用 软件下载 VisualSVN-Server:http://subversion.apa ...

  4. oracle imp dmp

    windows>cmd> imp userid=用户名/密码@orcl file=d:\nc60.dmp full=y imp userid=SYSTEM/password@orcl fi ...

  5. VBA 选择文件

    Private Function SelectFile(ByVal strFilter As String) As String    Dim FileName As Variant     '打开文 ...

  6. Reactjs 打包后 Tomcat 部署 404问题

    配置web.xml <error-page> <error-code>404</error-code> <location>/index.html< ...

  7. EL&jsp

    JSP 2.0(java server pages): EL 表达式 JSP九大内置对象及作用范围 JSP Directive JSP Action EL表达式: EL 算法(Arithmetic)表 ...

  8. 基于OpenGL编写一个简易的2D渲染框架-04 绘制图片

    阅读文章前需要了解的知识,纹理:https://learnopengl-cn.github.io/01%20Getting%20started/06%20Textures/ 过程简述:利用 FreeI ...

  9. Simple2D-14(音乐播放器)简介

    接下来文章中,会介绍一个简单的程序——音乐播放器.通过编写一个音乐播放器在 Simple2D 中加入两个库:音频库 bass 和界面库 ImGui. 下面是音乐播放器的预览图: 播放器的功能比较简单, ...

  10. MeToo, one year on

    表示转折/让步关系:but, however, nevertheless, whereas, although, despite, in spite of, still 表示比较或对比关系:simil ...