jQuery-template.js学习
花了点时间，看了下jQuery-template.js，不多废话，先上结构
jQuery.each({..},function(){})
jQuery.fn.extend({..})
jQuery.extend({...})
jQuery.extend(jQuery.tmpl,{..})
function xx(){}//自定义方法
结构上非常简单，但template插件却提供了不错的模版功能，我们根据API来慢慢看这个框架。
网络资源http://www.cnblogs.com/FoundationSoft/archive/2010/05/19/1739257.html http://www.jb51.net/article/27747.htm
如果在原型上添加方法，这一般都是暴露给外部调用的API，我们来看一下，各个方法的流程：
我们先看个例子:
HTML结构:
<table id="table1"></table>
js部分:
<script type="text/html" id="template1">
<tr>
<td>${ID}</td>
<td>${Name}</td>
</tr>
</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.js"></script>
<script type="text/javascript">
var users = [
{
ID: 'think8848',
Name: 'Joseph Chan',
Langs: [
'Chinese',
'English'
]
},
{
ID: 'aCloud',
Name: 'Mary Cheung',
Langs: [
'Chinese',
'French'
]
}
];
$('#template1').tmpl(users).appendTo('#table1')
</script>
可以看到模版被写在了type为text/html的script标签中，其中users是数据元，最后调用了一个$('#template1').tmpl(users)将信息写入模版，最后生成出的信息插入dom中，即完成。ok，来看一下jQuery原型上的tmpl方法
tmpl: function( data, options, parentItem ) { return jQuery.tmpl( this[0], data, options, parentItem );//页面调用的时候的入口方法，这会去调用jQuery上的tmpl方法 }
进入jQuery上的tmpl方法
tmpl: function( tmpl, data, options, parentItem ) { var ret, topLevel = !parentItem; if ( topLevel ) { // This is a top-level tmpl call (not from a nested template using {{tmpl}}) parentItem = topTmplItem;//{ key: 0, data: {} } tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );//根据参数数量，选择性的执行jQuery.template方法,这里获得了一个先有正则匹配，再经过拼接，最后new Function而得到一个匿名函数 wrappedItems = {}; // Any wrapped items will be rebuilt, since this is top level } else if ( !tmpl ) { // The template item is already associated with DOM - this is a refresh. // Re-evaluate rendered template for the parentItem tmpl = parentItem.tmpl; newTmplItems[parentItem.key] = parentItem; parentItem.nodes = []; if ( parentItem.wrapped ) { updateWrapped( parentItem, parentItem.wrapped ); } // Rebuild, without creating a new template item return jQuery( build( parentItem, null, parentItem.tmpl( jQuery, parentItem ) )); } if ( !tmpl ) { return []; // Could throw... } if ( typeof data === "function" ) {//传进来的数据看是否存在函数 data = data.call( parentItem || {} ); } if ( options && options.wrapped ) { updateWrapped( options, options.wrapped ); } ret = jQuery.isArray( data ) ? jQuery.map( data, function( dataItem ) { return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null; }) : [ newTmplItem( options, parentItem, tmpl, data ) ]; //进入最后一层加工 return topLevel ? jQuery( build( parentItem, null, ret ) ) : ret; }
对于这个例子，我们需要看一下这段代码的几个部分
第一个部分:
tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );//根据参数数量，选择性的执行jQuery.template方法,这里获得了一个先有正则匹配，再经过拼接，最后new Function而得到一个匿名函数
tmpl参数则是那个写有模版的script对象，根据这个方法，我们进入jQuery.template方法。
//这里经过几次进入template方法，最终还是将type为text/html的script对象传入template方法的第二个参数中 template: function( name, tmpl ) { if (tmpl) { // Compile template and associate with name if ( typeof tmpl === "string" ) {//如何该参数是一个字符串，这里支持将模版以字符串形式写入 // This is an HTML string being passed directly in. tmpl = buildTmplFn( tmpl ); } else if ( tmpl instanceof jQuery ) { tmpl = tmpl[0] || {};//获取dom对象否则赋空对象 } if ( tmpl.nodeType ) {//如何该参数是一个dom节点// If this is a template block, use cached copy, or generate tmpl function and cache. tmpl = jQuery.data( tmpl, "tmpl" ) || jQuery.data( tmpl, "tmpl", buildTmplFn( tmpl.innerHTML ));//根据正则生成一个匿名函数返回// Issue: In IE, if the container element is not a script block, the innerHTML will remove quotes from attribute values whenever the value does not include white space. // This means that foo="${x}" will not work if the value of x includes white space: foo="${x}" -> foo=value of x. // To correct this, include space in tag: foo="${ x }" -> foo="value of x" } return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;//jQuery.template方法返回了这个匿名函数,将匿名函数分装在jQuery.template[name]中便于以后调用 } // Return named compiled template return name ? (typeof name !== "string" ? jQuery.template( null, name ): (jQuery.template[name] || // If not in map, and not containing at least on HTML tag, treat as a selector. // (If integrated with core, use quickExpr.exec) jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null; }
这段代码中的一些逻辑判断，会在后面的API描述中介绍，我们先看到一个很重要的自定义方法buildTmplFn，这算是这个插件比较重要的一个部分。传入参数则是模版字符串
buildTmplFn:
function buildTmplFn( markup ) { //注意这里在return之前，会将Function构造器里的字符串生成匿名函数，注意这里的写法 return new Function("jQuery","$item", // Use the variable __ to hold a string array while building the compiled template. (See https://github.com/jquery/jquery-tmpl/issues#issue/10). "var $=jQuery,call,__=[],$data=$item.data;" + // Introduce the data as local variables using with(){} "with($data){__.push('" + // Convert the template into pure JavaScript jQuery.trim(markup) .replace( /([\\'])/g, "\\$1" )//将\或者'前面都添加一个转义符\ .replace( /[\r\t\n]/g, " " )//将空格符全部转成空字符串 .replace( /\$\{([^\}]*)\}/g, "{{= $1}}" )//将类似${name}这种写法的转成{{=name}}，换句话说，在页面script中也可以使用${name}来赋值，这里都会统一转成{{=name}}格式 .replace( /\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g, //replace的自定义方法中的参数个数表明正则所匹配的分组成员的个数，一般第一个参数是匹配的整个字符串，也就是说，上面的这条正则分组成员应该是6个 function( all, slash, type, fnargs, target, parens, args ) { /* * type表示你具体需要显示的文本功能，我们这个例子是=，表示仅仅是显示 * */ var tag = jQuery.tmpl.tag[ type ], def, expr, exprAutoFnDetect; if ( !tag ) {//如何插件中不存在相应配置，抛出异常 throw "Unknown template tag: " + type; } def = tag._default || []; if ( parens && !/\w$/.test(target)) { target += parens;//拼接主干信息 parens = ""; } //从正则的匹配来看，这个target是我们匹配获得的主要成员 if ( target ) { target = unescape( target );//去转义符 args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : ""); // Support for target being things like a.toLowerCase(); // In that case don't call with template item as 'this' pointer. Just evaluate... //以下两种方法主要拼接字符串，最后转成函数执行。 expr = parens ? (target.indexOf(".") > -1 ? target + unescape( parens ) : ("(" + target + ").call($item" + args)) : target; exprAutoFnDetect = parens ? expr : "(typeof(" + target + ")==='function'?(" + target + ").call($item):(" + target + "))"; } else { exprAutoFnDetect = expr = def.$1 || "null"; } fnargs = unescape( fnargs );//去转义符 //return的时候，再进行一次拼接,这里源码采用占位符的方式，先split再join的方式实现替换，大家也可以尝试使用正则替换。比较比较执行效率 return "');" + tag[ slash ? "close" : "open" ] .split( "$notnull_1" ).join( target ? "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" : "true" )//这种方法可以学习一下，先使用占位符站住你需要替换的信息，然后使用split分隔开成数组，再使用join方法加入参数合成字符串，在数组中join的效率还是不错的 .split( "$1a" ).join( exprAutoFnDetect )//将之前拼接好的字符串替换占位符$1a .split( "$1" ).join( expr )//替换$1 .split( "$2" ).join( fnargs || def.$2 || "" ) +//依旧是替换 "__.push('"; }) + "');}return __;" ); }
其实这个方法的作用就是根据内置正则表达式，解析模版字符串，截取相应的数据，拼凑成一个以后使用的匿名函数。这个匿名函数的功能主要将我们之后传入的数据源users根据正则解析，加入到模版字符串中。既然正则是这个方法的核心，那我们就来看一下这些正则，前几个正则比较简单，最后一个正则比较复杂，我们将它做拆解来理解。
/* * \{\{ --匹配{{ * (\/?) --优先匹配/，捕捉匹配结果 ($1)slash * (\w+|.) --优先匹配字符，捕获匹配结果 ($2)type * (?: --匹配但不捕获 * \( --匹配( * ( --捕获匹配结果 ($3)fnargs * (?: --匹配但不捕捉 * [^\}]|\} --优先匹配非}，如果有}，要求匹配这个}后面不能再出现} * (?!\}) --否定顺序环视，不能存在} * )*? --非优先匹配设定，尽可能少的去匹配 * )? --优先匹配 * \) --匹配) * )? --优先匹配 * (?: --匹配但不捕捉 * \s+ --优先匹配，匹配空格符，至少一个 * (.*?)? --非优先设定，尽可能少的去匹配，但必须要尽量尝试。 ($4)target * )? --优先匹配 * ( --捕获匹配结果 ($5)parens * \( --匹配( * ( --捕获匹配结果 ($6)args * (?: --匹配但不捕获 * [^\}]|\} --优先匹配非}，如果有}，要求匹配这个}后面不能再出现} * (?!\}) --否定顺序环视，不能存在} * )*? --非优先匹配设定，尽可能少的去匹配 * ) * \) --匹配) * )? --优先匹配 * \s* --优先匹配，空白符 * \}\} --匹配}} * /g --全局匹配 * *
因为replace的解析函数中一共有7个参数，除了第一个参数表示全部匹配外，其他都是分组内的匹配。我在注释中都一一列出，方便我们阅读。观察一下正则，我们可以了解这个插件给与我们的一些语法使用，比如说：
页面模版内可以这样写：
${name}
{{= name}}
这两种写法都是对的，为什么前一条正则就是将${name}转成{{= name}}，另外为什么=与name之间需要有空格呢？其实答案在正则里，看一下($4)target匹配的前一段是\s+，这表明必须至少要匹配一个空格符。先将我们缩写的格式转成{{= xx}}再根据(.*?)?查找出xx的内容，也就是name，其实正则的匹配过程并不是像我所说的这样，在js中的正则在量词的出现时，会进行优先匹配，然后再慢慢回溯，我这样只是形象的简单说一下。对于这条正则，我们在后续的API中继续延伸。
对于另外一个让我们学习的地方，那就是使用占位符插入我们所要的信息，一般我们都会使用正则，本插件也提供了一种不错的思路。先使用占位符，然后通过split(占位符)来分隔字符串，最后使用join(信息)来再次拼接字符串。这两个方法都是原生的，效率的话，我不太确定，应该还不错，有兴趣的朋友可以写写正则，在不同浏览器下比比看，谁的效率更高一点。
既然它生成了一个匿名函数，我们可以简单地打印一下看看：
function anonymous(jQuery, $item) { var $=jQuery,call,__=[],$data=$item.data; with($data){__.push('<tr> <td>'); if(typeof(ID)!=='undefined' && (ID)!=null){ __.push($.encode((typeof(ID)==='function'?(ID).call($item):(ID)))); } __.push('</td> <td>'); if(typeof(Name)!=='undefined' && (Name)!=null){ __.push($.encode((typeof(Name)==='function'?(Name).call($item):(Name)))); } __.push('</td> </tr>');}return __; }
这里with有延长作用域的作用，在一般的开发中，不建议使用，不太易于维护，那这个with括号里的ID，Name其实都是$data.ID和$data.Name，在没有调用这个匿名函数之前，我们先简单看一下，传入的$item参数拥有data属性，如果这个data的ID和Name不是函数的话就正常显示，如果是函数的话，则这些方法需要通过$item来调用。另外匿名函数中也拥有了这钱我们所写的模版结构，后续的工作就是用真实的数据去替换占位符，前提非空。ok，回到jQuery的tmpl方法中，我们再看一个比较重要的部分。
ret = jQuery.isArray( data ) ? jQuery.map( data, function( dataItem ) { return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null; }) : [ newTmplItem( options, parentItem, tmpl, data ) ];
data是用户传入的信息元，就是users，是一个数组，调用jQuery.map来进行遍历，来调用newTmplItem方法，其中tmpl则是刚才我们生成的匿名函数。
function newTmplItem( options, parentItem, fn, data ) { // Returns a template item data structure for a new rendered instance of a template (a 'template item'). // The content field is a hierarchical array of strings and nested items (to be // removed and replaced by nodes field of dom elements, once inserted in DOM). var newItem = { data: data || (data === 0 || data === false) ? data : (parentItem ? parentItem.data : {}), _wrap: parentItem ? parentItem._wrap : null, tmpl: null, parent: parentItem || null, nodes: [], calls: tiCalls, nest: tiNest, wrap: tiWrap, html: tiHtml, update: tiUpdate }; if ( options ) { jQuery.extend( newItem, options, { nodes: [], parent: parentItem }); } if ( fn ) { // Build the hierarchical content to be used during insertion into DOM newItem.tmpl = fn; newItem._ctnt = newItem._ctnt || newItem.tmpl( jQuery, newItem ); newItem.key = ++itemKey;//表示计数 // Keep track of new template item, until it is stored as jQuery Data on DOM element (stack.length ? wrappedItems : newTmplItems)[itemKey] = newItem;//这里考虑一个页面可能多处使用模版，这里进行的编号，封装。 } return newItem;//最后返回这个newItem对象 }
如果看到newItem的定义方式，或许之前我们对匿名函数的猜测有了一些佐证，没错，最后通过newItem.tmpl(jQuery,newItem)来调用了这个匿名函数，这个方法除了调用执行了匿名函数，还简单的封装了一下，便于以后我们调用$.tmplItem来获取相应的数据元信息。
将生成好的ret传入最后一个加工方法build，完成整个模版的赋值
//将函数等细化出来，拼接成字符串 function build( tmplItem, nested, content ) { // Convert hierarchical content into flat string array // and finally return array of fragments ready for DOM insertion var frag, ret = content ? jQuery.map( content, function( item ) { //给所有标签加上_tmplitem=key的属性，也就是这条正则的含义 return (typeof item === "string") ? // Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM. (tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) : // This is a child template item. Build nested template. build( item, tmplItem, item._ctnt ); }) : // If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}. tmplItem; if ( nested ) { return ret; } // top-level template ret = ret.join("");//生成最终的模版 // Support templates which have initial or final text nodes, or consist only of text // Also support HTML entities within the HTML markup. //这条正则比较简单，我们来看过一下。获得<>内的主要信息 ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) { frag = jQuery( middle ).get();//将生成的jQuery dom对象转成数组集合，集合的每个成员则是对应生成的jQuery对象的原生dom对象 //解析生成出来的dom storeTmplItems( frag ); if ( before ) { frag = unencode( before ).concat(frag); } if ( after ) { frag = frag.concat(unencode( after )); } }); return frag ? frag : unencode( ret ); }
这个里面出现了两条正则，我们分别看一下：
*
* /
* ( --匹配捕获($1)
* <\w+ --匹配<，字母或数字或下划线或汉字(至少一个，优先匹配)(存在固化分组的含义)
* )
* (?=[\s>]) --顺序环视,后面必须有空格和一个>
* (?![^>]*_tmplitem) --顺序否定环视，后面不能有非>字符，还有_tmplitem这些字符串
* ( --匹配捕获($2)
* [^>]* --匹配非>字符，优先匹配，任意多个
* )
* /g --全局匹配
*
*
* ^ --开始
* \s* --优先匹配，任意多空白符
* ( --匹配捕获 ($1)before
* [^<\s] --匹配非<或者是空白符
* [^<]* --优先匹配，匹配非<
* )? --优先匹配
* ( --匹配捕获 ($2)middle
* <[\w\W]+> --匹配<，任意字符(至少一个，优先匹配)，>
* )
* ( --匹配捕获 ($3)after
* [^>]* --匹配非>
* [^>\s] --匹配非>或者是空白符
* )? --优先匹配(0，1次)
* \s* --匹配空白符(任意次，优先匹配)
* $ --结束
*
*
前一个正则的作用是给标签加上_tmplitem=key的属性，后一条正则则是获得<>内的主要信息。最后进入storeTmplItems方法
function storeTmplItems( content ) { var keySuffix = "_" + cloneIndex, elem, elems, newClonedItems = {}, i, l, m; for ( i = 0, l = content.length; i < l; i++ ) { if ( (elem = content[i]).nodeType !== 1 ) {//如果该节点不是元素节点，则直接跳过 continue; } //这里将会找到关键的几个元素节点，在模版中可能会存在注释节点，文本节点。 //遍历元素节点 elems = elem.getElementsByTagName("*"); for ( m = elems.length - 1; m >= 0; m-- ) {//自减的遍历有时候比自增要好很多 processItemKey( elems[m] ); } processItemKey( elem ); }
作为储存节点的方法，使用processItemKey进行遍历。
function processItemKey( el ) { var pntKey, pntNode = el, pntItem, tmplItem, key; // Ensure that each rendered template inserted into the DOM has its own template item, //确保每个呈现模板插入到DOM项目有自己的模板 if ( (key = el.getAttribute( tmplItmAtt ))) {//查看这个元素上是否有_tmplitem这个属性,限定了属于某个模版的内容 while ( pntNode.parentNode && (pntNode = pntNode.parentNode).nodeType === 1 && !(pntKey = pntNode.getAttribute( tmplItmAtt ))) { }//这种写法也比较不错，使用while不停向上查询pntNode的父节点 if ( pntKey !== key ) {//父节点存在，但是没有_tmplitem这个属性，一般是文档碎片 // The next ancestor with a _tmplitem expando is on a different key than this one. // So this is a top-level element within this template item // Set pntNode to the key of the parentNode, or to 0 if pntNode.parentNode is null, or pntNode is a fragment. //如果该元素的父节点不存在，则可能是文档碎片 pntNode = pntNode.parentNode ? (pntNode.nodeType === 11 ? 0 : (pntNode.getAttribute( tmplItmAtt ) || 0)) : 0; if ( !(tmplItem = newTmplItems[key]) ) { // The item is for wrapped content, and was copied from the temporary parent wrappedItem. tmplItem = wrappedItems[key]; tmplItem = newTmplItem( tmplItem, newTmplItems[pntNode]||wrappedItems[pntNode] ); tmplItem.key = ++itemKey; newTmplItems[itemKey] = tmplItem; } if ( cloneIndex ) { cloneTmplItem( key ); } } el.removeAttribute( tmplItmAtt );//最后去除_tmplitem这个属性 } else if ( cloneIndex && (tmplItem = jQuery.data( el, "tmplItem" )) ) { //这是一个元素,呈现克隆在附加或appendTo等等 //TmplItem存储在jQuery cloneCopyEvent数据已经被克隆。我们必须换上新鲜的克隆tmplItem。 // This was a rendered element, cloned during append or appendTo etc. // TmplItem stored in jQuery data has already been cloned in cloneCopyEvent. We must replace it with a fresh cloned tmplItem. cloneTmplItem( tmplItem.key ); newTmplItems[tmplItem.key] = tmplItem; pntNode = jQuery.data( el.parentNode, "tmplItem" ); pntNode = pntNode ? pntNode.key : 0; } if ( tmplItem ) {//遍历到最外层的元素 pntItem = tmplItem; //找到父元素的模板项。 // Find the template item of the parent element. // (Using !=, not !==, since pntItem.key is number, and pntNode may be a string) while ( pntItem && pntItem.key != pntNode ) {//顶级为pntNode为0 // Add this element as a top-level node for this rendered template item, as well as for any // ancestor items between this item and the item of its parent element pntItem.nodes.push( el ); pntItem = pntItem.parent;//向上迭代 } // Delete content built during rendering - reduce API surface area and memory use, and avoid exposing of stale data after rendering... delete tmplItem._ctnt;//删除属性 delete tmplItem._wrap;//删除属性 // Store template item as jQuery data on the element jQuery.data( el, "tmplItem", tmplItem );//这样可以$(el).data('tmplItem')读取tmplItem的值 } function cloneTmplItem( key ) { key = key + keySuffix; tmplItem = newClonedItems[key] = (newClonedItems[key] || newTmplItem( tmplItem, newTmplItems[tmplItem.parent.key + keySuffix] || tmplItem.parent )); } }
根据之前添加的_tmplitem属性，做了完整的向上遍历查找，最后删除掉_tmplitem属性。build方法将frag参数uncode之后返回给jQuery.tmpl方法来返回，最后通过appendTo加入到dom中，生成我们所看到的结果。以上通过一个简单的例子粗略的过了一下插件的运行流程，我们来看一些官方的API。
1.$.template，将HTML编译成模版
例子1
var markup = '<tr><td>${ID}</td><td>${Name}</td></tr>'; $.template('template', markup); $.tmpl('template', users).appendTo('#templateRows');
直接看一下$.template方法
if ( typeof tmpl === "string" ) {//如何该参数是一个字符串，这里支持将模版以字符串形式写入 // This is an HTML string being passed directly in. tmpl = buildTmplFn( tmpl ); }
可以看到，我们传入的markup是一个字符串，直接将这个markup传入buildTmplFn中去生成一个匿名函数。
return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;//jQuery.template方法返回了这个匿名函数,将匿名函数分装在jQuery.template[name]中便于以后调用
插件内部将编译好的HTML模版的匿名函数存入了jQuery.template[name]中，便于我们以后调用。
tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );//根据参数数量，选择性的执行jQuery.template方法,这里获得了一个先有正则匹配，再经过拼接，最后new Function而得到一个匿名函数
这里插件先查找了jQuery.template看是否存在tmpl的已经生成好的匿名函数，有则直接使用，否则重新生成。获得了匿名函数，其他步骤跟之前一样。
2.jQuery.tmpl()有两个比较有用的参数$item,$data,其中$item表示当前模版，$data表示当前数据
例子2
<script type="text/html" id="template1">
<tr>
<td>${ID}</td>
<td>${$data.Name}</td>
<td>${$item.getLangs(';')}</td>
</tr>
</script>
var users = [
{
ID: 'think8848',
Name: 'Joseph Chan',
Langs: [
'Chinese',
'English'
]
},
{
ID: 'aCloud',
Name: 'Mary Cheung',
Langs: [
'Chinese',
'French'
]
}
]
$('#template1').tmpl(users,{
getLangs: function(separator){
return this.data.Langs.join(separator);
}
}).appendTo('#table1');
<table id="table1"></table>
乍一看，调用的方式是一样的，你会疑问为什么模版里要用$item和$data这样的形式，其实你仔细看一下上个例子生成的匿名函数，就能发现这里这么写其实是为了更好的拼接。以下是这个例子所生成的匿名函数：
function anonymous(jQuery, $item) { var $=jQuery,call,__=[],$data=$item.data;with($data){__.push('<tr> <td>');if(typeof(ID)!=='undefined' && (ID)!=null){__.push($.encode((typeof(ID)==='function'?(ID).call($item):(ID))));}__.push('</td> <td>');if(typeof($data.Name)!=='undefined' && ($data.Name)!=null){__.push($.encode((typeof($data.Name)==='function'?($data.Name).call($item):($data.Name))));}__.push('</td> <td>');if(typeof($item.getLangs)!=='undefined' && ($item.getLangs)!=null){__.push($.encode($item.getLangs(';')));}__.push('</td> </tr>');}return __;
$data是$item的一个属性，存储着数据，$item中同样有很多自定义方法。这里getLangs方法里的this在匿名函数具体调用的时候会指向$item，这里需要注意一下。在newTmplItem方法里执行我们生成的匿名函数，这里都没有什么问题，这里我们通过正则简单回看一下这个${ID}，${$data.Name}是如何匹配的。这两个匹配其实是一个道理，匹配的正则如下：
/\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g
大家对照我之前的分解表看比较方便。我们拿${$data.Name}举例，不过使用之前，它已经转成{{= $data.Name}}
1：匹配{{
2：尝试匹配(\/?)，?表示优先匹配，但是{{后面没有/，所以匹配无效，?表示最多成功匹配一个。继续后面的匹配
3：尝试匹配(\w+|.)，如果|左边的能匹配成功则不需要进行右边的匹配，所以\w+会尽可能去匹配，但是\w无法匹配=所以，尝试用|右边的.去匹配，.可以匹配=，因为没有量词，所以只能匹配这个=
4：尝试匹配(?:\(((?:[^\}]|\}(?!\}))*?)?\))?
4.1：(?:)表示匹配但不捕获，其里面第一个要匹配的是(，可以看到{{=后面是空格而不是(所以匹配失败，加上这不捕获的分组使用的是优先量词?，允许匹配为空，继续后面的匹配
5：尝试匹配(?:\s+(.*?)?)?
5.1：分组里第一个匹配\s+，匹配=后面的空格符号，继续尝试匹配，当匹配到$时发现无法匹配，则\s+匹配结束。
5.2：尝试匹配(.*?)?，分组外围使用的是?，尽可能尝试匹配一个看看，对于(.*?)匹配$,因为(.*?)是惰性匹配(不优先匹配)，所以系统选择不匹配，另外外围的?也允许匹配不成功。继续后面的匹配
6：尝试匹配(\(((?:[^\}]|\}(?!\}))*?)\))?
6.1：如果4的步骤不匹配，那5中的\(同样无法匹配$，所以匹配失败
7：尝试匹配\s*\}\}，如果从$开始匹配，果断匹配失败。整个匹配结束了么？其实还没有，开始对惰性匹配继续进行匹配
8：让(.*?)先匹配$,再执行5，6步骤，如果最终匹配失败了，继续让(.*?)匹配$d，依次类推，直到(.*?)匹配到$data.Name，这时6结果匹配成功。整个正则匹配匹配成功。
以上则是该正则的一次简单匹配过程，可以发现该正则使用了惰性匹配一定程度上减少了正则的回溯次数，提高了效率。
3.each的用法
例子：
<script type="text/html" id="template1">
<li>
ID: ${ID}; Name: ${Name};
<br />Langs:
<ul>
<STRONG>
{{each(i,lang) Langs}}
<li>${i + 1}:
<label>${lang}. </label>
</li>
{{/each}}
</STRONG>
</ul>
</li>
</script>
var users = [
{
ID: 'think8848',
Name: 'Joseph Chan',
Langs: [
'Chinese',
'English'
]
},
{
ID: 'aCloud',
Name: 'Mary Cheung',
Langs: [
'Chinese',
'French'
]
}
];
$('#template1').tmpl(users).appendTo('#eachList')
<ul id="eachList"></ul>
运行过程基本一致，我们就看两个部分：
3.1：正则匹配
3.2：如何实现each
之前的${ID},${Name}和之前的匹配是一致的，这里就不描述了，看一下这段字符串的匹配。
{{each(i,lang) Langs}} <li>${i + 1}: <label>${lang}. </label> </li> {{/each}}
主要是{{each(i,lang) Langs}}和{{/each}}这两条的匹配
{{each(i,lang) Langs}}
1：匹配{{
2：尝试匹配(\/?)，/不能与e相匹配，所以匹配失败，因为存在?量词，继续下面的匹配
3：尝试匹配(\w+|.)，其中\W+是优先匹配，所以它一直匹配到each，当它尝试匹配(时，发现匹配失败时，则就返回匹配结果each进入分组，继续下面的匹配
4：尝试匹配(?:\(((?:[^\}]|\}(?!\}))*?)?\))?
4.1：首先匹配\(
4.2：尝试匹配((?:[^\}]|\}(?!\}))*?)?
4.2.1:尝试匹配(?:[^\}]|\}(?!\}))*?，这里实际就是两个部分[^\}]|\}和(?!\})，这里的正则写的有点复杂，其实也不难理解。这两个匹配他使用(?:)*?表示匹配后不捕捉，并且是惰性匹配，而却在它的外层加了()?，表示捕获分组，可想而 知是为了能更多的捕捉到全部的全部条件的字符串，因为里层的是惰性匹配，所以系统默认不匹配，继续后面的匹配
5：尝试匹配(?:\s+(.*?)?)?，发现i无法与\s+匹配，匹配失败，返回到惰性匹配那。
6：尝试让惰性匹配(?:[^\}]|\}(?!\}))*?去匹配字符串，我们先看一下[^\}]|\}(?!\})，这样看，以|为分割点，左边是[^\}]，右边是\}(?!\})，这就清楚了，可以匹配非}的字符，如果匹配失败，就匹配}，但是它的后面不能再有}，所以系统先使用[^\}]去匹配i,再去执行5，如果5仍不能满足，则继续匹配i,直到5匹配满足，而此时系统已经匹配到了(i,lang)
7：(?:\s+(.*?)?)?中的(.*?)?依旧是惰性匹配，系统先尝试不匹配
8：尝试匹配(?:\(((?:[^\}]|\}(?!\}))*?)?\))?，发现匹配失败，因为量词的缘故，继续后续的匹配
9：尝试匹配\s*\}\}，如果从$开始匹配，果断匹配失败。
10：返回到惰性匹配那，让(.*?)尝试匹配L,再执行8，9步，直到它能满足，如果不能正则匹配不成功。最后(.*?)匹配了Langs,完成了整个正则的匹配。
那{{/each}}则就是一个道理。但要注意这个/，因为如果/匹配了，那replace匹配函数中的slash将会是/，则根据tag[ slash ? "close" : "open" ]，它将使用tag['close']来闭合这个each，这也就是为什么拥有open的close的原因。
关于each是如何实现的，我们需要看到源码的这个部分：
"each": { _default: { $2: "$index, $value" }, open: "if($notnull_1){$.each($1a,function($2){with(this){", close: "}});}" }
replace的匹配方法中有7个参数，其中type参数就是each，根据
var tag = jQuery.tmpl.tag[ type ]
这里我们可以看到其实实现each的功能仅仅是将$.each写入字符串中，它的参数有$index和$value，这其实就是jQuery的each方法。代码的后续会将其取出，进行拼接。
4.if和else的用法
例子：
<script type="text/html" id="template1">
<tr>
<td>${ID}</td>
<td>${Name}</td>
<td>
{{if Langs.length > 1}}
${Langs.join('; ')}
{{else}}
${Langs}
{{/if}}
</td>
</tr>
</script>
var users = [
{
ID: 'think8848',
Name: 'Joseph Chan',
Langs: [
'Chinese',
'English'
]
},
{
ID: 'aCloud',
Name: 'Mary Cheung',
Langs: [
'Chinese',
'French'
]
}
]
$('#template1').tmpl(users).appendTo('#table1');
<table id="table1"></table>
其实if，else跟each差不多在正则匹配的时候，这里我就不重复了。看一下对应的函数
"if": { open: "if(($notnull_1) && $1a){", close: "}" }, "else": { _default: { $1: "true" }, open: "}else if(($notnull_1) && $1a){" },
注意一下，在这里if拥有close而else则没有，反映到模版书写上，闭合的时候我们只需要写{{/if}}就可以了，不需要写{{/else}}
5.html占位符
例子5：
<script type="text/html" id="template1">
<tr>
<td>${ID}</td>
<td>${Name}</td>
<td>{{html Ctrl}}</td>
</tr>
</script>
var users = [
{
ID: 'think8848',
Name: 'Joseph Chan',
Ctrl: '<input type="button" value="Demo"/>'
},
{
ID: 'aCloud',
Name: 'Mary Cheung',
Ctrl: '<input type="button" value="Demo"/>'
}
];
$('#template1').tmpl(users).appendTo('#table1')
$('table').delegate('tr','click',function(){
var item = $.tmplItem(this);
alert(item.data.Name);
})
<table id="table1"></table>
这里看一下模版的{{html Ctrl}}，匹配规则还是一样的。看一下拓展的部分：
"html": { // Unecoded expression evaluation. open: "if($notnull_1){__.push($1a);}" }
注意，这时允许你脚本插入的，也就是如果你插入一个<script type="text/javascript" >alert(1)<\/script>,生成的页面是可以弹出alert(1)的。这跟跟换ID和Name是一个意思。
6.{{tmpl}}
例子6：
<script type="text/html" id="template1">
<tr>
<td>${ID}</td>
<td>${Name}</td>
<td>{{tmpl($data) '#template2'}}</td>
</tr>
</script>
<script type="text/html" id="template2">
{{each Langs}}
${$value}
{{/each}}
</script>
var users = [
{
ID: 'think8848',
Name: 'Joseph Chan',
Langs:[
'Chinese',
'English'
]
},
{
ID: 'aCloud',
Name: 'Mary Cheung',
Langs: [
'Chinese',
'French'
]
}
];
$('#template1').tmpl(users).appendTo('#table1');
<table id="table1"></table>
看一下{{tmpl($data) '#template2'}}，正则匹配是跟以前一样的。我们看一下扩展
"tmpl": { _default: { $2: "null" }, open: "if($notnull_1){__=__.concat($item.nest($1,$2));}" // tmpl target parameter can be of type function, so use $1, not $1a (so not auto detection of functions) // This means that {{tmpl foo}} treats foo as a template (which IS a function). // Explicit parens can be used if foo is a function that returns a template: {{tmpl foo()}}. }
注意里面有个方法nest，找到newTmplItem方法里的我们定义的newItem，看一下，它里面是否有个属性是nest，有，是tiNest，看一下tiNest
function tiNest( tmpl, data, options ) { // nested template, using {{tmpl}} tag return jQuery.tmpl( jQuery.template( tmpl ), data, options, this ); }
这里我们大概可以了解这种解析过程，先template1的模版，我们在template1中标记了tmpl，当我们第一次执行匿名函数的时候，它执行nest方法，再次去执行jQuery.tmpl，然后你们懂的，生成关于template2的匿名函数等等。所以这里模版的1中的指向id千万不要写错，否则报错。
看到jQuery.template方法中的这个部分
return name ? (typeof name !== "string" ? jQuery.template( null, name ): (jQuery.template[name] || // If not in map, and not containing at least on HTML tag, treat as a selector. // (If integrated with core, use quickExpr.exec) jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
因为我们第一次没有存储匿名函数(保存模板的作用)，也不需要存储。所以执行jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name ))，这里我们看到一条正则
htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /
这个比较简单，留给读者吧，呵呵。匹配结果当然是不满足，我们使用jQuery()去创建jQuery对象，重新执行template方法，生成相应的匿名函数等。
7.{{wrap}}包装器
例子：
<script type="text/html" id="myTmpl"> The following wraps and reorder some HTML content: {{wrap "#tableWrapper"}} <h3>One</h3> <div> First: <b>content</b> </div> <h3>Two</h3> <div> And <em>more</em> <b>content</b> </div> {{/wrap}} </script> <script type="text/html" id="tableWrapper"> <table cellspacing="0" cellpadding="3" border="1"> <tbody> <tr> {{each $item.html("h3",true)}} <td> ${$value} </td> {{/each}} </tr> <tr> {{each $item.html("div")}} <td> {{html $value}} </td> {{/each}} </tr> </tbody> </table> </script>
<div id="wrapDemo"></div>
依照惯例，看一下拓展部分
"wrap": { _default: { $2: "null" }, open: "$item.calls(__,$1,$2);__=[];", close: "call=$item.calls();__=call._.concat($item.wrap(call,__));" }
这里我们看到了两个新方法：calls()和wrap()，找到newTmplItem里面的newItem，来看一下这两个方法
calls：
function tiCalls( content, tmpl, data, options ) { if ( !content ) { return stack.pop(); } stack.push({ _: content, tmpl: tmpl, item:this, data: data, options: options }); }
wrap：
function tiWrap( call, wrapped ) { // nested template, using {{wrap}} tag var options = call.options || {}; options.wrapped = wrapped; // Apply the template, which may incorporate wrapped content, return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item ); }
这跟6的运行模式差不多，很不幸的是，我的源码在执行这个例子的时候出错，后来我找了一段时间后发现问题，将源码修改了一下。恢复正常了。修改tiHtml方法里
return jQuery.map( jQuery( jQuery.isArray( wrapped ) ? wrapped.join("") : jQuery.trim(wrapped) ).filter( filter || "*" ), function(e) { return textOnly ? e.innerText || e.textContent : e.outerHTML || outerHtml(e); });
7和6例子一样，在匿名函数执行的时候，重新执行了jQuery.tmpl获取了新模板的内容，生成了匿名函数，如果你们有功夫看一下生成的匿名函数，你们会发现里面都很多newItem事先定义好的方法调用，然后在执行这些匿名函数的时候，依次调用这些方法。
8.$.tmplItem()
例子可以看例子5，其实这个方法就很简单了。看一下源码
tmplItem: function( elem ) { var tmplItem; if ( elem instanceof jQuery ) { elem = elem[0]; } while ( elem && elem.nodeType === 1 && !(tmplItem = jQuery.data( elem, "tmplItem" )) && (elem = elem.parentNode) ) {}//获取data信息，用户传入的内容信息 return tmplItem || topTmplItem; }
可以看到这个while循环不断向上查询，因为在我们第一个例子中，我们在storeTmplItems方法中，进行一定的保存。这里就是查找到显示出来。
9.结语
以上基本完成了一个源码的阅读，从中学习的东西有很多，类似模板一类的框架，需要一个强大的正则解析，需要能将数据元与字符串很好结合的方法，而这个框架则是用正则生成这个方法。这个框架也提供了一些向上遍历的方式，大家都可以借鉴。这里暂时不讨论该框架的执行效率。我们以后还会接触到别的更好更强大的框架。这只是个开始。内容不多，时间刚好，这是我的读码体会，可能不全，也会有错误，希望园友们提出来，大家一起探讨学习。
