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 GridView 实现自动计算操作代码
Mar 25 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 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源代码
2009/08/21 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP中的替代语法简介
2014/08/22 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
深入了解Django中间件及其方法
2019/07/26 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
最常使用的求职信
2014/05/25 职场文书
售房委托书
2014/08/30 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
青年文明号汇报材料
2014/12/23 职场文书
教学督导岗位职责
2015/04/10 职场文书
医者仁心观后感
2015/06/17 职场文书
病房管理制度范本
2015/08/06 职场文书