JavaScript模板引擎实例应用

时间 2019-11-30

原文原文链接

在以前的一篇名为《移动端基于HTML模板和JSON数据的JavaScript交互》的文章中，我向你们说明了为何要使用JavaScript模板以及如何使用，文末还提到了laytpl、artTemplate、doT、baiduTemplate、kissyTemplate等模板引擎。javascript

本文将举实例向你们讲解几个经常使用模板引擎的简单使用。css

演示地址：
模板引擎示例
http://me.52fhy.com/demo/jstemp/html

准备工做

演示数据：blog.json
结构：前端

{
    "list": [
        {
            "title": "这是title",
            "url": "http://www.cnblogs.com/52fhy/p/5271447.html",
            "desc": "摘要"
        },
        {
            "title": "这是title2",
            "url": "http://www.cnblogs.com/52fhy/p/4823390.html",
            "desc": "摘要"
        }]
}

html页面：java

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>demo</title>
    <!--weui.css仅为快速的作出页面，可删除-->
    <link rel="stylesheet" href="static/weui.css"/>
    <script src="static/zepto.min.js"></script>
</head>
<body>
    <div class="weui_panel weui_panel_access">
        <!--内容展现区：实际演示将会去掉，使用js动态生成-->
        <div class="weui_panel_hd">文字组合列表</div>
        <div class="weui_panel_bd">
            <div class="weui_media_box weui_media_text">
                <h4 class="weui_media_title">标题一</h4>
                <p class="weui_media_desc">由各类物质组成的巨型球状天体，叫作星球。星球有必定的形状，有本身的运行轨道。</p>
            </div>
        </div>
        <!--/内容展现区-->
    </div>
    
<script type="text/javascript">
    $(function(){
        $.ajax({
            url: 'static/blog.json',
            type: 'get',
            dataType: 'json',
            success: function (response) {
                //后文主要改动的地方之一
                //这里暂时为空
            },
            error: function (jqXHR, textStatus, errorThrown) {
                if (textStatus == 'timeout') {
                    alert('请求超时');
                    return false;
                }
                console.log(jqXHR.responseText);
            },
        });
    });
</script>
</body>

下文将讲解使用ajax获取数据并显示到页面的『内容展现区』。node

不使用模板

这种方式是你们见过或者使用最多的了：git

模板
无需模板。github

js代码
在success里面加上代码：ajax

var htmlList = '';
var data = response.list;

$.each(data, function(i,el) {
    htmlList +='<div class="weui_media_box weui_media_text">'+
        '<a href="'+ el.url +'" target="_blank"><h4 class="weui_media_title">'+ el.title +'</h4></a>'+
        '<p class="weui_media_desc">'+ el.desc +'</p>'+
    '</div>';
});

$('.js-blog-list').empty().append(htmlList);

代码里明显看到一大堆的拼接符号，显得不是很优雅，不方便后期维护。json

简单的模板引擎

这里不须要引入第三方模板引擎插件，本身写一个：

/*
 * 实现简单模板渲染功能  不支持对象嵌套
 * 不支持if等语句
*/
String.prototype.temp = function(obj) {
    return this.replace(/\$\w+\$/gi, function(matchs) {
        
        var returns = obj[matchs.replace(/\$/g, "")];       
        return (returns + "") == "undefined"? "": returns;
    });
};

记得放到页面的js代码里。

模板

<!--模板-->
<textarea class="js-tmp" style="display:none;">
    <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>
</textarea>
<!--/模板-->

变量使用$$占位。

这里的模板放在 <textarea> 中，通常状况设置其CSS样式display:none来隐藏掉textarea。

还有一种方式是模板放在 <script> 中，设置type属性为text/template或text/html，用id标识:

<script id='test1' type="text/template">
<!-- 模板部分 -->

<!-- 模板结束 -->   
</script>

你们喜欢哪一种就使用哪一种。

js代码

var htmlList = '';
var data = response.list;
var htmlTemp = $("textarea.js-tmp").val(); //读取模板内容

$.each(data, function(i,el) {
    htmlList += htmlTemp.temp(el); //模板渲染并生成最终内容
});

$('.js-blog-list').empty().append(htmlList);

代码量并很少，比较简单。注意temp方法来源于String.prototype.temp。

laytpl

上一篇文章也介绍过这个模板引擎，这里很少介绍，你们能够去其官网看详细信息。

简介：

laytpl官网 - 精妙的JavaScript模板引擎  http://laytpl.layui.com/
            
