fremarker模板引擎 js如何获取值

转载

deanyuancn 2024-10-31 19:09:09

文章标签 html javascript HTML 文章分类 机器学习人工智能

一、简介

ArtTemplate是腾讯开发的一款使用方便、性能卓越javascript模板引擎,其渲染效率极其快。ArtTemplate的库分为两种,一个是template.js,这个是简单的语法版本。另一个是template-native.js，是原生的语法版本;,两个库的语法不可混用,否则会出错。本文主要讲解简单的语法版本。

二、原理

虽然每个引擎从模板语法、语法解析、变量赋值、字符串拼接的实现方式各有所不同，但关键的渲染原理仍然是动态执行 javascript 字符串。template.js，在上述模板引擎实现原理中，因为要对模板变量进行赋值，所以每次渲染都需要动态编译 javascript 字符串完成变量赋值。而 artTemplate 的编译赋值过程却是在渲染之前完成的，这种方式称之为“预编译”。

三、特性

1.性能卓越,执行速度通常是Mustache与tmpl的20多倍(性能测试)

2.支持运行时调试,可精确定位异常模板所在语句(演示)

3.对NodeJS Express友好支持

4.安全,默认对输出进行转义,在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)

5.支持include语句,可导入定义的其它模块

6.可在浏览器端实现按路径加载模板(详情)

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

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

9.支持所有流行的浏览器

10.丰富的自定义配置

11.支持数据过滤

12.异常捕获功能

四、使用方法（简介版语法）

1.if--else语法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>if -- else</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="test">
    {{if isAdmin}}
    姓名：<span>{{admin.name}}</span><br>
    性别：<span>{{admin.sex}}</span><br>
    职务：<span>{{admin.position}}</span>
    {{else}}
    姓名：<span>{{staff.name}}</span><br>
    性别：<span>{{staff.sex}}</span><br>
    职务：<span>{{staff.position}}</span>
    {{/if}}
</script>
<script type="text/javascript">
    data = {
        isAdmin: true,
        admin: {name: '张三', sex: '男', position: "部门经理"},
        staff: {name: '李四', sex: '男', position: "普通员工"}
    }
   var  html = template('test',data);
    document.getElementById("app").innerHTML = html;
</script>
</body>
</html>

2.each

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>each</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="test">
  {{if isAdmin}}
    <h1>{{title}}</h1>
  {{each list as value index}}
    <ul>
        <li>{{index + 1}} : {{value}}</li>
    </ul>
  {{/each}}
    {{/if}}
</script>
<script type="text/javascript">
    var data = {
        isAdmin:true,
        title:'球类运动',
        list:['足球','篮球','排球','棒球','网球','羽毛球','乒乓球']
    }
    var html = template('test',data);
    document.getElementById('app').innerHTML = html;
</script>
</body>
</html>

3.转义

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>转义</title>
    <script type="text/javascript" src="../static/template.js"></script>
</head>
<body>
<h1>不转义HTML</h1>
<div id="content"></div>
<script type="text/html" id="test">
<p>不转义：{{#value}}</p>
<p>默认转义：{{value}}</p>
</script>
<script type="text/javascript">
    var data = {
        value:'<span style="color: green">hello world</span>'
    };
    var html = template('test',data);
    document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

4.嵌套

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>include</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="topicPart">
    <h1>题目：{{topic}}</h1>
    <ul>
        {{each optionList as value index}}
        <li>{{value.ind}} . {{value.val}}</li>
        {{/each}}
    </ul>
    {{include 'anserPart'}}
</script>
<script type="text/html" id = "anserPart">
    <span>参考答案：{{anser}}</span>
</script>
<script type="text/javascript">
   var  data = {
       topic:'1+1=?',
       optionList:[
           {ind:'A',val:2},
           {ind:'B',val:1},
           {ind:'C',val:3},
           {ind:'D',val:4},
       ],
       anser:"A"
   }
   var html = template("topicPart",data);
   document.getElementById("app").innerHTML = html;
</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>test template</title>
    <script type="text/javascript" src="../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="main">
<ul>
    {{each list}}
    <li>{{$value}}</li>
    {{/each}}
</ul>
</script>
<script type="text/html" id="test">
<div>
    <ul>
        {{each person}}
        <li>{{$value.name}}</li>
        {{/each}}
    </ul>
    {{include 'main' a}}
</div>
</script>
<script type="text/javascript">
    var data = {
        person:[
            {name:"jack",age:18,sex:1},
            {name:"tom",age:19,sex:0},
            {name:"jerry",age:20,sex:0},
            {name:"kid",age:21,sex:1},
            {name:"jade",age:22,sex:0},
            {name:"lrving",age:23,sex:1},
        ],
        a:{
            list:['足球','篮球','排球','棒球','网球','羽毛球','乒乓球']
        }
    };
    var html = template('test',data);
    document.getElementById('app').innerHTML = html;
</script>
</body>
</html>

5.自定义函数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>自定义函数</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../static/template.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/html" id="test">
    {{if isAdmin}}
    姓名：<span>{{admin.name}}</span><br>
    性别：<span>{{getSex(admin.sex)}}</span><br>
    职务：<span>{{admin.position}}</span>
    {{else}}
    姓名：<span>{{staff.name}}</span><br>
    性别：<span>{{getSex(staff.sex)}}</span><br>
    职务：<span>{{staff.position}}</span>
    {{/if}}
</script>
<script type="text/javascript">
    template.helper('getSex',function (sex) {
        if(1 == sex){
            return '男';
        }else if(0 == sex){
            return '女';
        }
    })
    data = {
        isAdmin: true,
        admin: {name: '张三', sex: '1', position: "部门经理"},
        staff: {name: '李四', sex: '0', position: "普通员工"}
    }
   var  html = template('test',data);
    document.getElementById("app").innerHTML = html;
</script>
</body>
</html>

五、总结

这里只是简单的介绍了ArtTemplate的基本用法，更深入的用法，希望各位在使用的过程中，进行深入的学习，下一篇文章，会介绍阿里开发的javaScript引擎模板Velocity。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。