模板是通过JavaScript控制DOM的最好方式,在jQuery1.4之前没有使用模板,他使用字符串拼接DOM,所以在代码维护方面是很困难的!1.4之后才使用模板,所谓模板就是模板方法设计模式,通过一套固定不变的流程进行代码设计,在Ext中使用了两个类作为模板,分别是基类:Template和直接子类XTemplate;Ext主要使用的是XTemplate,因为功能强大。
通过其构造方法可以了解,就是简单的把HTML字符串参数数组进行拼接成一条HTML语句,这个时候所有的占位符还不需要处理,具体如下:
var tpl = new Ext.Template('<div>','{value0}{value1}{value2}','</div>',{compiled:true,disableFormats:true});
这样他就可以把div拼接接成一个HTML代码,然后使用,编译后apply方法进行占位符替换
var html = tpl.applyTemplate({value0:'value0',value1:'value1',value2:'value2'})
tpl.complile(); var html = tpl.compiled;
最后得到的结果是一样的,使用apply或applyTemplate方法的原理是使用正则表达式进行占位符替换,这样速度相当较慢;
使用compile则是对字符串进行拼接操作,速度相对较快。
他是Template的直接子类,其主要是重写了Template的apply方法和applyOut方法,其余方法全部继承自Template,所以二者相似度很大,但是XTemplate功能强大,基本上Ext是基于XTemplate定义的。
XTemplate对象就是Template对象的基本数据显示再加上tpl标签实现其独有的高级功能(内部使用XTemplateCompiler对象就是一个高级编译器,可以将模板编译成可执行的脚本,用于输出的html中动态执行)组合在一起,当然这种采用tpl标签的操作就类似于JSP的书写方式,个人感觉代码相对比较混乱,但是他却做到了数据与显示达到分离的效果。
1)append:将数据应用到模板,并追加到指定元素
2)applyTemplate、apply:将数据应用到模板,并且返回生成的代码
3)compile:编译模板
4)from:从innerHTML创建模板
5)insertAfter、insertBefore、inserFirst:指定位置出操作DOM元素
6)overwrite:将数据应用到模板,并且覆盖元素内容
7)set:设置模板内容
var tpl = new Ext.Template('<div><a href="{src}">{text:this.hightlight}</a><div>'); tpl.searchString = "降价"; tpl.highlight = function(v){ var search = this.searchString; re = new RegExt(search,"g"); replace = "<font color='red'>"+search+"</font>"; return v.replace(re,replace); } var value = {src:"/1000",text:"汽车又降价了"}; console.log(tpl.applyTemplate(value)); 结果为: <div><a href="/1000">汽车又<font color="red">降价<font>了</a></div>
<h1>使用标签tpl和操作符for</h1> <div class="content" id="div1"></div> <h1>在子模板的范围内访问父元素对象</h1> <div class="content" id="div2"></div> <h1>数组元素索引和简单运算支持</h1> <div class="content" id="div3"></div> <h1>自动渲染单根数组</h1> <div class="content" id="div4"></div> <h1>条件逻辑判断</h1> <div class="content" id="div5"></div> <h1>即时执行任意的代码</h1> <div class="content" id="div6"></div> <h1>模板成员函数</h1> <div class="content" id="div7"></div>
var data = { name: '张三', job: 'C#程序员', company: '惠普', email: '[email protected]', address: '武汉市洪山区光谷软件园', city: '武汉', state: '正常', zip: '430000', drinks: ['绿茶', '红酒', '咖啡'], friends: [{ name: '李四', age: 6, like: '鲜花' }, { name: '王五', age: 26, like: '足球' }, { name: '赵六', age: 81, like: '游戏' }] };
//使用标签tpl和操作符for var tpl = new Ext.XTemplate( '<table cellpadding=0 cellspacing=0 border=1 width=400px>', '<tr><td colspan=2 align=center><b>{name}的个人资料</b></td></tr>', '<tr><td>姓名:</td><td>{name}</td></tr>', '<tr><td>工作:</td><td>{job}</td></tr>', '<tr><td>公司:</td><td>{company}</td></tr>', '<tr><td>地址:</td><td>{address}</td></tr>', '<tr><td>喜好饮品:</td><td>{drinks}</td></tr>', '<tr><td>他的好友:</td><td>', '<tpl for="friends">', '<p>{name}:{age}岁</p>', '</tpl></td></tr>', '</table>' ); tpl.overwrite(Ext.get("div1"), data);
参考:
1)EXJS 权威指南
2)博客 http://www.cnblogs.com/lipan/archive/2011/12/12/2274740.html