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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
js实现拾色器插件(ColorPicker)
May 21 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
PHP用户指南-cookies部分
2006/10/09 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP中soap的用法实例
2014/10/24 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
JavaScript File分段上传
2016/03/10 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
python入门教程 python入门神图一张
2018/03/05 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Django 重写用户模型的实现
2019/07/29 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
北京银河万佳Java面试题
2012/03/21 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
残疾人小组计划书
2014/04/27 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
六五普法宣传标语
2014/10/06 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
雷锋之歌观后感
2015/06/10 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电