jQuery.clean()方法源码分析（一）

在jQuery 1.7.1中调用jQuery.clean()方法的地方有三处，第一次就是在我之前的随笔分析jQuery.buildFramgment()方法里面的，其实还是构造函数的一部分，在处理诸如$('<div>123</div>')形式的参数时会首选调用jQuery.buildFramgment()创建文档片段，而这个方法有依赖jQuery.clean（）方法来实现dom转换，所以这个方法的第一个用处就是在构造jQuery对象上面。另外两处则是在两个dom操作方法before和after方法中，主要是处理dom相关操作的，相关源码代码如下：

//创建文档碎片后调用转换为dom
if ( !fragment ) {
        fragment = doc.createDocumentFragment();
        jQuery.clean( args, doc, fragment, scripts );
}
 
//before方法中调用
before: function() {
        if ( this[0] && this[0].parentNode ) {
            return this.domManip(arguments, false, function( elem ) {
                this.parentNode.insertBefore( elem, this );
            });
        } else if ( arguments.length ) {
            var set = jQuery.clean( arguments );
            set.push.apply( set, this.toArray() );
            return this.pushStack( set, "before", arguments );
        }
    },
//after方法中调用
 
after: function() {
        if ( this[0] && this[0].parentNode ) {
            return this.domManip(arguments, false, function( elem ) {
                this.parentNode.insertBefore( elem, this.nextSibling );
            });
        } else if ( arguments.length ) {
            var set = this.pushStack( this, "after", arguments );
            set.push.apply( set, jQuery.clean(arguments) );
            return set;
        }
},

方法 jQuery.clean( elems, context, fragment, scripts ) 执行的 8 个关键步骤如下：
1）创建一个临时 div 元素，并插入一个安全文档片段中。
2）为 HTML 代码包裹必要的父标签，然后赋值给临时 div 元素的 innerHTML 属性，从而
将 HTML 代码转换为 DOM 元素，之后再层层剥去包裹的父元素，得到转换后的 DOM 元素。
3）移除 IE 6/7 自动插入的空 tbody 元素，插入 IE 6/7/8 自动剔除的前导空白符。
4）取到转换后的 DOM 元素集合。
5）在 IE 6/7 中修正复选框和单选按钮的选中状态。
6）合并转换后的 DOM 元素。
7）如果传入了文档片段 fragment，则提取所有合法的 script 元素存入数组 scripts，并把
其他元素插入文档片段 fragment。
8）最后返回转换后的 DOM 元素数组。

下面开始源码分析：

clean: function( elems, context, fragment, scripts ) {
  ...
}

还是先分析一下参数：

elems：保存待转换html字符串的数组

为了更好地理解不如还是在前台调用一下然后再看看源码中执行的结果；现在在html页面执行一段js代码（默认在dom加载之后执行）

$('<div>123</div>,<a><223/a>');

然后再看看源码执行的情况，相信了解jQuery源码或者看过我之前随笔的读者都会知道这段这段代码是怎么一步一步走到clean方法里面的，下面直接看执行的结果看看第一个参数的值是什么？

["<div>123</div>,<a><223/a>"]

通过日志方法看到得到的就是一个数组里面包含着传递进来的字符串标签

context：文档对象，该参数在方法 jQuery.buildFragment() 中被修正为正确的文
档对象（变量 doc） ，稍后会调用它的方法 createTextNode() 创建文本节点、调用方法
createElement() 创建临时 div 元素。

由于是通过buildFragment方法传递进来，之前使用的例子会被修改为文档对象document，即使不是后面也会在做进一步处理

‰ fragment：文档片段，作为存放转换后的 DOM 元素的占位符，该参数在 jQuery.
buildFragment() 中被创建。

下面是在源码中输出此参数的结果

参数 scripts：数组，用于存放转换后的 DOM 元素中的 script 元素