首页 > 代码库 > JavaScript模板引擎实例应用

JavaScript模板引擎实例应用

2024-09-15 00:11:48   216人阅读

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

artTemplate

这个还是比较有名的。

简介：

artTemplate-3.0 新一代 javascript 模板引擎https://github.com/aui/artTemplatetemplate.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=http://www.mamicode.com/"artTemplate/template.js"></script>

模板

<!--模板--><script id="js-tmp" type="text/html">    <div class="weui_media_box weui_media_text">        <a href=http://www.mamicode.com/"{{ 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=http://www.mamicode.com/"artTemplate/template-native.js"></script>

模板

<!--模板--><script id="js-tmp" type="text/html">    <div class="weui_media_box weui_media_text">        <a href=http://www.mamicode.com/"<%= 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="http://www.mamicode.com/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 = http://www.mamicode.com/{>

　　

JavaScript模板引擎实例应用


联系
我们