JavaScript模板引擎实例应用

 

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

本文将举实例向大家讲解几个常用模板引擎的简单使用。

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

准备工作

演示数据：blog.json
结构：

  1. {
  2.     "list": [
  3.         {
  4.             "title": "这是title",
  5.             "url": "http://www.cnblogs.com/52fhy/p/5271447.html",
  6.             "desc": "摘要"
  7.         },
  8.         {
  9.             "title": "这是title2",
  10.             "url": "http://www.cnblogs.com/52fhy/p/4823390.html",
  11.             "desc": "摘要"
  12.         }]
  13. }

html页面：

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  5.     <title>demo</title>
  6.     <!--weui.css仅为快速的做出页面，可删除-->
  7.     <link rel="stylesheet" href="static/weui.css"/>
  8.     <script src="static/zepto.min.js"></script>
  9. </head>
  10. <body>
  11.     <div class="weui_panel weui_panel_access">
  12.         <!--内容展示区：实际演示将会去掉，使用js动态生成-->
  13.         <div class="weui_panel_hd">文字组合列表</div>
  14.         <div class="weui_panel_bd">
  15.             <div class="weui_media_box weui_media_text">
  16.                 <h4 class="weui_media_title">标题一</h4>
  17.                 <p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
  18.             </div>
  19.         </div>
  20.         <!--/内容展示区-->
  21.     </div>
  23. <script type="text/javascript">
  24.     $(function(){
  25.         $.ajax({
  26.             url: 'static/blog.json',
  27.             type: 'get',
  28.             dataType: 'json',
  29.             success: function (response) {
  30.                 //后文主要改动的地方之一
  31.                 //这里暂时为空
  32.             },
  33.             error: function (jqXHR, textStatus, errorThrown) {
  34.                 if (textStatus == 'timeout') {
  35.                     alert('请求超时');
  36.                     return false;
  37.                 }
  38.                 console.log(jqXHR.responseText);
  39.             },
  40.         });
  41.     });
  42. </script>
  43. </body>

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

不使用模板

这种方式是大家见过或者使用最多的了：

模板
无需模板。

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

  1. var htmlList = '';
  2. var data = response.list;
  4. $.each(data, function(i,el) {
  5.     htmlList +='<div class="weui_media_box weui_media_text">'+
  6.         '<a href="'+ el.url +'" target="_blank"><h4 class="weui_media_title">'+ el.title +'</h4></a>'+
  7.         '<p class="weui_media_desc">'+ el.desc +'</p>'+
  8.     '</div>';
  9. });
  11. $('.js-blog-list').empty().append(htmlList);

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

简单的模板引擎

这里不需要引入第三方模板引擎插件，自己写一个：

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

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

模板

  1. <!--模板-->
  2. <textarea class="js-tmp" style="display:none;">
  3.     <div class="weui_media_box weui_media_text">
  4.         <a href="$url$" class="" target="_blank">
  5.             <h4 class="weui_media_title">$title$</h4>
  6.         </a>
  7.         <p class="weui_media_desc">$desc$</p>
  8.     </div>
  9. </textarea>
  10. <!--/模板-->

变量使用$$占位。

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

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

  1. <script id='test1' type="text/template">
  2. <!-- 模板部分 -->
  4. <!-- 模板结束 -->
  5. </script>

大家喜欢哪种就使用哪种。

js代码

  1. var htmlList = '';
  2. var data = response.list;
  3. var htmlTemp = $("textarea.js-tmp").val(); //读取模板内容
  5. $.each(data, function(i,el) {
  6.     htmlList += htmlTemp.temp(el); //模板渲染并生成最终内容
  7. });
  9. $('.js-blog-list').empty().append(htmlList);

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

laytpl

上一篇文章也介绍过这个模板引擎，这里不多介绍，大家可以去其官网看详细信息。

