搜索

有思俱乐部学习园地

U.UF.E.U.UF.E.unifiedFormat() 格式整理。


函数源码:

/**
 * 格式整理,只整理第一层和第二层
 * @param el {element} 整理的内容元素
 */
U.UF.E.unifiedFormat = function (el) {
    var _i, //循环
        _removeTagName = ['head', 'meta', 'script', 'link'], //需要移除的的标签
        _frag = $$("frag"), //创建临时记录内容标签
        _div, //行
        _child = el.childNodes; //获取子级,改子级全部为行
    //循环处理每一行
    for (_i = 0; _i < _child.length; _i++) {
        _display = _child[_i].currentStyle ? _child[_i].currentStyle.display : ""; //是否为行标签的处理
        _tagname = _child[_i].tagName ? _child[_i].tagName.toLowerCase() : ""; //标签名
        //过去注释标签 nodeType为8 则为注释标签
        if (_child[_i].nodeType === 8) {
            _child[_i].remove();
        }
        //删除过滤的标签
        if (_removeTagName.indexOf(_tagname) >= 0) {
            $(_child[_i]).remove();
            continue;
        }
        //所有的行标签的处理
        //创建行标签
        _div = $$("div", {}, _frag);
        //调用非行元素处理函数 即不为第一层的处理
        var _allline = U.UF.E.unifiedFormat.next(_child[_i], true);
        //追加到创建的行标签中
        _div.appendChild(_allline);
    }
    //返回处理后的临时元素
    return _frag;
};
/**
 * 非第一行之后的所有内容处理
 * @param el {element} 处理的元素
 * @param top {boolean}  是否为第二层标记 如果为第二层则所有标签直接修改为span标签  否则需要进行拆分
 * @return 处理后的结果集
 * */
U.UF.E.unifiedFormat.next = function (el, top) {
    var _i, _j, //循环变量
        _frag = $$("frag"), //用于记录整理后的内容的临时标签
        _span, //用于记录块级整理后的内容
        _childcsstext, //用于记录获取到的自己的样式
        _child = el.childNodes, //获取处理元素子级
        _cssText = el.style ? el.style.cssText : ""; //获取处理元素的样式 用户继承当前样式使用
    //如果存在子级的处理
    if (_child.length) {
        //循环处理每一个子级
        for (_i = 0; _i < _child.length; _i++) {
            //判断该子级是否存在data 如果存在则直接创建文本标签,并添加到记录标签中
            if (_child[_i].data) {
                _frag.appendChild(document.createTextNode(_child[_i].data));
            } else {
                //整理当前元素需继承的样式  父级样式 + 当前元素原有样式
                _childcsstext = _cssText + ";" + (_child[_i].style ? _child[_i].style.cssText : "");
                //创建记录使用的块级标签
                _span = $$("span", {"style": {"cssText": _childcsstext}}, _frag);
                //如果为a标签 则创建span标签将其添加到span标签中 这一步的做法主要为了整理a标签在span标签下
                if (_child[_i].tagName.toLowerCase() === 'a') {
                    _span.appendChild($$('span', {innerHTML: _child[_i].outerHTML}));
                }
                //否则则记录进入处理
                else {
                    //进入判断是否依然存在子级 直到处理所有元素为止
                    var _nowspan = U.UF.E.unifiedFormat.next(_child[_i]);
                    //将整理后的标签添加到记录块级标签的标签中
                    _span.appendChild(_nowspan);
                }
                //如果记录块级元素的标签中存在子元素 则将层级修改为同级标签  保证格式不混乱
                if (_span.children.length) {
                    try {
                        //直接修改outerHTML的方法
                        _span.outerHTML = _span.innerHTML;
                    }
                    catch (e) {
                        //循环添加的方法
                        //创建临时标签用于记录
                        var _childfrag = $$("frag");
                        //循环将所有span标签的子级添加到临时标签中
                        for (_j = 0; _j < _span.childNodes.length; _j++) {
                            _childfrag.appendChild(_span.childNodes[_j]);
                        }
                        //替换记录标签中的块级标签元素
                        _frag.replaceChild(_childfrag, _span);
                    }
                }
            }
        }
    }
    //如果不存在子级的处理
    else {
        //是否为第二层标记
        if (top) {
            //如果是则直接创建span块级标签,并添加到记录标签中
            $$("span", {
                "style": {"cssText": _cssText}, //继承处理元素的样式
                //判断是否为a标签如果是则将a标签直接记录 不是则获取内容
                "innerHTML": (el.tagName || '').toLowerCase() === 'a' ? el.outerHTML : el.data
            }, _frag);
        }
        //如果不为第二层标记
        else {
            //且存在内容则直接创建文本节点,并添加到记录标签中
            if (el.data) {
                _frag.appendChild(document.createTextNode(el.data));
            }
            //否则则直接克隆该元素,并添加到记录标签中 不做处理  该情况出现在img标签
            else {
                _frag.appendChild($(el).clone(true)[0]);
            }
        }
    }
    //返回处理后的元素集合
    return _frag;
};

工作人员

 
作者: 14互联网G5-2 杨思强
信息录入: 14互联网G5-2 杨思强