http://www.cnblogs.com/52fhy/p/5393673.html

artTemplate 不支持requre.js，悲剧啊，只能用juicer啊

这个还是比较有名的。

简介：

artTemplate-3.0 新一代 javascript 模板引擎

https://github.com/aui/artTemplate

template.js (简洁语法版, 2.7kb)

支持if等语句{{ if admin }}   {{/if}}

template(id, data)

根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。

如果没有 data 参数，那么将返回一渲染函数。

性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）

支持运行时调试，可精确定位异常模板所在语句（演示）

对 NodeJS Express 友好支持

安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）

支持include语句

可在浏览器端实现按路径加载模板（详情）

支持预编译，可将模板转换成为非常精简的 js 文件

模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选

支持所有流行的浏览器

artTemplate区分简洁语法版和原生语法版。这里先演示简洁语法版。

使用前同样先引入artTemplate.js:

<script src="artTemplate/template.js"></script>

模板

<!--模板-->

<script id="js-tmp" type="text/html">

    <div class="weui_media_box weui_media_text">

        <a href="{{ url }}" class="" target="_blank">

            <h4 class="weui_media_title">{{ title }}</h4>

        </a>

        <p class="weui_media_desc">{{ desc }}</p>

    </div>

</script>

<!--/模板-->

注意这里模板与前面的示例不一样了，直接使用一个type="text/html"的script标签存放模板。artTemplate不支持textarea标签。

模板里变量使用{{ 变量 }}占位。

js代码

/本例不再需要手动取模板内容

//var htmlTemp = $("textarea.js-tmp").val();

$.each(data, function(i,el) {

    htmlList += template("js-tmp", el); //注意第一个参数是id

});

artTemplate使用基于document.getElementById(id)的方式直接获取模板内容。这一点与其它模板有点不同，需要注意。

下面再看看artTemplate原生语法版。
需要引入替换成：

<script src="artTemplate/template-native.js"></script>

模板

<!--模板-->

<script id="js-tmp" type="text/html">

    <div class="weui_media_box weui_media_text">

        <a href="<%= url %>" class="" target="_blank">

            <h4 class="weui_media_title"><%= title %></h4>

        </a>

        <p class="weui_media_desc"><%= desc %></p>

    </div>

</script>

<!--/模板-->

原生语法版的artTemplate模板也不一样，使用<%= 变量 %>的方式表示变量。

js代码
无需改动，和上面简洁语法版是一样的。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>basic-demo</title>

<script src="../../lib/template.js"></script>

</head>

<body>

<div id="content"></div>

<script id="test" type="text/html">

{{if isAdmin}}

<h1>{{title}}</h1>

<ul>

    {{each list value i}}

        <li>索引 {{i + 1}} ：{{value}}</li>

    {{/each}}

</ul>

{{/if}}

{{$data}}

</script>

<script>

var data = {

	title: '基本例子',

	isAdmin: true,

	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

};

var html = template('test', data);

document.getElementById('content').innerHTML = html;

</script>

</body>

</html>

　　

js模板引擎之artTemplate的更多相关文章

  1. JS模板引擎 ：ArtTemplate （1）

    1.为什么需要用到模板引擎 我们在做前端开发的时候,有时候经常需要根据后端返回的json数据,然后来生成html,再显示到页面中去. 例如这样子: var data = [ {text: " ...

  2. JS模板引擎 ：ArtTemplate （2）

    上一篇初略的介绍了一下javascript中的模板引擎,有兴趣的可以戳 这里 . 这一篇将带着大家一起做一个简易的模板引擎, 上一篇介绍到:模板引擎其实做的就是两件事. 根据一定的规则,解析我们所定义 ...

  3. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  4. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

  5. js模板引擎art-template使用方法

    art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...

  6. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  7. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  8. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

  9. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

随机推荐

  1. Prime Gift CodeForces - 912E (中途相遇)

    链接 大意:求素因子只含给定素数的第k大数 先二分答案转为判定x是第几大, 然后分两块合并即可, 按奇偶分块可以优化一下常数 #include <iostream> #include &l ...

  2. UVA-1626 Brackets sequence （简单区间ＤＰ）

    题目大意:给一个有小括号和中括号组成的序列,满足题中的三个条件时,是合法的.不满足时是不合法的,问将一个不合法的序列最少添加几个括号可以使之变成合法的.输出最短合法序列. 题目分析:这是<入门经 ...

  3. Silverlight 5 Developer Rumtime

    因为更新了Silverlight SDK,所以也要更新相应的Silverlight开发运行时. Silverlight 5 Developer Rumtime (32bit): http://go.m ...

  4. maven 3.5.2 修改java_home

        修改mvn.cmd文件,找到: @REM ==== START VALIDATION ==== if not "%JAVA_HOME%" == "" g ...

  5. css div居中

    div中没有text-align和vehicle-align这两个属性,所在在css中设置这两个值没有作用 div 水平居中 设置左右边距有auto div{ margin: 0 auto; } 垂直 ...

  6. js 数组复制问题

    师兄面试回来问个问题,js中数组怎么复制,工作中没遇到,面试也涨见识 了,他给我说了下,太晚没留心,打早起来研究下,写个dom,来看下 代码如下 <!doctype html> <h ...

  7. 比较强大 优秀的开源框架 ：Android图片加载与缓存：Android Glide 的用法

    使用Android Glide,需要先下载Android Glide的库,Android Glide在github上的项目主页: https://github.com/bumptech/glide . ...

  8. Allow Zero Length 允许空字符串 ACCESS

    http://www.360doc.com/content/11/0118/20/991597_87447868.shtml https://microsoft.public.data.ado.nar ...

  9. spring入门程序编写

    1.导入jar包

  10. js中的深层复制

    同java一样,数据的复制,不小心就是一个浅复制,莫名其妙的数据就被修改了,所以我们需要考虑深层复制的问题.这里提供一个深层复制的方法. 1.脚本 /** * 深层复制 */ cloneObject ...