.7-Vue源码之AST（3）

　　上一节到了parseHTML函数，该函数接受一个字符串与一个对象，字符串即对应的DOM，对象包含几个字符串匹配集及3个长函数。

　　简略梳理部分函数代码如下：

    // Line-7672
    function parseHTML(html, options) {
        var stack = [];
        var expectHTML = options.expectHTML;
        var isUnaryTag$$1 = options.isUnaryTag || no;
        var canBeLeftOpenTag$$1 = options.canBeLeftOpenTag || no;
        var index = 0;
        var last, lastTag;
        while (html) {
            last = html;
            // 排除script,style,textarea三个标签
            if (!lastTag || !isPlainTextElement(lastTag)) {
                var textEnd = html.indexOf('<');
                if (textEnd === 0) {
                    // 截取注释
                    if (comment.test(html)) {
                        var commentEnd = html.indexOf('-->');

                        if (commentEnd >= 0) {
                            advance(commentEnd + 3);
                            continue
                        }
                    }
                    // 处理向下兼容的注释 比如说<!--[if lt IE 9]>
                    if (conditionalComment.test(html)) {
                        var conditionalEnd = html.indexOf(']>');

                        if (conditionalEnd >= 0) {
                            advance(conditionalEnd + 2);
                            continue
                        }
                    }
                    // Doctype:
                    var doctypeMatch = html.match(doctype);
                    if (doctypeMatch) {
                        advance(doctypeMatch[0].length);
                        continue
                    }
                    // End tag:
                    var endTagMatch = html.match(endTag);
                    if (endTagMatch) {
                        var curIndex = index;
                        advance(endTagMatch[0].length);
                        parseEndTag(endTagMatch[1], curIndex, index);
                        continue
                    }
                    // Start tag:
                    // 匹配起始标签
                    var startTagMatch = parseStartTag();
                    if (startTagMatch) {
                        handleStartTag(startTagMatch);
                        continue
                    }
                }
                // 初始化为undefined 这样安全且字符数少一点
                var text = (void 0),
                    rest$1 = (void 0),
                    next = (void 0);
                if (textEnd >= 0) {
                    rest$1 = html.slice(textEnd);
                    while (!endTag.test(rest$1) &&
                        !startTagOpen.test(rest$1) &&
                        !comment.test(rest$1) &&
                        !conditionalComment.test(rest$1)
                    ) {
                        // 处理文本中的<字符
                        next = rest$1.indexOf('<', 1);
                        if (next < 0) {
                            break
                        }
                        textEnd += next;
                        rest$1 = html.slice(textEnd);
                    }
                    text = html.substring(0, textEnd);
                    advance(textEnd);
                }

                if (textEnd < 0) {
                    text = html;
                    html = '';
                }

                if (options.chars && text) {
                    options.chars(text);
                }
            } else {
                /* code... */
            }

            if (html === last) {
                /* code... */
            }
        }
        // Clean up any remaining tags
        parseEndTag();

        function advance(n) {
            /* code... */
        }

        function parseStartTag() {
            /* code... */
        }

        function handleStartTag(match) {
            /* code... */
        }

        function parseEndTag(tagName, start, end) {
            /* code... */
        }
    }

　　函数比较长，除去开头的参数获取，后面直接用while循环开始对字符串进行切割。

　　在判断标签不是script,style,textarea三个特殊标签后，当字符串以<开头时，以注释、向下兼容注释、Doctype、结束标签、起始标签的顺序依次切割。

　　由于案例中字符串是以<div开头，所以直接跳到起始标签的匹配：

    // Line-7722
    var startTagMatch = parseStartTag();
    if (startTagMatch) {
        handleStartTag(startTagMatch);
        continue
    }

    // Line-7795
    function parseStartTag() {
        // 正则匹配
        var start = html.match(startTagOpen);
        if (start) {
            var match = {
                // 标签名(div)
                tagName: start[1],
                // 属性
                attrs: [],
                // 游标索引(初始为0)
                start: index
            };
            advance(start[0].length);
            var end, attr;
            // 进行属性的正则匹配
            // startTagClose匹配/>或>
            // attribute匹配属性 正则太长 没法讲
            // 本例中attr匹配后 => ['id=app','id','=','app']
            while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
                advance(attr[0].length);
                // 属性加入
                match.attrs.push(attr);
            }
            // 在第二次while循环后 end匹配到结束标签 => ['>','']
            if (end) {
                match.unarySlash = end[1];
                advance(end[0].length);
                // 标记结束位置
                match.end = index;
                // 返回匹配对象
                return match
            }
        }
    }

    // Line-7790
    // 该函数将函数局部变量index往前推 并切割字符串
    function advance(n) {
        index += n;
        html = html.substring(n);
    }

 

