ExtJS Template XTemplate 学习笔记

最新推荐文章于 2017-07-13 22:34:00 发布

weixin_33698823

最新推荐文章于 2017-07-13 22:34:00 发布

阅读量157

点赞数

文章标签： python javascript 设计模式 ViewUI

原文链接：https://my.oschina.net/heweipo/blog/408897

版权

2019独角兽企业重金招聘Python工程师标准>>>

模板是通过JavaScript控制DOM的最好方式，在jQuery1.4之前没有使用模板，他使用字符串拼接DOM，所以在代码维护方面是很困难的！1.4之后才使用模板，所谓模板就是模板方法设计模式，通过一套固定不变的流程进行代码设计，在Ext中使用了两个类作为模板，分别是基类：Template和直接子类XTemplate；Ext主要使用的是XTemplate，因为功能强大。

1、 Template

通过其构造方法可以了解，就是简单的把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则是对字符串进行拼接操作，速度相对较快。

2、XTemplate

他是Template的直接子类，其主要是重写了Template的apply方法和applyOut方法，其余方法全部继承自Template，所以二者相似度很大，但是XTemplate功能强大，基本上Ext是基于XTemplate定义的。

XTemplate对象就是Template对象的基本数据显示再加上tpl标签实现其独有的高级功能（内部使用XTemplateCompiler对象就是一个高级编译器，可以将模板编译成可执行的脚本，用于输出的html中动态执行）组合在一起，当然这种采用tpl标签的操作就类似于JSP的书写方式，个人感觉代码相对比较混乱，但是他却做到了数据与显示达到分离的效果。

3、主要方法

1）append：将数据应用到模板，并追加到指定元素

2）applyTemplate、apply：将数据应用到模板，并且返回生成的代码

3）compile：编译模板

4）from：从innerHTML创建模板

5）insertAfter、insertBefore、inserFirst：指定位置出操作DOM元素

6）overwrite：将数据应用到模板，并且覆盖元素内容

7）set：设置模板内容

4、自定义格式化函数

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>

5、XTemplate tpl使用实例（转载自 http://www.cnblogs.com/lipan/archive/2011/12/12/2274740.html）

<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: 'zhangsan@163.com',
    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

转载于:https://my.oschina.net/heweipo/blog/408897