这个类第一个函数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。
今天精神有点不好,我看了一大把的js文件。每个文件的代码量都不少。这要看到什么时候啊。不能这么干了。不过,还是打算花大力气研究一下Ext.Element。