JavaScript短小精悍的模板(下)

JavaScript短小精悍的模板(上)

首先是一个自执行的匿名函数。

(function() {

})();

然后定义了一个window的属性暴露出来供调用。

(function() {
    this.tmpl = function tmpl(str, data) {

    }
})();

这里的this就是window对象,str是用户传进来的字符串,模板的id或者是模板字符串(见下文),data是渲染模板的数据。

函数中首先做个判断,判断一下str是不是模板的id

!/\W/.test(str)

正则表达式中,\W和\w表示的相反的概念。\w表示字母数字和下划线,自然\W表示非字母非数字非下划线,也就是说如果传进的字符串是数字字母和下划线的组合,就是id,否则就是要解析的模板字符串。

代码中用问号操作符

!/\W/.test(str) ?
      /*str是id*/ : /*str是模板字符串*/ 

如果是id,首选看一下之前有没有缓存过,如果有,直接用,否则取出id的innerHTML,进行解析,同时不要忘了也要放到缓存里。

cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML)

接下来,就是模板字符串的解析了。模板字符串类似以下格式:

<% for ( var i = 0; i < users.length; i++ ) { %>
   <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
<% } %>

不管是通过script标签还是直接传进去,最后都是解析这种格式。

解析的函数使用了Function构造函数:

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

不太好看的话,改写成这样:

var tmplGenerator = function(obj) {
  var p = [],
      print = function() {
        p.push.apply(p, arguments);
      };

  with(obj) {
    var s = 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("\\‘");
    p.push(s);
  }

  return p.join(‘‘);
}

未完待续。。。

时间: 2024-10-12 23:30:58

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

JavaScript短小精悍的模板(上)

放假之前准备啃完Chart.js的源码(好难啃%>_<%),正好学习下Canvas的用法.啃着啃着啃出一个template的源码. 这个JS模板来自jquery作者:John Resig的博客.代码加了注释才35行,但完全实现了模板函数的功能. 用法和其他的模板(baidutemplate.js,underscore.js带的模板)差不多,下面是个例子: 首先,script标签包含模板: <script type="text/html" id="user_t

Javascript实现简单的下拉二级菜单

在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/ <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

javascript模拟Windows系统下的扫雷游戏

javascript模拟Windows系统下的扫雷游戏. 说好的一周一篇随笔的,这才第三周就延迟交作业了,深深的自责中... 先玩一把 demo 很久以前写的 当时都没写注释的 刚加上了 (尼玛,好多自己都不认识了 ... ) 不足的敌方就是本来想写个游戏排名的统计的,等有空了再加上(好像每次都这么说 然后就等好久好久...) 还有就是没有实现:点击第一个格子不能是雷的功能 刚才在手机端 打开了下这篇文章 排版完全乱了... <style> ul{padding:0;list-style:no

JavaScript在IE6,IE7下报错&#39;expected identifier, string or number&#39;

问题: 代码在Forefox和IE8下工作正常,但是在IE6下报错: expected identifier, string or number 假如变量options有多个选项,那么我们可以用逗号分开:但是最后一个选项后不可以有逗号.虽然IE8和Firefox可以忽略这个逗号,但是IE6下会报错(据说IE7下也会报错) 解决方案: 解决方法很简单,把多余的逗号删除就可以了. var options = { target: '.content' //注重不可以加逗号 }; JavaScript在

JavaScript 面向对象程序设计(下)&mdash;&mdash;继承与多态 【转】

JavaScript 面向对象程序设计(下)--继承与多态 前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员.公有实例成员.私有静态成员.公有静态成员和静态类的封装.这次我们来讨论一下面向对象程序设计中的另外两个要素:继承与多态. 1 又是几个基本概念 为什么要说又呢? 在讨论继承时,我们已经列出了一些基本概念了,那些概念是跟封装密切相关的概念,今天我们要讨论的基本概念,主要是跟继承与多态相关的,但是它们跟封装也有一些联系. 1.1 定义和赋值 变量定义是指用 var a;

C++--第22课 - 类模板 - 下

第22课 - 类模板 - 下 1. 类模板的局部特化 类模板可以定义多个类型参数 #include <cstdlib> #include <iostream> using namespace std; template<typename T1, typename T2> class Test { public: void add(T1 a, T2 b) { cout<<(a + b)<<endl; } }; int main(int argc,

Windows Store App JavaScript 开发:模板绑定

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

JavaScript面向对象旅程(下)

JavaScript面向对象旅程 剪不断,理还乱,是离愁. 前面已经提到过新语言开发的两个步骤,分别是:一.定义基本的数据类型,完善结构化编程语言的设计:二.为函数类型绑定this的概念,好在对象的方法中可以引用到对象自身.下面是继续下去的思路,其主体思想是尽可能地引用传统面向对象语言的相关概念(如类.继承等)到新语言中来. 三.让对象属于某个类 这次要引入类的概念来.但是注意的是,还是前面提到过的思路,是让对象看起来属于某个类,而不是真正地构造基于类的种种语义概念. 一般来说,类包括类符号和类

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.