第二章 jQuery技術解密 (四)

mybwu_com發表於2013-12-28
jQuery解密

2.3.4 生成 DOM 元素

jQuery.fn.init() 建構函式能夠構建 jQuery 物件，並把匹配的 DOM 元素儲存在 jQuery 物件內部集合中。jQuery.fn.init() 建構函式可以接收單個的 DOM 元素，也可以接收 DOM 集合。如果接收的是字串型 ID 值，則直接在文件中查詢對應的 DOM 元素，並把它傳遞給 jQuery 物件；如果接收的是字串型 HTML 片段，則需要把這個字串片段生成 DOM 元素。下面我們將重點分析 jQuery 是如何把 HTML 片段生成 DOM 元素的。

在2.3.3節中，我們可以看到 jQuery.fn.init() 構造器通過 jQuery.clean([match[1], context]); 語句實現把 HTML 片段生成 DOM 元素，jQuery.clean() 是一個公共函式。原始碼及其註釋如下所示。

jQuery.clean() 包含三個引數，其中 elems 和 context 可以支援多種形式的值。Elems 引數可以為陣列、類陣列、物件結構的形式。陣列元素和物件屬性可以混合使用。

對於數字型別引數，則會被轉換為字串型，除了字串型外，其他的都放入返回的陣列中，當然對於集合形式只需要讀取集合中每個元素即可。

對於字串型引數，則把它轉換成 DOM 元素，再存入返回的陣列中。轉換的方式是，把 HTML 字串片段賦值給建立的 div 元素的 innerHTML ，這樣就可以把 HTML 字串片段掛到 DOM 文件樹中，從而實現把字串轉換成 DOM 元素。

在轉換過程中，應該考慮 HTML 語法約定，因為標籤巢狀是有嚴格限制的，例如，<td> 必須存在 <tr> 中。因此在執行轉換前，還應該對 HTML 字串進行預處理，即修正 HTML 標籤不規範的用法，這也是 jQuery.clean() 函式的一個重要工作。