支持if等语句{{# if(){ //some code ... }}   {{# } }}

模版语法:
输出一个普通字段，不转义html：   {{ d.field }}
输出一个普通字段，并转义html：   {{= d.field }}
JavaScript脚本： {{# JavaScript statement }}

使用前须要引入laytpl.js：

<script src="laytpl/laytpl.js"></script>

模板

<!--模板-->
<textarea class="js-tmp" style="display:none;">
    <div class="weui_media_box weui_media_text">
        <a href="{{d.url}}" class="" target="_blank">
            <h4 class="weui_media_title">{{d.title}}</h4>
        </a>
        <p class="weui_media_desc">{{d.desc}}</p>
    </div>
</textarea>
<!--/模板-->

laytpl模板引擎使用{{d.变量}}表示变量。注意不要忘记了前缀d.，任何状况都要加上。这也算是模板的一大特点。

js代码
js代码很简单，这里不所有复制过来了，仅显示与简单的模板引擎有区别的：

$.each(data, function(i,el) {
    //htmlList += htmlTemp.temp(el);
    htmlList += laytpl(htmlTemp).render(el);//模板渲染并生成最终内容
});

很简单吧！注释的那一行是简单的模板引擎所用的代码，这里进行对比。这里很少作解释。

underscore

underscore是个js工具库，其种_.underscore()方法支持模板功能。

简介：

Underscore.js(1.8.3) 
中文文档 http://www.css88.com/doc/underscore/
            
template_.template(templateString, [settings]) 
将 JavaScript 模板编译为能够用于页面呈现的函数, 对于经过JSON数据源生成复杂的HTML并呈现出来的操做很是有用。

模板函数可使用 <%= … %>插入变量, 也能够用<% … %>执行任意的 JavaScript 代码。 若是您但愿插入一个值, 并让其进行HTML转义,请使用<%- … %>。 当你要给模板函数赋值的时候，能够传递一个含有与模板对应属性的data对象 。 

若是您要写一个一次性的, 您能够传对象 data 做为第二个参数给模板 template 来直接呈现, 这样页面会当即呈现而不是返回一个模板函数。

使用前须要引入underscore-min.js。

模板

<!--模板-->
<textarea class="js-tmp" style="display:none;">
    <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>
</textarea>
<!--/模板-->

underscore使用<%= 变量 %>进行表示。

js代码
这里一样仅展现与上例不同的地方：

$.each(data, function(i,el) {
    //能够这样：
    //var compiled = _.template(htmlTemp);
    //htmlList += compiled(el);
    
    /*或者*/
    htmlList += _.template(htmlTemp)(el);
});

使用方法其实很类似。

artTemplate

这个仍是比较有名的。

简介：

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代码
无需改动，和上面简洁语法版是同样的。

BaiduTemplate

宣称『最简单好用的JS模板引擎，JS语法学习无成本』。

简介：

百度JS模板引擎 baiduTemplate 1.0.6 版 http://tangram.baidu.com/BaiduTemplate/
https://github.com/wangxiao/BaiduTemplate

//方法一：直接传入data，返回编译后的HTML片断
var html0 = baidu.template(tpl,data);  

//或直接传入id便可
var html0 = baidu.template('test1',data);  


支持if等语句<% if(admin) %>   <%}%>

使用前引入：

<script src="BaiduTemplate/baiduTemplate.js"></script>

模板

<!--模板-->
<textarea class="js-tmp" id="js-tmp" style="display:none;">
    <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>
</textarea>
<!--/模板-->

使用<%= 变量 %>的方式表示变量。

js代码

var htmlTemp = $("textarea.js-tmp").val();
                        
$.each(data, function(i,el) {
    //htmlList += baidu.template(htmlTemp,el);
    
    //或者经过ID直接获得模板内容:
    htmlList += baidu.template("js-tmp",el);
});

使用很灵活，值得一试。

doT

文档是英文的，且不是很详细。但想一想用法也是差很少的。

简介：

doT.js  https://github.com/olado/doT
olado/doT: The fastest + concise javascript template engine for nodejs and browsers. Partials, custom delimiters and more.

用法相似underscore的_.template

引入doT.min.js：

<script src="dot/doT.min.js"></script>

模板

<!--模板 ： 须要加对象前缀it-->
<textarea class="js-tmp" style="display:none;">
    <div class="weui_media_box weui_media_text">
        <a href="{{= it.url }}" class="" target="_blank">
            <h4 class="weui_media_title">{{= it.title }}</h4>
        </a>
        <p class="weui_media_desc">{{= it.desc }}</p>
    </div>
</textarea>
<!--/模板-->

和laytpl同样须要追加前缀。使用{{= it.变量 }}表示变量。

js代码

$.each(data, function(i,el) {
    //htmlList += _.template(htmlTemp)(el);

    htmlList += doT.template(htmlTemp)(el);
});

没什么好说的。这里加入了_.template的对比，你们看看。

Juicer

简介：

Juicer – 一个Javascript模板引擎的实现和优化 http://juicer.name/
PaulGuo/Juicer: A Light Javascript Templete Engine. https://github.com/PaulGuo/Juicer

当前最新版本: 0.6.14

Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎，使用 Juicer 能够是你的代码实现数据和视图模型的分离(MVC)。除此以外，它还能够在 Node.js 环境中运行。

引入juicer：

<script src="juicer/juicer-min.js"></script>

模板

<!--模板-->
<textarea class="js-tmp" style="display:none;">
    <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>
</textarea>
<!--/模板-->

模板表示变量的方式感受有点别扭，使用的${变量}。

js代码

$.each(data, function(i,el) {
    htmlList += juicer(htmlTemp,el);
});

文章到此结束，讲的比较简单。写完此文，已经晚上12点了。洗洗睡了，各位晚安。