解密jQuery內核 DOM操做的核心函數domManip

domManip是什麼

dom即Dom元素，Manip是Manipulate的縮寫，連在一塊兒就是Dom操做的意思。

.domManip()是jQuery DOM操做的核心函數

對封裝的節點操做作了參數上的校訂支持，與對應處理的調用

append、prepend、before、after、replaceWith

appendTo、prependTo、insertBefore、insertAfter、replaceAll

 

---

爲何須要用這個domManip函數呢？

咱們知道節點操做瀏覽器提供的接口無非就是那麼幾個

appendChild()

經過把一個節點增長到當前節點的childNodes[]組，給文檔樹增長節點。

cloneNode()

複製當前節點，或者複製當前節點以及它的全部子孫節點。

hasChildNodes()

若是當前節點擁有子節點，則將返回true。

insertBefore()

給文檔樹插入一個節點，位置在當前節點的指定子節點以前。若是該節點已經存在，則刪除之再插入到它的位置。

removeChild()

從文檔樹中刪除並返回指定的子節點。

replaceChild()

從文檔樹中刪除並返回指定的子節點，用另外一個節點替換它。

以上接口都有一個特性，傳入的是一個節點元素

若是咱們傳遞不是一個dom節點元素，若是是一個字符串，一個函數或者其餘呢，因此針對全部接口的操做，jQuery會抽象出一種參數的處理方案

也就是domManip存在的意義了，針對不少相似接口的參數抽象jQuery內部有不少這樣的函數了，如以前屬性操做中的jQuery.access

 

---

jQuery支持的參數傳遞

jquery對接點才操做封裝出了一系列的接口，能夠接受HTML字符串，DOM 元素，元素數組，或者jQuery對象，用來插在集合中每一個匹配元素的不一樣位置

例如

HTML結構

$('.inner').after('<p>Test</p>');

$對象

$('.container').after($('h2'));

回調函數

一個返回HTML字符串，DOM 元素， 或者 jQuery 對象的函數，插在每一個匹配元素的後面。接收元素在集合中的索引位置做爲參數。在函數中this指向元素集合中的當前元素

$('p').after(function() {
  return '<div>' + this.className + '</div>';
});

 

---

domManip源碼

針對節點的操做有幾個重點的細節

1. 保證最終操做的永遠是dom元素，瀏覽器的最終API只認識那麼幾個接口，因此若是傳遞是字符串或者其餘的，固然須要轉換
2. 針對節點的大量操做，咱們確定是須要引入文檔碎片作優化的，這個必不可少

 

domManip的結構

傳遞的參數， 對應的處理回調，節點是否替換

domManip: function( args, callback, allowIntersection ) {

 

---

參數初始化

iNoClone = l - 1,  是否爲克隆節點，根據後面的大意，若是當前的jQuery對象是一個合集對象花

那麼意味着經過文檔碎片構件出來的dom，只能是副本克隆到每個合集對象中

value 是第一個元素，後邊只針對args[0]進行檢測，意味着args中的元素必須是統一類型；

 

---

WebKit checked屬性

若是是回調函數，或者跳過WebKit checked屬性

在WebKit中，不能克隆包含了已選中多選按鈕的文檔碎片，這有什麼問題？以後在測

 

---

文檔碎片

將html轉化成dom

其實最終是經過jQuery.buildFragment方法構件出文檔碎片

文檔碎片的好處就不用多說了，多個繪製操做的時候合併必備

 

---

插入頁面

這裏就用了到iNoClone了

一看代碼就很明顯 修正了node節點， 爲何要修正？

由於經過文檔碎片構建出來的只同樣個dom，可是jQuery是一個合集對象，因此都須要用到這個碎片了，因此你把args append到第一個元素上了，jQuery實例的第二個元素他怎麼辦啊？他沒有能夠append的了？！因此，上來要判斷一下實例的長度是否是大於1，大於1就須要cloneNode。

callback就是對應了全部api須要執行的操做方法了

 

---

jQuery2X是高級版本，因此不兼容IE6等低級瀏覽器了，天然在IE6中插入tr，若是漏掉tbody的問題也就不須要修復了

domManip其實就只作了2事件

第一個就是判斷3種傳遞參數所映射的對應操做

第二個就是經過調用jQuery.buildFragment生成文檔碎片

DocumentFragment碎片是你們容易忽略的東西，下一章就詳細學習下~