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

欠方法会把集中指定的要素(el)用新的元素(replacement)替换。domReplace为true则将文档中之吧交替,否则只替换集合elements中的。

new 该类时

 

结构器调用了this.add,该办法如下:

Ext.Element.select = function(selector, root){
    var els;
    if(typeof selector == "string"){
        els = Ext.Element.selectorFunction(selector, root);
    }else if(selector.length !== undefined){
        els = selector;
    }else{
        throw "Invalid selector";
    }
    return new Ext.CompositeElementLite(els);
};
Ext.select = Ext.Element.select;

 

els有三栽分支:

each : function(fn, scope){       
    var me = this,
        els = me.elements,
        len = els.length,
        i, e;

    for(i = 0; i<len; i++) {
        e = els[i];
        if(e){
            e = this.getElement(e);
            if(fn.call(scope || e, e, me, i)){
                break;
            }
        }
    }
    return me;
},
Ext.CompositeElementLite = function(els, root){
    this.elements = [];
    this.add(els, root);
    this.el = new Ext.Element.Flyweight();
};
Ext.CompositeElementLite.prototype = {
    isComposite: true,    
    getElement : function(el){
        // Set the shared flyweight dom property to the current element
        var e = this.el;
        e.dom = el;
        e.id = el.id;
        return e;
    },
    ...
};

 

联网下是 each 方法,

拖欠办法重返集合this.elements的长短。

invoke : function(fn, args){
    var me = this,
        els = me.elements,
        len = els.length, 
        e, 
        i;

    for(i = 0; i < len; i++) {
        e = els[i];
        if(e){
            Ext.Element.prototype[fn].apply(me.getElement(e), args);
        }
    }
    return me;
},

 

 

getCount : function(){
    return this.elements.length;
}, 

随后是 getElement 方法,也特于此类内部用

 

搭下是 filter 方法,

往下是 getCount方法,

好了,介绍了怎么使。看看它是什么落实之,

isComposite
用来代表对象是Ext.CompositeElementLite类的目的。仅于接近里用。在点提到的add方法中之所以到了。

this.elements 存放的是HTMLElement
this.el 是Ext.Element.Flyweight 对象

斯点子用来将el转成为HTMLElement,下边依次看原型上之任何性质,方法

分开支3,els不可迭代,即未是多次组,也不是目的。
如传一个div元素,那么用其包装成组。

接着看 replaceElement 方法,

摘页面中之段落p元素,为其补偿加类cls,再为该上加点击事件。只要肯你可以一向点操作下。

故而来得到构造器中定义的字段el(Ext.Element.Flyweight),Ext.Element.Flyweight基本上可以算是Ext.Element。
斯点子设计相当巧妙,它并没有每一趟都new一个Ext.Element.Flyweight,然后赋值给this.el。而是继续下就部分this.el,只是更新了this.el.dom和this.el.id。

由此来迭代集合中之素,使用fn来调用,scope指定fn的上下文。与JQuery的 $().each 类似。

可怜简短,其实里面才是new了只Ext.CompositeElementLite,精晓了此类。其实就了然了Ext.select。

 

接着是 fill 方法,

一言以蔽之讲就是将Ext.Element.prototype的函数fn在指定的上下文(me.getElement(e))上推行。

Ext.select / Ext.element.select 依赖于Ext.CompositeElementLite。

就此来让集合中之兼具因素添加事件,内部使用前提到的
Ext.伊夫ntManager.on方法。

杀熟习吧,和String和Array的indexOf类似,尽管存在回其索引,否则回-1。内部实际行使的虽是一再组的indexOf方法。
indexOf是ECMAScript
5遇数组新加之。IE6等老浏览器不辅助,Ext给Array的原型添加了拖欠方法,见 读Ext之三(原型扩大) 。

通下去是 invoke 方法,

clear : function(){
    this.elements = [];
}
(function(){
var fnName,
    ElProto = Ext.Element.prototype,
    CelProto = Ext.CompositeElementLite.prototype;

for(fnName in ElProto){
    if(Ext.isFunction(ElProto[fnName])){
        (function(fnName){ 
            CelProto[fnName] = CelProto[fnName] || function(){
                return this.invoke(fnName, arguments);
            };
        }).call(CelProto, fnName);

    }
}
})();
// private
transformElement : function(el){
    return Ext.getDom(el);
},

接下是 item 方法,

add : function(els, root){
    var me = this,
        elements = me.elements;
    if(!els){
        return this;
    }
    if(Ext.isString(els)){
        els = Ext.Element.selectorFunction(els, root);
    }else if(els.isComposite){
        els = els.elements;
    }else if(!Ext.isIterable(els)){
        els = [els];
    }

    for(var i = 0, len = els.length; i < len; ++i){
        elements.push(me.transformElement(els[i]));
    }
    return me;
},

参数selector可以是css采纳器(字符串),可以是HTMLELement集合。将该看成参数传被new
Ext.CompositeElementLite。重临的凡Ext.CompositeElementLite的实例对象。

子1,els为字符串(css采用器如.cls)
调用Ext.Element.selectorFunction,再次回到数组。该函数是Ext.DomQuery.select的别名。Ext.DomQuery.select暂勿领取,只待领会调用后会合回去一个勤组,数组中存放的是HTMLElement。

filter : function(selector){
    var els = [],
        me = this,
        elements = me.elements,
        fn = Ext.isFunction(selector) ? selector
            : function(el){
                return el.is(selector);
            };


    me.each(function(el, self, i){
        if(fn(el, i) !== false){
            els[els.length] = me.transformElement(el);
        }
    });
    me.elements = els;
    return me;
},

立即段代码对于初学JS的程序员了解起来比困难。逐渐看吧..

ECMAScript,重往下是  indexof 方法,

它回到集合中指定的要素,如cel.item(1)再次回到集合中的亚独因素。

 

replaceElement : function(el, replacement, domReplace){
    var index = !isNaN(el) ? el : this.indexOf(el),
        d;
    if(index > -1){
        replacement = Ext.getDom(replacement);
        if(domReplace){
            d = this.elements[index];
            d.parentNode.insertBefore(replacement, d);
            Ext.removeNode(d);
        }
        this.elements.splice(index, 1, replacement);
    }
    return this;
},
Ext.select('p')
   .addClass('.cls')
   .on('click',function(){alert(this)});

哦,还是没领悟。实际上这一个函数不是提供于客户端程序员的,它是为此来扩展Ext.CompositeElementLite类的。
即将Ext.Element原型上之所有方都复制给Ext.CompositeElementLite的原型。以下代码就是关系这一个从之

fill : function(els){
    var me = this;
    me.elements = [];
    me.add(els);
    return me;
},

可寓目Ext.select是Ext.Element.select的号,它又简单。Ext.select
在普通开支中平日利用及。
其极度给JQuery的采用器,即往往是优先稳住到某个(或少数)元素(或因素集合)后再行开展同样雨后春笋操作(方法调用)。不知注意到无,Ext.CompositeElementLite的点子吃都会晤回自己(this)。
之所以得以实现 链式调用 的语法效果。如

item : function(index){
    var me = this,
        el = me.elements[index],
        out = null;

    if(el){
        out = me.getElement(el);
    }
    return out;
},
addListener : function(eventName, handler, scope, opt){
    var els = this.elements,
        len = els.length,
        i, e;

    for(i = 0; i<len; i++) {
        e = els[i];
        if(e) {
            Ext.EventManager.on(e, eventName, handler, scope || e, opt);
        }
    }
    return this;
},
isComposite: true,  

 

var cel = new Ext.Ext.CompositeElementLite(els,root); 

indexOf : function(el){
    return this.elements.indexOf(this.transformElement(el));
},

CompositeElementLite.js

类似的约结构如下(省略了挂在prototype上之洋洋形式),

getElement : function(el){
    // Set the shared flyweight dom property to the current element
    var e = this.el;
    e.dom = el;
    e.id = el.id;
    return e;
},

结构器内定义了多少个个字段

 

往下是 addListener 方法,

面前少首读了Ext.Element,这篇介绍的Ext.CompositeElementLite类是针对性集合(Ext.Element)的操作。

欠措施会为此新的素集合填充elements。会清空以前的elements。

顾名思义,用来 清空数组 。与 Prototype库  
不同之Ext是更给数组this.elements赋值为空数组。
Prototype库则是将反复组的length赋值为0因为实现清空。注意JS中数组的length是可写的。此外语言如Java则是单独读的。

当篇头我关系了Ext.select /
Ext.Element.select,且说过该模式的贯彻依靠于Ext.CompositeElementLite。下边揭开面纱看看该方法源码,

 

拖欠措施用来过滤集合元素,条件selector可以是函数,也得是css采取器。把符合条件的存放到字段elements中。
其间用了is方法,该措施以达成亦然篇就涉嫌。

for循环将数组中之要素一一添加到elements中。for中动用了transformElement方法,

最后一个方法是 clear,

分支2,els.isComposite为true
即els本身就是Ext.CompositeElementLite的实例对象,那么直接取该对象的elements赋值给els。