手记

对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, "<select multiple='multiple'>", "</select>" ], legend: [ 1, "<fieldset>", "</fieldset>" ], thead: [ 1, "<table>", "</table>" ], tr: [ 2, "<table><tbody>", "</tbody></table>" ], td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ], col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ], area: [ 1, "<map>", "</map>" ], _default: [ 0, "", "" ] };
解释:先判断,tag是不是wrapMap几种标签。由于采取的是利用div innerHTML属性嵌套子元素。但是wrapMap中几种标签是无法直接嵌套在div中的,是无法成为div的子元素。比如td,tr。所以必须手工给他们套上能够使他们正常执行的父元素。如果不是wrapMap其中的标签那就跳过。
3,关于script标签的处理。
首先判断是否是script标签。如果是的话,将script剥离出来。放入scripts数组中。等待其他函数调用手动执行。

1人推荐
随时随地看视频
慕课网APP