引用 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。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章