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. HDU-3631 Shortest Path （floyd）

    Description When YY was a boy and LMY was a girl, they trained for NOI (National Olympiad in Informa ...

  2. 使用路径arc-七彩

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  3. 自定义实现spark的分区函数

    有时自己的业务需要自己实现spark的分区函数 以下代码是实现一个自定义spark分区的demo 实现的功能是根据key值的最后一位数字,写到不同的文件 例如: 10写入到part-00000 11写 ...

  4. 从零开始学习Vue(一)

    因为最近有个项目的需求是,微信公众号+IOS/Android APP, 界面都很类似. 以往的做法是APP是调用JSON接口,后台只负责提供接口. 而H5,我以前都是用Jquery,用来写手机网站总是 ...

  5. DevExpress v18.1新版亮点——ASP.NET篇（一）

    用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress ASP.NET v18.1 的新功能,快来下载试用新版本!点 ...

  6. DevExpress v17.2新版亮点—DevExtreme篇（一）

    用户界面套包DevExpress DevExtreme v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExtreme v17.2 的New Color Sche ...

  7. 使用easyui将json数据生成数据表格

    1.首先需要用script引入jquery和easyui文件.如图所示: 2.html页面设置如下: data-options里面设置的属性可根据需要自己定义,是否单选,是否设置分页等等. 3.引入e ...

  8. SWIFT显示底部的工具条

    有以下页面显示我的讯息,用户可以点击右上角的编辑按钮进入删除状态.点击编辑按钮后,按钮文字改为“取消”,左上角的按钮变为“全选”,同时显示底部工具条带有“删除”按钮 实现起来挺简单的,在正常状态下点击 ...

  9. HDU 1501 Zipper（DFS）

    Problem Description Given three strings, you are to determine whether the third string can be formed ...

  10. C语言基础:二维数组 分类： iOS学习 c语言基础 2015-06-10 21:42 16人阅读 评论(0) 收藏

    二维数组和一位数组类似. 定义: 数据类型 数组名[行][列]={{ },{ }....}; 定义时,一维(行)的长度可以省略,但是二维(列)的长度不可以省略.但是访问时,一定使用双下标. 二维数组的 ...