JavaScript短小精悍的模板(上)

放假之前准备啃完Chart.js的源码(好难啃%>_<%),正好学习下Canvas的用法。啃着啃着啃出一个template的源码。

这个JS模板来自jquery作者:John Resig的博客。代码加了注释才35行,但完全实现了模板函数的功能。

用法和其他的模板(baidutemplate.js,underscore.js带的模板)差不多,下面是个例子:

首先,script标签包含模板:

    <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>

js代码:

var result = document.getElementById(‘result‘);
    var users = [{
        name: ‘aaaa‘,
        url: ‘http://baidu.com‘
    },{
        name: ‘bbbb‘,
        url: ‘http://baidu.com‘
    },{
        name: ‘cccc‘,
        url: ‘http://baidu.com‘
    }];
    var data = {
        users: users
    }
    result.innerHTML = tmpl(‘user_tmpl‘, data);

这是常用的用法,除此之外,还有另外一种用法。

通过id取得模板函数,然后稍后执行这个函数,取得结果。比如:

    var show_user = tmpl(‘user_tmpl‘),
        html = ‘‘;
    for(var i = 0; i < users.length; i++) {
        console.log(show_user(users[i]))
    }

注:这个循环用的数组必须是users,和script里的一样,否则会出现错误。

源代码贴在这里,稍后解析:

// 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(‘‘);");

    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();
时间: 2024-10-12 23:30:52

JavaScript短小精悍的模板(上)的相关文章

JavaScript短小精悍的模板(下)

接JavaScript短小精悍的模板(上). 首先是一个自执行的匿名函数. (function() { })(); 然后定义了一个window的属性暴露出来供调用. (function() { this.tmpl = function tmpl(str, data) { } })(); 这里的this就是window对象,str是用户传进来的字符串,模板的id或者是模板字符串(见下文),data是渲染模板的数据. 函数中首先做个判断,判断一下str是不是模板的id !/\W/.test(str)

“Word自动更改后的内容保存到通用文档模板上。是否加载该模板?“的解决办法

在win7系统下,Word2010出现了不能正常关闭.打开一个已有word文档,点击右上角关闭按钮后,先提示"word已停止工作,windows正在检查该问题的解决方案",随后提示"Microsoft word正试图恢复您的信息,这可能需要几分钟",最后提示"Microsoft Word已停止工作,出现了一个问题,导致程序停止正常工作.如果有可用的解决方案,Windows将关闭程序并通知您".之后,再重新打开word时,提示"Word自

阿里云cenos 6.5 模板上安装 docker

本章将介绍在阿里云的 Centos6.5 模板上安装 Docker 以及在 Ubuntu 14.04 模板上安装 Docker 的过程 Centos 6.5 模板上使用Docker 首先,通过 ssh 登陆阿里云的服务器,查看系统版本号以及内核版本. Welcome to aliyun Elastic Compute Service! # lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core

JavaScript实现在页面上的文本框中输入小写字母自动变为大写字母

<script language="javascript" type="text/javascript"> $(function () { $("input[type=text]").keyup(function () { $(this).val($(this).val().toUpperCase()); }); }); </script> $("input[type=text]") 处可为文本框ID,

JavaScript,php文件上传简单实现

非ajax,非iframe,最原始使用file控件的文件上传,记录过程备忘. 实现目标,能够将文件上传到指定位置. 客户端用input的file控件: <form action='data.php' method='post' enctype='multipart/form-data'> <input type='file' name='file' /> <input type='submit' /> </form> 控件的name属性就是为了和服务器端通信

Windows Store App JavaScript 开发:模板绑定

WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控件的方法相似:在页面中添加一个div元素,将div元素的data-win-control属性设置为WinJS.Binding.Template.定义WinJS库模板以后,需要在WinJS库模板内部添加控件以显示绑定的数据,WinJS库模板内部只能有一个根元素,当绑定多条数据时,需要在WinJS库模板

JavaScript Template JST模板引擎----Trimpath [转]

官方网址:http://trimpath.com/project/wiki/JavaScriptTemplates Trimpath JavaScript 是个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎. 它有如下的特点:1.采用标准的JavaScript编写,支持跨浏览器 2.模板语法类似于:FreeMarker,Velocity,Smarty3.采用简易的语言来描述大段的字串以及Dom/DHTML操作 4.

JavaScript中template模板引擎

template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果. 1.特性 (1).性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)(2).支持运行时调试,可精确定位异常模板所在语句(演示) (3).对 NodeJS Express 友好支持(4).安全,默认对输出进行转义.在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)

ajax+FormData+javascript 实现无刷新上传附件

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload=function() { var fm=document.getElementsByTagName("form")[0]; f