jQuery源码解析----模拟核心buildFragment

一、代码解析

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');


    var rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([w:]+)[^>]*)/>/gi;
    var wrapMap = {
        // Support: IE 9
        option: [1, "<select multiple='multiple'>", "</select>"],
        thead: [1, "<table>", "</table>"],
        col: [2, "<table><colgroup>", "</colgroup></table>"],
        tr: [2, "<table><tbody>", "</tbody></table>"],
        td: [3, "<table><tbody><tr>", "</tr></tbody></table>"],
        _default: [0, "", ""]
    };
    // Support: IE 9
    wrapMap.optgroup = wrapMap.option;
    wrapMap.tbody    = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
    wrapMap.th       = wrapMap.td;


    function buildFragment(elems, context) {
        var elem, tmp, tag, wrap, contains, j,
            fragment = context.createDocumentFragment(),
            nodes = [],
            i = 0,
            l = elems.length;

        //筛选出不同类型的节点
        for (; i < l; i++) {
            elem = elems[i];

            if (elem || elem === 0) {
                if (jQuery.type(elem) === "object") {
                    // 如果是jQuery对象
                    // 如果是普通元素对象加[elem]
                    // 取出ele放入nodes数组中
                    jQuery.merge(nodes, elem.nodeType ? [elem] : elem);
                    // 没有html结构，是一个文本节点
                } else if (!/<|&#?w+;/.test(elem)) {
                    nodes.push(context.createTextNode(elem));
                } else {
                    //创一个元素div做为容器
                    tmp = tmp || fragment.appendChild(context.createElement("div"));
                    tag = (/<([w:]+)/.exec(elem) || ["", ""])[1].toLowerCase();
                    //ie对字符串进行trimLeft操作，其余是用户输入处理
                    //很多标签不能单独作为DIV的子元素
                    //td,th,tr,tfoot,tbody等等,需要加头尾
                    wrap = wrapMap[tag] || wrapMap._default;
                    tmp.innerHTML = wrap[1] + elem.replace(rxhtmlTag, "<$1></$2>") + wrap[2];

                    // 因为warp被包装过
                    // 需要找到正确的元素父级
                                        //定位到最底层的元素
                    j = wrap[0];
                    while (j--) {
                        tmp = tmp.lastChild;
                    }
                    // Support: QtWebKit
                    // jQuery.merge because push.apply(_, arraylike) throws
                    // 把节点拷贝到nodes数组中去
                    jQuery.merge(nodes, tmp.childNodes);
                }
            }
        }
        i = 0;
        while ((elem = nodes[i++])) {
               //‘<td>大家好</td>’这条语句也只能插入<td>大家好</td>，不会给该语句外加<table><tbody><tr></tr></tbody></table>
            fragment.appendChild(elem)
        }
        return fragment;
    }



$('#test1').click(function() {
    "<table><tbody><tr><td>慕课网</td></tr></tbody></table>"
    $('body').append($newdiv1, [newdiv2, existingdiv1, '<td>慕课网</td>', '文本', '<script>alert(1)'])
})

$('#test2').click(function() {
    //6中类型的数据结构
    //这里不设计script的执行
    var fragment = buildFragment([$newdiv1, newdiv2, existingdiv1, '<td>慕课网</td>', '文本', '<script>alert(1)'], document)
    document.body.appendChild(fragment)
})