　　可以看到，通过起始标签的匹配，字符串的<div id='app'>已经被切割出来，保存在一个对象中返回：

　　接下来，会调用handleStartTag方法再次处理返回的对象，看一下这个方法：

    // Line-7818
    function handleStartTag(match) {
        var tagName = match.tagName;
        var unarySlash = match.unarySlash;

        if (expectHTML) {
            // PhrasingTag(段落元素)涉及到标签元素类型 具体可见http://www.5icool.org/a/201308/a2081.html
            if (lastTag === 'p' && isNonPhrasingTag(tagName)) {
                parseEndTag(lastTag);
            }
            // 可以省略闭合标签
            if (canBeLeftOpenTag$$1(tagName) && lastTag === tagName) {
                parseEndTag(tagName);
            }
        }

        // 自闭合标签
        var unary = isUnaryTag$$1(tagName) || tagName === 'html' && lastTag === 'head' || !!unarySlash;

        // 记录属性个数 目前只有一个id属性
        var l = match.attrs.length;
        var attrs = new Array(l);
        for (var i = 0; i < l; i++) {
            var args = match.attrs[i];
            // 一个bug 在对(.)?匹配时会出现
            if (IS_REGEX_CAPTURING_BROKEN && args[0].indexOf('""') === -1) {
                if (args[3] === '') {
                    delete args[3];
                }
                if (args[4] === '') {
                    delete args[4];
                }
                if (args[5] === '') {
                    delete args[5];
                }
            }
            // 匹配属性名app
            var value = args[3] || args[4] || args[5] || '';
            attrs[i] = {
                name: args[1],
                // 处理转义字符
                value: decodeAttr(
                    value,
                    options.shouldDecodeNewlines
                )
            };
        }
        // 将切割出来的字符串转换为AST
        if (!unary) {
            stack.push({
                tag: tagName,
                lowerCasedTag: tagName.toLowerCase(),
                attrs: attrs
            });
            // 标记结束标签
            lastTag = tagName;
        }

        // 这是参数中第一个函数
        if (options.start) {
            options.start(tagName, attrs, unary, match.start, match.end);
        }
    }

    // Line-7667
    function decodeAttr(value, shouldDecodeNewlines) {
        // lg,gt等字符的正则
        var re = shouldDecodeNewlines ? encodedAttrWithNewLines : encodedAttr;
        return value.replace(re, function(match) {
            return decodingMap[match];
        })
    }

　　在该函数中，对之前的对象进行了二次处理，根据标签名、属性生成一个新对象，push到最开始的stack数组中，结果如图所示：

　　由于匹配的是起始标签，所以也会以这个标签名结束，因此被标记为最后的结束标签，即前面一直是undefined的lastTag。

 

　　最后，调用了一个start函数，蒙了半天没找到，后来才发现是最开始传进来的参数中有3个函数：start、end、chars，现在可以看一下这个方法干啥用的了。

　　start方法只接受3个参数，这里传了5个，后面2个被忽略，参数情况是这样的：

