hugh 的个人博客

1、virtualElement.js

利用注释 构建虚拟元素

》IE9无法读取nodeValue属性，但是可使用text属性读取节点内容

 

2、判断使用哪种属性读取 注释节点的内容

var commentNodesHaveTextProperty = document && document.createComment("test").text === "<!--test-->";

3、判断 起始和关闭标签

var startCommentRegex = commentNodesHaveTextProperty ? /^<!--\s*ko(?:\s+([\s\S]+))?\s*-->$/ : /^\s*ko(?:\s+([\s\S]+))?\s*$/;
    var endCommentRegex =   commentNodesHaveTextProperty ? /^<!--\s*\/ko\s*-->$/ : /^\s*\/ko\s*$/;
function isStartComment(node) {
    return (node.nodeType == 8) &amp;&amp; startCommentRegex.test(commentNodesHaveTextProperty ? node.text : node.nodeValue);
}

function isEndComment(node) {
    return (node.nodeType == 8) &amp;&amp; endCommentRegex.test(commentNodesHaveTextProperty ? node.text : node.nodeValue);
}<br /><br /><br /></pre>

  使用方法 <!-- ko if: test --> xxxxxxxx<!-- /ko -->
4、由开始标签 查找匹配的 关闭标签
1)获取当前子元素
function getVirtualChildren(startComment, allowUnbalanced) {
        var currentNode = startComment;
        var depth = 1;
        var children = [];
        while (currentNode = currentNode.nextSibling) { //依次向下查找同级元素
            if (isEndComment(currentNode)) {
                depth--;
                if (depth === 0)
                    return children;
            }
        children.push(currentNode);

        if (isStartComment(currentNode)) // 如果有 起始标签，则 对应的 depth+1, 即 需要找到depth+1个endComment
            depth++;
    }
    if (!allowUnbalanced)
        throw new Error("Cannot find closing comment tag to match: " + startComment.nodeValue);
    return null;
}</pre>

 
2）获取对应的关闭标签
    function getMatchingEndComment(startComment, allowUnbalanced) {
        var allVirtualChildren = getVirtualChildren(startComment, allowUnbalanced);
        if (allVirtualChildren) {
            if (allVirtualChildren.length > 0)
                return allVirtualChildren[allVirtualChildren.length - 1].nextSibling;
            return startComment.nextSibling;
        } else
            return null; // Must have no matching end comment, and allowUnbalanced is true
    }