buildTemplate(fragment) {
    let nodeList = [...fragment.childNodes];

    // 1.遍歷所有的節(jié)點(diǎn)
    nodeList.forEach(node => {

    });
}

// 2.利用指定的數(shù)據(jù)編譯內(nèi)存中的元素
this.buildTemplate(fragment);

buildTemplate(fragment) {
    let nodeList = [...fragment.childNodes];

    // 1.遍歷所有的節(jié)點(diǎn)
    nodeList.forEach(node => {
        // 2.需要判斷當(dāng)前遍歷到的節(jié)點(diǎn)是一個(gè)元素還是一個(gè)文本
        if (this.vm.isElement(node)) {
            // 是一個(gè)元素
            this.buildElement(node);
        } else {
            // 不是一個(gè)元素
            this.buildText(node);
        }
    });
}

buildElement(node) {
    // 可以通過 node.attributes 獲取到當(dāng)前元素上所有的屬性
    let attrs = [...node.attributes];

    // 1.遍歷所有的屬性
    attrs.forEach(attr => {
        let {name, value} = attr;
        if (name.startsWith('v-')) {
            console.log('是Vue的指令, 需要我們處理', name);
        }
    });
}

buildText(node) {
    // 可以通過 node.textContent 獲取到當(dāng)前文本節(jié)點(diǎn)的內(nèi)容
    let content = node.textContent;

    // 編寫一個(gè)正則表達(dá)式, 用來匹配 {{}}
    // 如下正則表達(dá)式的含義是: 匹配 {{}} 中間的內(nèi)容
    // /: 正則表達(dá)式通常以斜杠 / 開始和結(jié)束，表示正則表達(dá)式的開始和結(jié)束。
    // \{ 和 \}: 這些是轉(zhuǎn)義字符，用于匹配實(shí)際的花括號 { 和 }?；ɡㄌ栐谡齽t表達(dá)式中具有特殊意義，因此需要使用反斜杠進(jìn)行轉(zhuǎn)義。
    // \{\{ 和 \}\}: 這是正則表達(dá)式的起始和結(jié)束部分，用于匹配雙花括號 {{ 和 }}。
    // .+?: 這部分用于匹配雙花括號內(nèi)的任意字符，. 表示匹配任意字符，+ 表示匹配一個(gè)或多個(gè)前面的字符，? 表示非貪婪匹配，即盡可能匹配最短的內(nèi)容。這樣確保匹配到最近的結(jié)束雙花括號 }}。
    // /g: g 是正則表達(dá)式的標(biāo)志，表示全局匹配，即匹配字符串中的所有符合條件的部分。
    // /i: i 也是正則表達(dá)式的標(biāo)志，表示不區(qū)分大小寫匹配，這意味著 {{...}} 和 {{...}} 都會被匹配到。
    // 因此，這個(gè)正則表達(dá)式可以用于在字符串中找到并提取所有的 {{...}} 結(jié)構(gòu)，不區(qū)分大小寫，不貪婪匹配，且匹配所有出現(xiàn)的情況。
    let reg = /\{\{.+?\}\}/gi;
    if (reg.test(content)) {
        console.log('是一個(gè)文本節(jié)點(diǎn), 需要我們處理', content);
    }
}

// 處理子元素(處理后代)
this.buildTemplate(node);