對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的ready函式原始碼解讀jQuery函式原始碼
- Todo‑mvp‑clean 原始碼體驗MVP原始碼
- Jquery庫的一些可用函式jQuery函式
- Vue 原始碼中的工具函式Vue原始碼函式
- jQuery 原始碼剖析(一) - 核心功能函式jQuery原始碼函式
- jQuery 原始碼學習 (三) 回撥函式jQuery原始碼函式
- oracle聚合函式rank()的用法和一些體會Oracle函式
- jQuery原始碼閱讀(九)---ready函式理解jQuery原始碼函式
- jQuery函式的等價原生函式程式碼示例jQuery函式
- 函式形參與實參的體會與對比函式
- js中函式的一些”坑“JS函式
- js的call函式”原始碼”JS函式原始碼
- jquery原始碼;是怎麼實現直接呼叫$()函式原型上的方法的?jQuery原始碼函式原型
- 資料核對的一些體會
- jQuery的each函式jQuery函式
- jquery 中的trigge函式詳解jQuery函式
- jquery的filter()函式用法程式碼例項jQueryFilter函式
- C++(STL原始碼):37---仿函式(函式物件)原始碼剖析C++原始碼函式物件
- 臨時讀原始碼的函式原始碼函式
- 對於Redux原始碼的一些理解Redux原始碼
- count 函式原始碼分析函式原始碼
- Vue中之nextTick函式原始碼分析Vue函式原始碼
- 對JavaScript中函式物件的理解JavaScript函式物件
- jQuery操作iframe中js函式的方法小結jQueryJS函式
- jQuery遍歷函式,javascript中的each遍歷jQuery函式JavaScript
- jQuery css()函式使用程式碼例項jQueryCSS函式
- js中的寫出想jquery中的函式一樣呼叫JSjQuery函式
- webpack 4.0 Tapable 類中的常用鉤子函式原始碼分析Web函式原始碼
- 閱讀優秀原始碼時可能會用的C函式(記錄)原始碼函式
- jQuery常用函式jQuery函式
- jQuery功能函式jQuery函式
- jquery position()函式和offset()函式的區別jQuery函式
- 程式碼審計中XSS挖掘一些體會
- jquery的$.each()函式和$.map()函式的區別jQuery函式
- jQuery整體架構原始碼解析jQuery架構原始碼
- bind函式polyfill原始碼解析函式原始碼
- show_space函式原始碼函式原始碼
- css positioning計算和jquery對應函式CSSjQuery函式