简介：

  1. laytpl官网 - 精妙的JavaScript模板引擎  http://laytpl.layui.com/
  3. 支持if等语句{{# if(){ //some code ... }}   {{# } }}
  5. 模版语法:
  6. 输出一个普通字段，不转义html：   {{ d.field }}
  7. 输出一个普通字段，并转义html：   {{= d.field }}
  8. JavaScript脚本： {{# JavaScript statement }}

使用前需要引入laytpl.js：

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

模板

  1. <!--模板-->
  2. <textarea class="js-tmp" style="display:none;">
  3.     <div class="weui_media_box weui_media_text">
  4.         <a href="{{d.url}}" class="" target="_blank">
  5.             <h4 class="weui_media_title">{{d.title}}</h4>
  6.         </a>
  7.         <p class="weui_media_desc">{{d.desc}}</p>
  8.     </div>
  9. </textarea>
  10. <!--/模板-->

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

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

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

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

underscore

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

简介：

  1. Underscore.js(1.8.3)
  2. 中文文档 http://www.css88.com/doc/underscore/
  4. template_.template(templateString, [settings])
  5. 将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。
  7. 模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。 如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。 当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data对象 。 
  9. 如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数。

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

模板

  1. <!--模板-->
  2. <textarea class="js-tmp" style="display:none;">
  3.     <div class="weui_media_box weui_media_text">
  4.         <a href="<%= url %>" class="" target="_blank">
  5.             <h4 class="weui_media_title"><%= title %></h4>
  6.         </a>
  7.         <p class="weui_media_desc"><%= desc %></p>
  8.     </div>
  9. </textarea>
  10. <!--/模板-->

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

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

  1. $.each(data, function(i,el) {
  2.     //可以这样：
  3.     //var compiled = _.template(htmlTemp);
  4.     //htmlList += compiled(el);
  6.     /*或者*/
  7.     htmlList += _.template(htmlTemp)(el);
  8. });

使用方法其实很相似。

artTemplate

这个还是比较有名的。

简介：

  1. artTemplate-3.0 新一代 javascript 模板引擎
  2. https://github.com/aui/artTemplate
  4. template.js (简洁语法版, 2.7kb)
  6. 支持if等语句{{ if admin }}   {{/if}}
  8. template(id, data)
  9. 根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
  10. 如果没有 data 参数，那么将返回一渲染函数。
  12. 性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）
  13. 支持运行时调试，可精确定位异常模板所在语句（演示）
  14. 对 NodeJS Express 友好支持
  15. 安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
  16. 支持include语句
  17. 可在浏览器端实现按路径加载模板（详情）
  18. 支持预编译，可将模板转换成为非常精简的 js 文件
  19. 模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选
  20. 支持所有流行的浏览器

artTemplate区分简洁语法版和原生语法版。这里先演示简洁语法版。

使用前同样先引入artTemplate.js:

  1. <script src="artTemplate/template.js"></script>

模板

  1. <!--模板-->
  2. <script id="js-tmp" type="text/html">
  3.     <div class="weui_media_box weui_media_text">
  4.         <a href="{{ url }}" class="" target="_blank">
  5.             <h4 class="weui_media_title">{{ title }}</h4>
  6.         </a>
  7.         <p class="weui_media_desc">{{ desc }}</p>
  8.     </div>
  9. </script>
  10. <!--/模板-->

注意这里模板与前面的示例不一样了，直接使用一个type="text/html"的script标签存放模板。artTemplate不支持textarea标签。

模板里变量使用{{ 变量 }}占位。

js代码

  1. /本例不再需要手动取模板内容
  2. //var htmlTemp = $("textarea.js-tmp").val();
  4. $.each(data, function(i,el) {
  5.     htmlList += template("js-tmp", el); //注意第一个参数是id
  6. });

artTemplate使用基于document.getElementById(id)的方式直接获取模板内容。这一点与其它模板有点不同，需要注意。

下面再看看artTemplate原生语法版。
需要引入替换成：

  1. <script src="artTemplate/template-native.js"></script>

模板

  1. <!--模板-->
  2. <script id="js-tmp" type="text/html">
  3.     <div class="weui_media_box weui_media_text">
  4.         <a href="<%= url %>" class="" target="_blank">
  5.             <h4 class="weui_media_title"><%= title %></h4>
  6.         </a>
  7.         <p class="weui_media_desc"><%= desc %></p>
  8.     </div>
  9. </script>
  10. <!--/模板-->

原生语法版的artTemplate模板也不一样，使用<%= 变量 %>的方式表示变量。

js代码
无需改动，和上面简洁语法版是一样的。

BaiduTemplate

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

简介：

  1. 百度JS模板引擎 baiduTemplate 1.0.6 版 http://tangram.baidu.com/BaiduTemplate/
  2. https://github.com/wangxiao/BaiduTemplate
  4. //方法一：直接传入data，返回编译后的HTML片段
  5. var html0 = baidu.template(tpl,data);  
  7. //或直接传入id即可
  8. var html0 = baidu.template('test1',data);  
  10. 支持if等语句<% if(admin) %>   <%}%>

使用前引入：

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

模板

  1. <!--模板-->
  2. <textarea class="js-tmp" id="js-tmp" style="display:none;">
  3.     <div class="weui_media_box weui_media_text">
  4.         <a href="<%= url %>" class="" target="_blank">
  5.             <h4 class="weui_media_title"><%= title %></h4>
  6.         </a>
  7.         <p class="weui_media_desc"><%= desc %></p>
  8.     </div>
  9. </textarea>
  10. <!--/模板-->

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

js代码

  1. var htmlTemp = $("textarea.js-tmp").val();
  3. $.each(data, function(i,el) {
  4.     //htmlList += baidu.template(htmlTemp,el);
  6.     //或者通过ID直接得到模板内容:
  7.     htmlList += baidu.template("js-tmp",el);
  8. });

使用很灵活，值得一试。

doT

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

简介：

  1. doT.js  https://github.com/olado/doT
  2. olado/doT: The fastest + concise javascript template engine for nodejs and browsers. Partials, custom delimiters and more.
  4. 用法类似underscore的_.template

引入doT.min.js：

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

模板

  1. <!--模板 ： 需要加对象前缀it-->
  2. <textarea class="js-tmp" style="display:none;">
  3.     <div class="weui_media_box weui_media_text">
  4.         <a href="{{= it.url }}" class="" target="_blank">
  5.             <h4 class="weui_media_title">{{= it.title }}</h4>
  6.         </a>
  7.         <p class="weui_media_desc">{{= it.desc }}</p>
  8.     </div>
  9. </textarea>
  10. <!--/模板-->

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

js代码

  1. $.each(data, function(i,el) {
  2.     //htmlList += _.template(htmlTemp)(el);
  4.     htmlList += doT.template(htmlTemp)(el);
  5. });

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

Juicer

简介：

  1. Juicer – 一个Javascript模板引擎的实现和优化 http://juicer.name/
  2. PaulGuo/Juicer: A Light Javascript Templete Engine. https://github.com/PaulGuo/Juicer
  4. 当前最新版本: 0.6.14
  6. Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。除此之外，它还可以在 Node.js 环境中运行。

引入juicer：

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

模板

  1. <!--模板-->
  2. <textarea class="js-tmp" style="display:none;">
  3.     <div class="weui_media_box weui_media_text">
  4.         <a href="${url}" class="" target="_blank">
  5.             <h4 class="weui_media_title">${title}</h4>
  6.         </a>
  7.         <p class="weui_media_desc">${desc}</p>
  8.     </div>
  9. </textarea>
  10. <!--/模板-->

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

js代码

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

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

作者：飞鸿影~

出处：http://52fhy.cnblogs.com/

JavaScript模板引擎的更多相关文章

  1. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  2. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  3. JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  4. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  5. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  6. JavaScript 模板引擎实现原理解析

    1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...

  7. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  8. 如何选择Javascript模板引擎（javascript template engine)？

    译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...

  9. 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

  10. Juicer javascript 模板引擎

    模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. js模板引擎包括如下:template官方参考:http://au ...

随机推荐

  1. RAD路线规划2016版

    http://community.embarcadero.com/article/news/16211-embarcadero-rad-studio-2016-product-approach-and ...

  2. Thymeleaf Javascript 取值

    <script th:inline="javascript"> var openid = /*[[${session.wxuser.openId}]]*/ </s ...

  3. 基于visual Studio2013解决面试题之0801对称字符串

     题目

  4. Mac+IPAD上使用wireshark抓包

    首先先下载wireshark和Xquartz wireshark地址: http://www.wireshark.org/download.html Xquartz 地址:http://xquartz ...

  5. UIPageControl的一个Demo

    本篇文章只是记录了一个自定义UIPageControl 的制作,其实很简单的   源码在底部会奉上链接,还望多多交流,多多支持. 首先效果图如下: 首先先做一个UISCrollView // 建议这样 ...

  6. 4. Qt的容器类

      Qt提供来一组通用的基于模板的容器类. 一. QList类,QLinkedList类 和  QVector类         QList类.QLinkedList类和QVector类常常使用到的Q ...

  7. OpenVPN多处理之-netns容器与iptables CLUSTER

    假设还是沉湎于之前的战果以及强加的感叹,不要冥想,将其升华. 1.C还是脚本 以前,我用bash组织了复杂的iptables,ip rule等逻辑来配合OpenVPN,将其应用于差点儿全部能够想象得到 ...

  8. 【iOS开发-31】UITabBar背景、icon图标颜色、被选中背景设置以及隐藏UITabBar的两种方式

    一.对UITabBar背景和icon图标的一些设置 (1)由于直接给UITabBar设置的背景颜色显示的不纯.半透明的感觉,所以,有时候我们能够直接利用纯色的图片作为背景达到想要的效果. (2)给ic ...

  9. ALV调用的几个标准函数

    ALV的调用主要由以下几个标准函数实现,所有函数的输入输出参数必须大写,否则系统会出现异常中止,相关函数如下: 1)REUSE_ALV_FIENDCATALOG_MERGE:根据内表结构返回FIELD ...

  10. win32用GDI+加载png图片作为背景图

    #include <windows.h> #include <gdiplus.h> /* GDI+ startup token */ ULONG_PTR gdiplusStar ...