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 相关文章推荐
JS取文本框中最小值的简单实例
Nov 29 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 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
php 猴子摘桃的算法
2017/06/20 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
javascript的BOM
2016/05/03 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
用Python shell简化开发
2018/08/08 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python logging 日志的级别调整方式
2020/02/21 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
python -v 报错问题的解决方法
2020/09/15 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
经典大学生求职信范文
2014/01/06 职场文书
人力资源总监工作说明
2014/03/03 职场文书
五分钟演讲稿
2014/04/30 职场文书
三八活动策划方案
2014/08/17 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
佛光寺导游词
2015/02/10 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
特种设备安全管理制度
2015/08/06 职场文书
Python包argparse模块常用方法
2021/06/04 Python
在项目中使用redis做缓存的一些思路
2021/09/14 Redis