extjs之模板分析深入

既然上篇我们已经抓到了精髓，那么这次要加快进度了。

Template-more.js文件里代码依旧少得可怜，所以我们一眼就认出了applyTemplate和compile这两个老朋友，虽然改头换面了一番，但那无与伦比的气质依然深深出卖了它们。

首先我们来看applyTemplate函数，上回这个函数只是一笔带过，当将compiled设为false时，将调用这个函数直接产生结果。这在模板实例用的次数不多的情况下是没问题的，但这里再强调一次，如果频繁使用相同实例（确切地说，是模板实例的html字符串保持不变），务必将compiled设为true。下面贴函数定义（话说这次可以贴代码了）：

applyTemplate : function(values){ var me = this, useF = me.disableFormats !== true,// fm = Ext.util.Format, //Ext自带的格式化函数类 tpl = me; if(me.compiled){ return me.compiled(values);//若编译，则编译 } function fn(m, name, format, args){ if (format && useF) { if (format.substr(0, 5) == "this.") {//如果是自定义格式化函数（作为配置项传入） //注意此处参数Ext给定死了，我们可以扩展传入自己需要的东西 return tpl.call(format.substr(5), values[name], values); } else {//否则为标准格式化函数 if (args) { var re = /^/s*['"](.*)["']/s*$/; args = args.split(','); for(var i = 0, len = args.length; i < len; i++){ //$1表示第一个匹配子字符串，此处是.*。这句代码的意思是去掉参数外的引号 args[i] = args[i].replace(re, "$1"); } args = [values[name]].concat(args); } else { args = [values[name]]; } return fm[format].apply(fm, args); } } else { return values[name] !== undefined ? values[name] : ""; } } return me.html.replace(me.re, fn); }  

 该函数结构简单，主体定义了replace要用到的局部函数fn，它的参数相较之前多了两个，format和args，表示格式化函数和参数。me.re也更加复杂，//{([/w-]+)(?:/:([/w/.]*)(?:/((.*?)?/))?)?/}/g，分析的方法和上回讲的一样，不过要注意的是包含'?:'的小括号内容为非捕获分组，即匹配的内容不作为参数传给fn。另外还有个知识点：*?，限定符后面加一个问号，表示在匹配成功的前提下，匹配的字符串尽可能短。此处相当于如果出现类似'(("params")))'会匹配到"params"，而不是错误的'("params"))'。

再来看compile函数。

compile : function(){ var me = this, fm = Ext.util.Format, useF = me.disableFormats !== true, sep = Ext.isGecko ? "+" : ",",//此处仍然让我困惑 body; function fn(m, name, format, args){ if(format && useF){ args = args ? ',' + args : ""; if(format.substr(0, 5) != "this."){ format = "fm." + format + '('; }else{ format = 'this.call("'+ format.substr(5) + '", '; args = ", values"; } }else{ args= ''; format = "(values['" + name + "'] == undefined ? '' : "; } return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'"; } if(Ext.isGecko){ body = "this.compiled = function(values){ return '" + me.html.replace(g, '').replace(/(/r/n|/n)/g, '//n').replace(/'/g, "//'").replace(this.re, fn) + "';};"; }else{ body = ["this.compiled = function(values){ return ['"]; body.push(me.html.replace(g, '').replace(/(/r/n|/n)/g, '//n').replace(/'/g, "//'").replace(this.re, fn)); body.push("'].join('');};"); body = body.join(''); } eval(body); return me; }

结合上一讲，可以很容易分析出最后生成的是什么东东。留给大家课后作业吧。

---

哎，这次好像也没讲到什么新的内容，只不过是逻辑更加复杂一点，不过我这人比较随性，制定计划的时候也没有考虑到什么深入浅出那么高深的东西。毕竟我还是菜鸟，只求自己能懂就谢天谢地了。下回分析XTemplate.js，那个文件定义的类继承Ext.Template，增加了内联逻辑功能——循环、判断、执行以及数据域的访问。那么，下回见吧。