　　这个方法比较长：

    // Line-8026
    function start(tag, attrs, unary) {
        // 检查命名空间是否是svg或者math
        var ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag);

        // handle IE svg bug
        if (isIE && ns === 'svg') {
            attrs = guardIESVGBug(attrs);
        }

        var element = {
            type: 1,
            tag: tag,
            // {name:'id',value:'app'}
            attrsList: attrs,
            // {id:'app'}
            attrsMap: makeAttrsMap(attrs),
            parent: currentParent,
            children: []
        };
        if (ns) {
            element.ns = ns;
        }
        // 检查tag属性是否是style、script
        if (isForbiddenTag(element) && !isServerRendering()) {
            element.forbidden = true;
            /* warning */
        }

        // apply pre-transforms 本例中没有
        // Line-7990:preTransforms = pluckModuleFunction(options.modules, 'preTransformNode');
        for (var i = 0; i < preTransforms.length; i++) {
            preTransforms[i](element, options);
        }

        if (!inVPre) {
            // 判断是否有v-pre属性
            processPre(element);
            if (element.pre) {
                inVPre = true;
            }
        }
        // 判断tag是不是pre
        if (platformIsPreTag(element.tag)) {
            inPre = true;
        }
        // 分支跳转到else
        if (inVPre) {
            processRawAttrs(element);
        } else {
            // 处理v-for
            processFor(element);
            // 处理v-if,v-else,v-else-if
            processIf(element);
            // 处理v-once
            processOnce(element);
            // 处理:
            processKey(element);

            // 检测是否是空属性节点
            element.plain = !element.key && !attrs.length;

            // 处理:ref或v-bind:ref属性
            processRef(element);
            // 当tag为slot时
            processSlot(element);
            // 处理:is或v-bind:is属性
            processComponent(element);
            // Line-7991：transforms = pluckModuleFunction(options.modules, 'transformNode');
            // 处理class与style属性 包括原始的和通过:动态绑定
            for (var i$1 = 0; i$1 < transforms.length; i$1++) {
                transforms[i$1](element, options);
            }
            // 处理属性
            processAttrs(element);
        }

        // 根元素不允许为slot或template 且不能有v-for属性
        // 总之必须为单一不可变的节点
        function checkRootConstraints(el) {
            {
                if (el.tag === 'slot' || el.tag === 'template') {
                    warnOnce(
                        "Cannot use <" + (el.tag) + "> as component root element because it may " +
                        'contain multiple nodes.'
                    );
                }
                if (el.attrsMap.hasOwnProperty('v-for')) {
                    warnOnce(
                        'Cannot use v-for on stateful component root element because ' +
                        'it renders multiple elements.'
                    );
                }
            }
        }

        // tree management
        // 这个root是在parse函数开始的时候定义的
        if (!root) {
            root = element;
            checkRootConstraints(root);
        } else if (!stack.length) {
            // allow root elements with v-if, v-else-if and v-else
            if (root.if && (element.elseif || element.else)) {
                checkRootConstraints(element);
                addIfCondition(root, {
                    exp: element.elseif,
                    block: element
                });
            } else {
                warnOnce(
                    "Component template should contain exactly one root element. " +
                    "If you are using v-if on multiple elements, " +
                    "use v-else-if to chain them instead."
                );
            }
        }
        // 没有父元素 跳过
        if (currentParent && !element.forbidden) {
            if (element.elseif || element.else) {
                processIfConditions(element, currentParent);
            } else if (element.slotScope) { // scoped slot
                currentParent.plain = false;
                var name = element.slotTarget || '"default"';
                (currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;
            } else {
                currentParent.children.push(element);
                element.parent = currentParent;
            }
        }
        if (!unary) {
            currentParent = element;
            stack.push(element);
        } else {
            endPre(element);
        }
        // 没有这个 跳过
        // Line-7992：postTransforms = pluckModuleFunction(options.modules, 'postTransformNode');
        for (var i$2 = 0; i$2 < postTransforms.length; i$2++) {
            postTransforms[i$2](element, options);
        }
    }

    // Line-8470
    // 函数作用：attrs={name:'id',value:'app'} => map = {id : app}
    function makeAttrsMap(attrs) {
        var map = {};
        for (var i = 0, l = attrs.length; i < l; i++) {
            // 检测重复属性名
            if (
                "development" !== 'production' &&
                map[attrs[i].name] && !isIE && !isEdge
            ) {
                warn$2('duplicate attribute: ' + attrs[i].name);
            }
            map[attrs[i].name] = attrs[i].value;
        }
        return map
    }

 

　　这个方法首先对标签名进行校验，然后再对属性进行更细致的处理，比如说v-pre,v-for,v-if等等，案例里没有，所以暂时不分析如何处理，下次再搞。

