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

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

    });
}

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

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

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

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

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

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

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

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