jquery核心函數domManip詳解

來源:互聯網
上載者:User

domManip是什麼

dom即Dom元素,Manip是Manipulate的縮寫,連在一起就是Dom操作的意思。

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

對封裝的節點操作做了參數上的校正支援,與對應處理的調用

append、prepend、before、after、replaceWith

appendTo、prependTo、insertBefore、insertAfter、replaceAll


 
節點的操作有幾個重點的細節 

  • 保證最終操作的永遠是dom元素,瀏覽器的最終API只認識那麼幾個介面,所以如果傳遞是字串或者其他的,當然需要轉換
  • 針對節點的大量操作,我們肯定是需要引入文檔片段做最佳化的,這個必不可少

我們知道jQuery的的介面是支援多種參數傳遞的,那麼就需要有一個過濾器的中介來處理各種參數類型。

這個任務就交給了domManip,除此之外domManip在設計上需要做的處理:

1:解析參數,字串,函數,對象
2:針對大資料引入文檔片段處理
3:如果參數中包含script的處理

其中還有很多細節的問題:

1:IE下面innerHTML會忽略沒範圍元素,no-scope element(script,link,style,meta,noscript)等,所以這類通過innerHTML建立需要加首碼

2:innerHTML在IE下面會對字串進行trimLeft操作,去掉空白

3: innerHTML不會執行指令碼的代碼,如果支援defer除外

4:很多標籤不能作為div的子項目、td、tr, tbody等等

5:jQuery是合集對象,文檔片段的與事件的複製問題

針對innerHTML不會執行指令碼的代碼,如果支援defer除外的解釋:

div.innerHTML = "<script>alert(aseoe)</srcript>" 這個代碼不會執行

例外的情況:IE9之前滿足幾個條件

1:script設定defer屬性

2: script元素必須位於有範圍元素之後,因為script被認為是無範圍的(頁面中不可見)

換句話說,這樣設定

div.innerHTML = "<div><script defer>alert(1)</srcript></div>"  可以執行

jQuery在內部通過會有一個domManip方法,把這些問題都方方面面處理掉了

綜合上面一系列的問題,jQuery引入了domManip方法

原因清楚了,我們再來看jQuery是如何處理tbody問題,jQuery是相容IE 6瀏覽器的。append、prepend、before和after都是操作Dom元素的函數,如果被插入的對象是table,那就要在table中加入tbody標籤啊

所以domManip,主要是處理這個問題的,他還處理插入元素的順序等等

在結構上首先用extend在原型上拓展了一堆方法,其實每一個的實現都很簡單,重點就是要看懂domManip的使用。可以重點挑兩個方法的實現看一看,不用每個都看。

然後就是appendTo和append之類的處理,大同小異,因為實現差不多,所以就放在一起了

jQuery.fn.extend({      text: function() {},      append: function() {},      prepend: function() {},      before: function() {},      after: function() {},      clone: function() {},      html: function() {},        replaceWith: function() {},       domManip: function() {},  })

其中append方法:

append: function() {    return this.domManip(arguments, function(elem) {        if (this.nodeType === 1  this.nodeType === 11  this.nodeType === 9) {            var target = manipulationTarget(this, elem);            target.appendChild(elem);        }    });}

1:函數調用了domManip函數,傳進去的參數第一個是arguments,這個大家都知道arguments是函數參數對象,是一個類數組對象。這裡arguments可能是包含dom元素的數組,或者html字串

2:第二參數是一個回呼函數,target.appendChild(elem);看到這個代碼就很明了,在回呼函數中分離各自的處理方法,通過domManip抽象出公用的處理,其餘的prepend 、before 、after等介面也是類似的處理
 

var div = document.querySelectorAll('div')[0];div.innerHTML = "<script>alert('愛思資源網')";這樣JavaScript 不會執行。換句話能插入script標籤,但是不執行指令碼代碼,但是在早起的ie下面,如果設定了defer是另外。如果我們換成jQuery的appned方法:這樣的處理代碼就執行了,可見jQuery的方法內部可不是那麼簡單的處理了$('div').append("<script>alert('愛思資源網')")簡單講,如果.html()傳入的字串有<script> <object> <embedt> <optiont> <style>其中一個 .html()方法就不會用innerHTML 操作,而是用jQuery.append() 處理字串塞入.append()-> .domManip() -> buildFragment() ->clean() 這樣的處理流程clean() 中會動態產生一個div, 將div 的innerHTML 設為傳入的字串,再用getElementsByTagName('script') 的方式把所有的script 抓出來另行儲存clean() 執行完畢回到domManip() 中, domManip() 再將script 們一一拿出來執行如果是外部js 就動態載入,如果是內聯 js 就用eval() 總結下來,domManip主要就做了兩件事:1.根據使用者傳入的參數,建立了多個fragment,然後通過回呼函數參數傳入2.控制script的執行過程,在建立fragment的時候不執行,最後dom操作結束後會統一執行
 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。