`
zhouyrt
  • 浏览: 1172257 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

读Ext之十四(Ext元素)

 
阅读更多

上篇读了Ext.Element的部分方法,这篇继续。El.addMethods方法,

var ep = El.prototype;
El.addMethods = function(o){
   Ext.apply(ep, o);
};

 

El是Ext.Element类的简写,addMethods可认为是该类的静态方法。无须new使用类名直接调用。其内部调用的是Ext.apply,该方法会将o上的所有属性方法拷贝到ep上。
使用该方法为Ext.Element类的原型上添加属性,方法。如Ext中队样式的操作、动画、位置等都是通过该方法扩展。
Ext.apply在 读Ext之一(实用方法) 中介绍了。

接着看El.get(该类的静态方法),

El.get = function(el){
    var ex,
        elm,
        id;
    if(!el){ return null; }
    if (typeof el == "string") { // element id
    	// 先使用document.getElementById获取,如果不存在直接返回null
        if (!(elm = DOC.getElementById(el))) {
            return null;
        }
        if (EC[el] && EC[el].el) {
            ex = EC[el].el;
            ex.dom = elm;
        } else {
            ex = El.addToCache(new El(elm));
        }
        return ex;
    } else if (el.tagName) { // dom element
        if(!(id = el.id)){
            id = Ext.id(el);
        }
        if (EC[id] && EC[id].el) {// 先从缓存(Ext.elCache)中取
            ex = EC[id].el;
            ex.dom = el;
        } else {
            ex = El.addToCache(new El(el));// new一个Ext.Element再将其放入缓存中(Ext.elCache)
        }
        return ex;
    } else if (el instanceof El) {
        if(el != docEl){
            el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
                                                          // catch case where it hasn't been appended
        }
        return el;
    } else if(el.isComposite) {
        return el;
    } else if(Ext.isArray(el)) {
        return El.select(el);
    } else if(el == DOC) {
        // create a bogus element object representing the document object
        if(!docEl){
            var f = function(){};
            f.prototype = El.prototype;
            docEl = new f();
            docEl.dom = DOC;
        }
        return docEl;
    }
    return null;
};
 

该方法是Ext中很重要的方法,用来获取Ext元素(Ext.Element)而不是HTMLElement。想获取对应的HTMLElement,可以这么使用

Ext.get('id').dom;

Ext.get是该方法的别名。通常直接使用Ext.get而不是Ext.Element.get。该方法内部实现如下,

分支1,传id
先使用document.getElementById获取,如果不存在直接返回null。存在的话,先从缓存(Ext.elCache)中取,否则new一个Ext.Element再将其置入缓存中(Ext.elCache)

分支2,传HTMLElement对象
与传id类似,取到id后先从缓存中去,没有则创建Ext.Element再将其置入缓存后返回。


分支3,传Ext.Element对象
如果不是docEl(一个临时类),则修改所传参数的dom属性(更新dom)然后返回。

分支4,传Ext.CompositeElementLite对象
Ext.CompositeElementLite 在后续会介绍,这个类用来操作批量的Ext.Element。


分支5,传数组
使用El.select返回,El.select后续介绍。

分支6,传document
如果docEl不存在则创建。因为document是唯一的,因此该对象只创建一次。后续直接返回即可。可以看到docEl与普通Ext.Element不同之处在于其dom属性一个是document,一个则不是。


分支1中用到了Ext.addToCache,

El.addToCache = function(el, id){
    id = id || el.id;    
    EC[id] = {
        el:  el,
        data: {},
        events: {}
    };
    return el;
};
 

可以看到即把Ext.Element元素以id为key存放到Ext.elCache中。
存放的改对象有三个属性,el是Ext.Element的实例对象,data用来存储数据(El.data用到),events用来存放事件。

再往下是El.data方法,该方法是供库内部使用的,它即是setter也是getter。

El.data = function(el, key, value){
    el = El.get(el);
    if (!el) {
        return null;
    }
    var c = EC[el.id].data;
    if(arguments.length == 2){
        return c[key];
    }else{
        return (c[key] = value);
    }
};
 

可以这么测试,

var p1 = document.getElementById('p1');
Ext.Element.data(p1,'name','jack'); // setter
Ext.Element.data(p1,'name'); // getter
 

经常使用jQuery的人会想到 $.data ,接口于此类似。当然jQuery还有$().data。

接下来是garbageCollect函数,

function garbageCollect(){
    if(!Ext.enableGarbageCollector){
        clearInterval(El.collectorThreadId);
    } else {
        var eid,
            el,
            d,
            o;

        for(eid in EC){
            o = EC[eid];
            if(o.skipGC){
                continue;
            }
            el = o.el;
            d = el.dom;
            if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){
                if(Ext.enableListenerCollection){
                    Ext.EventManager.removeAll(d);
                }
                delete EC[eid];
            }
        }
        // Cleanup IE Object leaks
        if (Ext.isIE) {
            var t = {};
            for (eid in EC) {
                t[eid] = EC[eid];
            }
            EC = Ext.elCache = t;
        }
    }
}
El.collectorThreadId = setInterval(garbageCollect, 30000);
 

可以看到,每隔30秒会进行一次垃圾回收。即遍历Ext.elCache。取Ext元素的dom属性,如果存在以下条件则清空(包括其上的所有事件handler)
1,dom不存在
2,dom的父元素不存在
3,页面上获取不到该dom元素

接下来是Ext.fly,该方法实际上是Ext.Element.fly的别名,客户端程序员多数时候使用Ext.fly而非Ext.Element.fly。

var flyFn = function(){};
flyFn.prototype = El.prototype;

El.Flyweight = function(dom){
    this.dom = dom;
};

El.Flyweight.prototype = new flyFn();
El.Flyweight.prototype.isFlyweight = true;
El._flyweights = {};

El.fly = function(el, named){
    var ret = null;
    named = named || '_global';
    if (el = Ext.getDom(el)) {
        (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
        ret = El._flyweights[named];
    }
    return ret;
};
 

依次定义了flyFn,El.Flyweight。flyFn的原型是Ext.Element.prototype,El.Flyweight的原型是flyFn的实例对象。
即El.Flyweight类继承了Ext.Element类原型上的所有属性,方法。

El.Flyweight.prototype.isFlyweight = true;

该句通过isFlyweight标示对象是否为Ext.Element.Flyweight类型对象。

El._flyweights暂存该类型对象,为一个hash。

El.fly 每次调用都会去创建一个Ext.Element.Flyweight对象,存在El._flyweights后返回。示意图如下:

 

注意:El.fly(即Ext.fly)并未将创建的对象缓存,每次调用都将覆盖之前的(除非每次所传的第二个参数named不同)。
这是Ext.fly不同于Ext.get的地方。这种设计模式称为享元模式(Flyweight),它通过颗粒化将属性分为内部及外部以达到共享从而节省内存。享元模式的实现通常需用到工厂模式。

 

再往下是

Ext.EventManager.on(window, 'unload', function(){
    delete EC;
    delete El._flyweights;
});

 

在页面卸载的最后时刻会清空所有的缓存。

 

 

 

  • 大小: 24.7 KB
分享到:
评论
1 楼 tangjikey 2012-04-23  
纳闷,这个地方get怎么不用switch?分支太多了。

相关推荐

    读Ext之十三(Ext元素)

    标题“读Ext之十三(Ext元素)”暗示我们将关注Ext.js中的元素操作,这是构建用户界面的基础。Element是Ext.js中的一个核心类,它封装了DOM元素的操作,提供了大量便捷的方法来处理样式、事件、动画等。 描述中提到...

    读Ext之十五(操作批量元素)

    "读Ext之十五(操作批量元素)"这篇博客文章可能详细讲解了如何在ExtJS中对多个DOM元素进行批量操作,这对于提高代码效率和减少重复工作至关重要。在ExtJS中,处理一组元素时,我们通常会使用CompositeElementLite类...

    读Ext之十二(在各个位置插入元素)

    本文将深入探讨“读Ext之十二(在各个位置插入元素)”这一主题,主要关注如何利用ExtJS中的DomHelper工具来高效地在DOM树中插入元素。 首先,DomHelper是ExtJS中用于操作DOM的一个重要工具类,它的主要职责是创建...

    收集的一些常用的ext图标

    在IT行业中,前端开发是至关重要的一环,而优秀的用户界面设计是提升用户体验的关键因素之一。"收集的一些常用的ext图标"这个资源包显然聚焦于前端开发中的图标应用,特别是与EXT框架相关的图标。EXT是一个强大的...

    Ext资料 Ext中文手册 Ext明教程 等

    1. **Ext组件库**:Ext的核心是其组件系统,包括各种UI组件如表格、树形视图、面板、窗口、表单元素等。每个组件都有自己的属性、方法和事件,通过这些组件可以构建出复杂的用户界面。 2. **数据绑定**:Ext的数据...

    Ext解析XML实例

    - **XML**(可扩展标记语言):一种用于存储和传输数据的标准格式,它以人类可读的形式定义了数据结构。 - **树形结构**:在计算机科学中,树是一种抽象的数据类型,用来模拟具有层次关系的结构集合。 #### 关键...

    ext4.0的提示ext4.0.jsb2+Spket 插件

    2. **语法高亮**:不同类型的代码元素有不同的颜色显示,使代码更易读。 3. **代码格式化**:自动整理代码格式,保持代码整洁。 4. **错误检查**:在编写过程中检查代码错误,及时发现问题。 5. **调试工具**:支持...

    Ext IDE

    总的来说,"Ext IDE"通过与Eclipse的集成,为EXT开发提供了一站式的解决方案,提升了开发者的生产力和代码质量,是EXT开发者不可或缺的工具之一。安装并熟练使用这个插件,将使EXT项目的开发变得更加得心应手。

    Ext+json,+jquery培训资料

    EXT是一个强大的JavaScript库,主要用于构建富客户端应用程序,它提供了丰富的组件和用户界面元素。jQuery则是一个轻量级的JavaScript库,简化了DOM操作、事件处理和动画效果。 1. **EXT开发技术准备**: - EXT的...

    ext spket-1.6.18

    2. **语法高亮**:在编辑器中,Spket会根据Ext JS的语法规则进行颜色标记,使代码更易读,便于快速定位问题。 3. **错误检查**:在编码过程中,Spket能实时检测代码中的语法错误和潜在问题,有助于早期发现并修复...

    ext ,javascript流程设计插件

    1. **图形化界面**:EXT的组件库提供了各种预定义的UI元素,如按钮、表单、面板等,可以用来构建流程设计的交互界面。jGraphX则负责绘制流程图,使得用户可以通过拖拽节点、连接线来直观地创建和修改流程。 2. **...

    Ext JS框架 经验之作2000页

    ### Ext JS框架 经验之作2000页 #### 概述 本文档旨在提供一个全面且深入的指南,帮助读者理解并掌握Ext JS框架的各个方面。Ext JS是一款非常强大的JavaScript库,用于构建交互式的Web应用程序。它以其丰富的组件库...

    Worstveld_sling_ext

    在设计领域,字体是传达信息和创造视觉效果的重要元素。今天我们要探讨的是名为"Worstveld_sling_ext"的独特字体,它以其独特的风格和特性,在众多字体中独树一帜。这款字体的设计灵感可能源于荷兰设计师Gerrit ...

    第九章Ext2文件系统1

    在Ext2文件系统中,具体文件系统管理的是一个逻辑空间,这个逻辑空间就像一个大的数组,数组的每个元素就是文件系统操作的基本单位——逻辑块,逻辑块是从0开始编号的,而且,逻辑块是连续的。与逻辑块相对的是物理...

    ext经典资料学习—201012

    10. **Ext.Updater**:Updater组件负责页面元素的内容更新,通常用于局部刷新,它可以从服务器获取数据并替换指定DOM元素的内容。 11. **JSON 序列化篇**:EXTJS支持JSON序列化和反序列化,便于数据在客户端和...

    ext-2.2.zip

    【标题】"ext-2.2.zip"是一个压缩文件,其中包含了"ext-2.2"这个特定版本的EXTJS库。EXTJS是一个基于JavaScript的前端框架,它提供了丰富的用户界面组件和强大的数据管理功能,常用于开发交互式Web应用程序。 ...

    ext 代码生成器

    2. **Ext.QuickTips.init()**:这是初始化EXTJS的快速提示功能,当鼠标悬停在特定元素上时,可以显示简短的信息提示。 3. **formatDate(value)** 函数:这是一个自定义日期格式化函数,将日期对象转换为"M d, Y...

    各种手册css、DOM、EXT_API、网页制作完全手册、jsp、mysql、sql server 2000 函数大全、SQL语言参考大全

    理解CSS有助于创建响应式、易读且美观的网页。 2. **DOM(文档对象模型)**: DOM是HTML和XML文档的结构化表示,提供了通过编程方式操作网页内容的接口。学习DOM能帮助开发者动态地添加、修改或删除网页元素,实现...

    ExtjS实现聊天功能

    同时,也可以通过改变界面元素(如图标、数字标签)来显示未读消息的数量。 8. **样式定制**:ExtJS允许通过CSS或SASS进行样式定制,以达到与QQ类似的视觉效果。使用`Ext.util.CSS`和`Ext.dom.Element`可以方便地...

    解决EXT.NET在IE9下中文太小Default.css

    12. `.x-date-middle, .x-date-left, .x-date-right`:日期选择器相关元素的字体大小,确保日期选择的易读性。 13. `.x-date-mp td, .x-date-mp-btns button`:日期选择对话框的字体大小,便于选择日期。 14. `.x-...

Global site tag (gtag.js) - Google Analytics