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 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 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优化及注意事项
2016/07/04 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
javascript学习网址备忘
2007/05/29 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
五型班组建设方案
2014/02/10 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
员工工作自我评价
2014/09/26 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
个人专业技术总结
2015/03/05 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Python 内置函数速查表一览
2021/06/02 Python