[html]view plaincopy
  1. <scripttype="text/javascript">
  2. (function(){
  3. var
  4. window=this,
  5. jQuery=window.jQuery=window.$=function(selector,context){
  6. returnnewjQuery.fn.init(selector,context);
  7. },
  8. quickExpr=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/;
  10. jQuery.fn=jQuery.prototype={
  11. init:function(selector,context){
  12. selector=selector||document;
  14. if(typeofselector=="string"){
  15. varmatch=quickExpr.exec(selector);
  17. if(match&&(match[1]||!context)){
  18. //第二種情況，處理HTML字串，類似$(html)->$(array)
  19. if(match[1]){
  20. selector=jQuery.clean([match[1]],context);
  21. }
  22. }
  23. }
  24. }
  25. };
  26. jQuery.fn.init.prototype=jQuery.fn;
  28. //jQuery功能擴充套件函式
  29. jQuery.extend=jQuery.fn.extend=function(obj){
  30. for(varpropinobj){
  31. this[prop]=obj[prop];
  32. }
  33. returnthis;
  34. };
  35. //公共函式擴充套件
  36. jQuery.extend({
  37. //引數說明：object表示jQuery物件，callback表示回撥函式，args回撥函式的引數陣列
  38. each:function(object,callback,args){
  39. varname,i=0,length=object.length;
  40. if(args){//如果存在回撥函式的引數陣列
  41. if(length===undefined){//如果object不是jQuery物件
  42. for(nameinobject){//遍歷object的屬性
  43. if(callback.apply(object[name],args)===false)
  44. //在物件上呼叫回撥函式
  45. break;//如果回撥函式返回值為false，則跳出迴圈
  46. }
  47. }else{
  48. for(;i<length;)//遍歷jQuery物件陣列
  49. if(callback.apply(object[i++],args)===false)
  50. //在物件上呼叫回撥函式
  51. break;//如果回撥函式返回值為false，則跳出迴圈
  52. }
  53. }else{
  54. if(length===undefined){//如果object不是jQuery物件
  55. for(nameinobject)//遍歷object的屬性
  56. if(callback.call(object[name],name,object[name])===false)
  57. break;//如果回撥函式返回值為false，則跳出迴圈
  58. }else{//如果object是jQuery物件
  59. for(varvalue=object[0];//遍歷jQuery物件陣列
  60. i<length&&callback.call(value,i,value)!==false;value=object[++i]){}
  61. }
  62. }
  63. },
  64. //把HTML字串片段轉換成DOM元素
  65. //引數說明：
  66. //elems參數列示多個HTML字串片段的資料
  67. //context參數列示上下文
  68. //fragment參數列示框架物件
  69. clean:function(elems,context,fragment){
  70. context=context||document;//預設的上下文是document
  71. //在IE中!context.createElement是錯誤用法，因為它返回的是物件型別，而不是邏輯值，
  72. //故通過返回型別進行判斷
  73. if(typeofcontext.createElement=="undefined")
  74. //支援context為jQuery物件，並獲取第一個元素
  75. context=context.ownerDocument||context[0]&&context[0].ownerDocument||document;
  76. //如果僅匹配一個標籤，且沒有指定框架引數，則直接建立DOM元素，並跳過後面的解析
  77. if(!fragment&&elems.length===1&&typeofelems[0]==="string"){
  78. varmatch=/^<(\w+)\s*\/?>$/.exec(elems[0]);
  79. if(match)
  80. return[context.createElement(match[1])];
  81. }
  82. varret=[],scripts=[],div=context.createElement("div");
  83. //匹配每一個HTML字串片段，併為每一個片段執行回撥函式
  84. jQuery.each(elems,function(i,elem){
  85. if(typeofelem==="number")//把數值轉換為字串的高效方法
  86. elem+='';
  87. if(!elem)//如果不存在元素，則返回，或者為''、undefined、false等時也返回
  88. return;
  89. //HTML字串轉換為DOM節點
  90. if(typeofelem==="string"){
  91. //統一轉換為XHTML嚴謹型文件的標籤形式，如<div/>的形式修改為<div></div>
  92. //但是對於(abbr|br|col|img|input|link|meta|param|hr|area|embed)不修改
  93. //front=(<(\w+)[^>]*?)--非貪婪的重複
  94. elem=elem.replace(/(<(\w+)[^>]*?)\/>/g,function(all,front,tag){
  95. //all--匹配項
  96. //front--第一個捕獲組
  97. //tag--第二個捕獲組
  98. returntag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i)?
  99. all:
  100. front+"></"+tag+">";
  101. });
  102. //清除空格，否則indexof可能會出現不能正常工作,elem.replace(/^\s+/,"")清除左側空格
  103. vartags=elem.replace(/^\s+/,"").substring(0,10).toLowerCase();
  104. //有些標籤必須是有一些約束的，如<option>必須在<select></select>中間
  105. //下面程式碼大部分是對<table>中的子元素進行修正。陣列中第一個元素為深度
  106. varwrap=
  107. //約束<option>，<opt在開始位置(index=0)就返回&&運算子後面的陣列(!0返回true)
  108. !tags.indexOf("<opt")&&
  109. [1,"<selectmultiple='multiple'>","</select>"]||
  110. //<leg必須在<fieldset>內部
  111. !tags.indexOf("<leg")&&
  112. [1,"<fieldset>","</fieldset>"]||
  113. //thead|tbody|tfoot|colg|cap必須在<table>內部
  114. tags.match(/^<(thead|tbody|tfoot|colg|cap)/)&&
  115. [1,"<table>","</table>"]||
  116. //tr在<tbody中間
  117. !tags.indexOf("<tr")&&
  118. [2,"<table><tbody>","</tbody></table>"]||
  119. //td在tr中間
  120. (!tags.indexOf("<td")||!tags.indexOf("<th"))&&
  121. [3,"<table><tbody><tr>","</tr></tbody></table>"]||
  122. //col在<colgroup>中間
  123. !tags.indexOf("<col")&&
  124. [2,"<table><tbody></tbody><colgroup>","</colgroup></table>"]||
  125. //IE中link,script不能序列化
  126. //IEcan'tserialize<link>and<script>tagsnormally
  127. !jQuery.support.htmlSerialize&&
  128. [1,"div<div>","</div>"]||
  129. //預設不修正
  130. [0,"",""];
  131. //包裹HTML之後，採用innerHTML轉換成DOM
  132. div.innerHTML=wrap[1]+elem+wrap[2];
  133. //轉到正確的深度，對於[1,"<table>","</table>"],div=<table>
  134. while(wrap[0]--)
  135. div=div.lastChild;
  136. //fragments去掉IE對<table>自動插入的<tbody>
  137. //if(!jQuery.support.tbody){
  138. //第一種情況：tags以<table>開頭但沒有<tbody>。在IE生成的元素中可能自動加<tbody>
  139. //第二種情況：thead|tbody|tfoot|colg|cap為tags，那wrap[1]=="<table>"
  140. //TODO
  141. //}
  142. //使用innerHTML,IE會去掉開頭的空格節點，因此加上去掉的空格節點
  143. //TODO
  145. //elem從字元轉換成了陣列
  146. //TODO
  147. }
  148. //如果是DOM元素，則推入陣列，否則就合併陣列
  149. /*if(elem.nodeType)
  150. ret.push(elem);
  151. else
  152. ret=jQuery.merge(ret,elem);*/
  153. });
  154. //如果指定了第3個引數，即框架物件，則附加到框架物件上
  155. //這段是新增加的，用來處理js程式碼，同時也取消了form的處理
  156. if(fragment){
  157. //TODO
  158. }
  159. //返回DOM元素集合
  160. returnret;
  161. }
  162. });
  164. })();
  166. window.onload=function(){
  168. varcontext=document.getElementById("wrap");
  169. //測試程式碼
  170. $("<option/><div/>",context);
  172. };
  173. </script>
上面這段程式碼實際上最後訪問的是一個名為 ret 的陣列，陣列中的元素變為 DOM 元素的物件，而它的 innerHTML 正好就是剛才的 HTML 字串。

相關文章