* * / * ( --匹配捕获($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++ ) { ; } 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; ( (key = el.getAttribute( tmplItmAtt ))) {( pntNode.parentNode && (pntNode = pntNode.parentNode).nodeType === 1 && !(pntKey = pntNode.getAttribute( tmplItmAtt ))) { }( pntKey !== key ) {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" )) ) { cloneTmplItem( tmplItem.key ); newTmplItems[tmplItem.key] = tmplItem; pntNode = jQuery.data( el.parentNode, "tmplItem" ); pntNode = pntNode ? pntNode.key : 0; } if ( tmplItem ) {//遍历到最外层的元素 pntItem = tmplItem; ( pntItem && pntItem.key != pntNode ) { pntItem.nodes.push( el ); pntItem = pntItem.parent;//向上迭代 } tmplItem._ctnt;tmplItem._wrap;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编译成模版

var markup = '<tr><td>${ID}</td><td>${Name}</td></tr>'; $.template('template', markup); $.tmpl('template', users).appendTo('#templateRows');

直接看一下$.template方法

tmpl = buildTmplFn( tmpl ); }

可以看到，我们传入的markup是一个字符串，直接将这个markup传入buildTmplFn中去生成一个匿名函数。

插件内部将编译好的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表示当前数据