對jquery原始碼中 clean函式的一些體會
對於jquery原始碼本人正在學習中,屬於小白,大神勿笑,寫這個也是純粹給自己理思路。
clean()函式出現的地方較多。
就挑在buildFragment()中出現的這處。
原始碼是這樣
if ( !fragment ) {
fragment = doc.createDocumentFragment();
jQuery.clean( args, doc, fragment, scripts );
}
在這裡執行clean函式clean: function( elems, context, fragment, scripts ) {
。
clean()函式在此處的作用就是轉換html程式碼為dom元素,同時抓取出html中script標籤,手動執行標籤中的程式碼.
clean部分一些程式碼,就不說了。主要是調整文件物件和判斷是否是 文字節點。
我主要理一下開始讓我困惑的地方。
1.不知道為什麼要在建立文件碎片中加一個div標籤。
解釋:由於在clean函式中處理HTML轉換成DOM元素的,主要用的是innerHTML屬性。但是這個屬性沒法用於沒有作用域的標籤。比如script,link,只有在外面套上一層div只些標籤才能被瀏覽器“識別”。
2.這段程式碼的用處,不理解為什麼要這樣。var tag = (rtagName.exec( elem ) || ["", ""])[1].toLowerCase(), wrap = wrapMap[ tag ] || wrapMap._default, depth = wrap[0], div = context.createElement("div"); div.innerHTML = wrap[1] + elem + wrap[2];
把wrapMap也貼出來wrapMap = { option: [ 1, "" ], legend: [ 1, "" ], thead: [ 1, "
", "
" ], tr: [ 2, "", "
" ], td: [ 3, "
" ], col: [ 2, "", "
" ], area: [ 1, "" ], _default: [ 0, "", "" ] };
解釋:先判斷,tag是不是wrapMap幾種標籤。由於採取的是利用div innerHTML屬性巢狀子元素。但是wrapMap中幾種標籤是無法直接巢狀在div中的,是無法成為div的子元素。比如td,tr。所以必須手工給他們套上能夠使他們正常執行的父元素。如果不是wrapMap其中的標籤那就跳過。
3,關於script標籤的處理。
首先判斷是否是script標籤。如果是的話,將script剝離出來。放入scripts陣列中。等待其他函式呼叫手動執行。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4550/viewspace-2798246/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- jQuery 原始碼學習 (三) 回撥函式jQuery原始碼函式
- jQuery 原始碼剖析(一) - 核心功能函式jQuery原始碼函式
- Todo‑mvp‑clean 原始碼體驗MVP原始碼
- Vue 原始碼中的工具函式Vue原始碼函式
- jquery原始碼;是怎麼實現直接呼叫$()函式原型上的方法的?jQuery原始碼函式原型
- js的call函式”原始碼”JS函式原始碼
- 函式形參與實參的體會與對比函式
- jQuery操作iframe中js函式的方法小結jQueryJS函式
- C++(STL原始碼):37---仿函式(函式物件)原始碼剖析C++原始碼函式物件
- 臨時讀原始碼的函式原始碼函式
- 對於Redux原始碼的一些理解Redux原始碼
- count 函式原始碼分析函式原始碼
- 05_jQuery函式的使用jQuery函式
- 對JavaScript中函式物件的理解JavaScript函式物件
- bind函式polyfill原始碼解析函式原始碼
- 程式碼審計中XSS挖掘一些體會
- webpack 4.0 Tapable 類中的常用鉤子函式原始碼分析Web函式原始碼
- ClickHouse原始碼筆記5:聚合函式的原始碼再梳理原始碼筆記函式
- jQuery原始碼分析系列 : 整體架構jQuery原始碼架構
- Spring Boot的Clean架構教程與原始碼 - BaeldungSpring Boot架構原始碼
- php的一些函式PHP函式
- 前端之jquery函式庫前端jQuery函式
- 如何理解jQuery.on()函式jQuery函式
- 初學 PHP 對於回撥函式的一些理解PHP函式
- jQuery原始碼分析jQuery原始碼
- 【原始碼】Scrollsubplot:subplot函式的升級版原始碼函式
- JDK原始碼中的一些“小技巧”JDK原始碼
- rocketchip開發中的一些體會
- snabbdom原始碼解析(二) h函式原始碼函式
- 讀 zepto 原始碼之工具函式原始碼函式
- [PHP原始碼閱讀]strlen函式PHP原始碼函式
- Vue原始碼: 建構函式入口Vue原始碼函式
- 函式的柯里化與Redux中介軟體及applyMiddleware原始碼分析函式ReduxAPP原始碼
- jQuery - 函式 $.ajaxSetup 的說明和使用jQuery函式
- redux中介軟體的原始碼的一些理解Redux原始碼
- window.onload()函式和jQuery中的document.ready()區別函式jQuery
- jquery.ajaxSetup()函式詳解jQuery函式
- 在jQuery定義自己函式jQuery函式