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. 转化为json方式函数

    1,我的数据格式是: {"message":"","code":0,"data":[{"Order" ...

  2. poj 1182 (带权并查集)

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 71361   Accepted: 21131 Description ...

  3. IOS UI-滚动视图（UIScrollView）

    #import "ViewController.h" /* 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤小是极其有限的,因此直接展示在⽤用户眼前的内容也相当有限 ...

  4. Linq的简介和基础知识学习

    学习LINQ之前,我们要知道LINQ是干什么,解决什么问题的,怎样学习? 一.LINQ简介 1.什么是LINQ? 什么是LINQ?LINQ中文翻译为语言集成查询(Language Integrated ...

  5. learning docker steps(6) ----- docker 镜像加速

    http://www.docker-cn.com/registry-mirror 通过 Docker 官方镜像加速,中国区用户能够快速访问最流行的 Docker 镜像.该镜像托管于中国大陆,本地用户现 ...

  6. Maven 入门篇 ( 上 )

    写这个 maven 的入门篇是因为之前在一个开发者会的动手实验中发现挺多人对于 maven 不是那么了解,所以就有了这个想法.这个入门篇分上下两篇.本文着重动手,用 maven 来构建运行 hello ...

  7. Goolge全球各国域名大全

    搜索过技术文章的朋友都知道,Google的搜索功力绝对是世界第一,仅仅搜索中文还体现不出Google的功力,如果大家是做外贸或者搜索其它语言的文章,就会知道Google的内涵有多少了.全世界的国家Go ...

  8. SharePoint 2013的100个新功能之内容管理（三）

    一:视频中的人 作为视频内容类型的一部分,一个新的栏"视频中的人"被加入到其中,可以指定视频中的人,作为视频的元数据.当你编辑视频属性时可以查看到该栏.更多信息 二:重建索引 一个 ...

  9. logback转义符与MDC

    关于MDC的使用,可以结合filter一块使用,将需要串联的上下文的关键信息,通过header进行传递,然后通过配置%X{userId}将信息打印出来. MDC.put("userId&qu ...

  10. 《C语言中分配了动态内存后一定要释放吗？》

    问:比如main函数里有一句 malloc(),后面没有free()1.那么当main结束后,动态分配的内存不会随之释放吗?2.如果程序结束能自动释放,那么还加上free(),是出于什么考虑? 答: ...