　　值得注意的是transforms这个数组，包含两个函数：transformNode与transformNode$1，其实只是对静态或动态绑定的class与style进行处理，代码如下：

    // Line-9416
    function transformNode(el, options) {
        var warn = options.warn || baseWarn;
        // 获取原始class属性
        var staticClass = getAndRemoveAttr(el, 'class');
        if ("development" !== 'production' && staticClass) {
            var expression = parseText(staticClass, options.delimiters);
            if (expression) {
                /*<div class="{{ val }}"> => <div :class="val"> */
            }
        }
        // 将原始class属性保存为属性
        if (staticClass) {
            el.staticClass = JSON.stringify(staticClass);
        }
        // 获取:class 
        var classBinding = getBindingAttr(el, 'class', false /* getStatic */ );
        if (classBinding) {
            el.classBinding = classBinding;
        }
    }

    // Line-9458
    function transformNode$1(el, options) {
        var warn = options.warn || baseWarn;
        var staticStyle = getAndRemoveAttr(el, 'style');
        if (staticStyle) {
            /* istanbul ignore if */
            {
                var expression = parseText(staticStyle, options.delimiters);
                if (expression) {
                    /*<div style="{{ val }}"> => <div :style="val"> */
                }
            }
            el.staticStyle = JSON.stringify(parseStyleText(staticStyle));
        }

        var styleBinding = getBindingAttr(el, 'style', false /* getStatic */ );
        if (styleBinding) {
            el.styleBinding = styleBinding;
        }
    }

　　在最后，调用processAttrs对动态绑定的属性（v-,@,:）进行处理，代码如下：

    // Line-8376
    function processAttrs(el) {
        // {name:'id',value:'app'}
        var list = el.attrsList;
        var i, l, name, rawName, value, modifiers, isProp;
        for (i = 0, l = list.length; i < l; i++) {
            // id
            name = rawName = list[i].name;
            // app
            value = list[i].value;
            // dirRE => 以v-、@、:开头
            if (dirRE.test(name)) {
                // 标记为拥有动态绑定属性 本例中没有 跳过……
                el.hasBindings = true;
                // modifiers
                modifiers = parseModifiers(name);
                if (modifiers) {
                    name = name.replace(modifierRE, '');
                }
                if (bindRE.test(name)) { // v-bind
                    name = name.replace(bindRE, '');
                    value = parseFilters(value);
                    isProp = false;
                    if (modifiers) {
                        if (modifiers.prop) {
                            isProp = true;
                            name = camelize(name);
                            if (name === 'innerHtml') {
                                name = 'innerHTML';
                            }
                        }
                        if (modifiers.camel) {
                            name = camelize(name);
                        }
                        if (modifiers.sync) {
                            addHandler(
                                el,
                                ("update:" + (camelize(name))),
                                genAssignmentCode(value, "$event")
                            );
                        }
                    }
                    if (isProp || platformMustUseProp(el.tag, el.attrsMap.type, name)) {
                        addProp(el, name, value);
                    } else {
                        addAttr(el, name, value);
                    }
                } else if (onRE.test(name)) { // v-on
                    name = name.replace(onRE, '');
                    addHandler(el, name, value, modifiers, false, warn$2);
                } else { // normal directives
                    name = name.replace(dirRE, '');
                    // parse arg
                    var argMatch = name.match(argRE);
                    var arg = argMatch && argMatch[1];
                    if (arg) {
                        name = name.slice(0, -(arg.length + 1));
                    }
                    addDirective(el, name, rawName, value, arg, modifiers);
                    if ("development" !== 'production' && name === 'model') {
                        checkForAliasModel(el, value);
                    }
                }
            } else {
                {
                    var expression = parseText(value, delimiters);
                    if (expression) {
                        /* warn */
                    }
                }
                // 添加了个attrs属性
                addAttr(el, name, JSON.stringify(value));
            }
        }
    }

　　到此，element的属性如图所示：，attrs和attrsList是一样的，都是一个数组，包含一个对象，值为{name:id,value:app}。

　　这函数有点长。

　　

 

转载于:https://www.cnblogs.com/QH-Jimmy/p/6951643.html