JavaScript模板引擎用法实例


Posted in Javascript onJuly 10, 2015

本文实例讲述了JavaScript模板引擎用法。分享给大家供大家参考。具体如下:

这里介绍的这个模板引擎写得短小精悍,非常值得一看

tmpl.js文件如下:

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function() {
 var cache = {};
 this.tmpl = function tmpl(str, data) {
  // Figure out if we're getting a template, or if we need to
  // load the template - and be sure to cache the result.
  var fn = 
   !/\W/.test(str) 
   ? 
   cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) 
   :
   // Generate a reusable function that will serve as a template
   // generator (and which will be cached).
   new Function(
    "obj", "var p=[],print=function(){p.push.apply(p,arguments);};" +
    // Introduce the data as local variables using with(){}
    "with(obj){p.push('" +
    // Convert the template into pure JavaScript
    str
     .replace(/[\r\t\n]/g, " ")
     .split("<%").join("\t")
     .replace(/((^|%>)[^\t]*)'/g, "$1\r")
     .replace(/\t=(.*?)%>/g, "',$1,'")
     .split("\t")
     .join("');")
     .split("%>")
     .join("p.push('")
     .split("\r")
     .join("\\'") + 
    "');}return p.join('');"
   ); // Function ends
  // Provide some basic currying to the user
  return data ? fn(data) : fn;
 };
})();

index.html文件如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JavaScript tmpl Use Demo</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script src="./tmpl.js" type="text/javascript"></script>
   <!-- 下面是模板user_tmpl -->
  <script type="text/html" id="user_tmpl">
   <% for ( var i = 0; i < users.length; i++ ) { %>
   <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
   <% } %>
  </script>
  <script type="text/javascript">
  // 用来填充模板的数据
   var users = [
    { url: "http://baidu.com", name: "jxq"},
    { url: "http://google.com", name: "william"}
   ];
   $(function() {
   // 调用模板引擎函数将数据填充到模板获得最终内容
    $("#myUl").html(tmpl("user_tmpl", users));
   });
  </script>
 </head>
 <body>
  <div>
   <ul id="myUl">
   </ul>
  </div>
 </body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
JavaScript实现打字效果的方法
Jul 10 #Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 #Javascript
再谈JavaScript线程
Jul 10 #Javascript
javascript实现判断鼠标的状态
Jul 10 #Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 #Javascript
javascript实现确定和取消提示框效果
Jul 10 #Javascript
javascript实现的简单的表单验证
Jul 10 #Javascript
You might like
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
php设计模式 Visitor 访问者模式
2011/06/28 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
php发送邮件的问题详解
2015/06/22 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Django中的ajax请求
2018/10/19 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
粗加工管理制度
2014/02/04 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
2014年信用社工作总结
2014/11/25 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis