引用 extJs 2.0学习笔记(DomHelper.js篇)

 

这个文件定义的是Ext.DomHelper类。作用是提供一些Dom的操作。这个类不是静态类。

　　这个类第一个函数createHtml是一个私有函数，用于从指定转入创建对应的html文本。这个类有多种情况，根据源代码分析：

　　var createHtml = function(o)｛｝

　　o的取值可能有：string(现成的html字符串)、Array(JSON对象数组)、object(JSON对象)

　　可见，createHtml的主要作用是把一个JSON序列化为html字符串。那么，createHtml能识别的JSON对象有什么格式要求呢？当然有，描述如下：

　　{tag:string,　　　　　　　　　　//元素的标记名，如果没有，默认为div

　　children|cn:string|Array|json,　　//子结点对应的json数组或字节点的html或单个json

　　html:string,　　　　　　　　　　//对应的html，如果有cn或children属性就忽略

　　style:function|string|json,　　　　//元素的样式，可以是函数，字符串，json对象

　　cls:string,　　　　　　　　　　　//元素的class属性的值

　　htmlFor:string　　　　　　　　　//元素的For属性，

　　x:y　　　　　　　　　　　　　　//x表示其他名字，y表示非函数、非空内容

　　}

　　我发现，style尽管允许是放一个function，但是，如果真是function的话，那么对应的style并不会生成，因为如下代码：

　　if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue;

　　如果值是函数，就continue了。这应当是extJs程序员不小心的bug。

 

　　下面有一个私有函数：createDom，定义为var createDom = function(o, parentNode)｛……｝，用于根据一个o创建dom结构树，并把它放到parentNode这个节点下。o的情况跟上面的createHtml一样。这儿我学到的是：documentFragment，这个函数用于创建一个文档碎片，为什么用它呢？点此处见详情！document结构下，每appendChild一次就引发一次树的刷新，这将影响性能，而使用Fragment，相当于先将所节点创建好好一缓存，然后一次性appendChild到document(注意，这儿的document泛指文档树)下。

 

　　var insertIntoTable = function(tag, where, el, html){……}

　　它的作用是往表里面插入单元格或行、或tbody或在table之前或之后插入指定html内容的文本。即：

　　tag:null/td/tr/tbody

　　where:beforebegin/afterend/afterbegin

　　el:节点的引用

　　html:要插入的内容

 

　　后面就是insertHtml了，这个函数是关键，可惜里面好多函数不熟，整个DomHelper中的那些函数，好多都是建立在它的基础之上的。像什么：insertBefore、insertEnd、insertFirst、append。overwrite是重写已有节点的innerHTML用的。至此功能倒是齐全了。

　　其实，总结Dom操作，无非就是插、删、修改。这儿封装的都是插入，因为修改简单，改它的innerHTMl就是了，况且这儿还有一个overwrite。删也简单，有Ext.destroy。Ext.Element.remove。