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

 1 var $newdiv1 = $(‘<div id="object1"/>‘), 2 ????newdiv2 = document.createElement(‘div‘), 3 ????existingdiv1 = document.getElementById(‘foo‘); 4 ?5 ?6 ????var rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi; 7 ????var wrapMap = { 8 ????????// Support: IE 9 9 ????????option: [1, "<select multiple=‘multiple‘>", "</select>"],10 ????????thead: [1, "<table>", "</table>"],11 ????????col: [2, "<table><colgroup>", "</colgroup></table>"],12 ????????tr: [2, "<table><tbody>", "</tbody></table>"],13 ????????td: [3, "<table><tbody><tr>", "</tr></tbody></table>"],14 ????????_default: [0, "", ""]15 ????};16 ????// Support: IE 917 ????wrapMap.optgroup = wrapMap.option;18 ????wrapMap.tbody ???= wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;19 ????wrapMap.th ??????= wrapMap.td;20 21 22 ????function buildFragment(elems, context) {23 ????????var elem, tmp, tag, wrap, contains, j,24 ????????????fragment = context.createDocumentFragment(),25 ????????????nodes = [],26 ????????????i = 0,27 ????????????l = elems.length;28 29 ????????//筛选出不同类型的节点30 ????????for (; i < l; i++) {31 ????????????elem = elems[i];32 33 ????????????if (elem || elem === 0) {34 ????????????????if (jQuery.type(elem) === "object") {35 ????????????????????// 如果是jQuery对象36 ????????????????????// 如果是普通元素对象加[elem]37 ????????????????????// 取出ele放入nodes数组中38 ????????????????????jQuery.merge(nodes, elem.nodeType ? [elem] : elem);39 ????????????????????// 没有html结构，是一个文本节点40 ????????????????} else if (!/<|&#?\w+;/.test(elem)) {41 ????????????????????nodes.push(context.createTextNode(elem));42 ????????????????} else {43 ????????????????????//创一个元素div做为容器44 ????????????????????tmp = tmp || fragment.appendChild(context.createElement("div"));45 ????????????????????tag = (/<([\w:]+)/.exec(elem) || ["", ""])[1].toLowerCase();46 ????????????????????//ie对字符串进行trimLeft操作，其余是用户输入处理47 ????????????????????//很多标签不能单独作为DIV的子元素48 ????????????????????//td,th,tr,tfoot,tbody等等,需要加头尾49 ????????????????????wrap = wrapMap[tag] || wrapMap._default;50 ????????????????????tmp.innerHTML = wrap[1] + elem.replace(rxhtmlTag, "<$1></$2>") + wrap[2];51 52 ????????????????????// 因为warp被包装过53 ????????????????????// 需要找到正确的元素父级54 ????????????????????????????????????????//定位到最底层的元素55 ????????????????????j = wrap[0];56 ????????????????????while (j--) {57 ????????????????????????tmp = tmp.lastChild;58 ????????????????????}59 ????????????????????// Support: QtWebKit60 ????????????????????// jQuery.merge because push.apply(_, arraylike) throws61 ????????????????????// 把节点拷贝到nodes数组中去62 ????????????????????jQuery.merge(nodes, tmp.childNodes);63 ????????????????}64 ????????????}65 ????????}66 ????????i = 0;67 ????????while ((elem = nodes[i++])) {68 ???????????????//‘<td>大家好</td>’这条语句也只能插入<td>大家好</td>，不会给该语句外加<table><tbody><tr></tr></tbody></table>69 ????????????fragment.appendChild(elem)70 ????????}71 ????????return fragment;72 ????}73 74 75 76 $(‘#test1‘).click(function() {77 ????"<table><tbody><tr><td>慕课网</td></tr></tbody></table>"78 ????$(‘body‘).append($newdiv1, [newdiv2, existingdiv1, ‘<td>慕课网</td>‘, ‘文本‘, ‘<script>alert(1)‘])79 })80 81 $(‘#test2‘).click(function() {82 ????//6中类型的数据结构83 ????//这里不设计script的执行84 ????var fragment = buildFragment([$newdiv1, newdiv2, existingdiv1, ‘<td>慕课网</td>‘, ‘文本‘, ‘<script>alert(1)‘], document)85 ????document.body.appendChild(fragment)86 }) ???????