免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

每個(gè)節(jié)點(diǎn)都有一個(gè) nodeType 屬性，用于表明節(jié)點(diǎn)的類型，節(jié)點(diǎn)類型由?Node?類型中定義12個(gè)常量表示：

?

?nodeType在vue中的應(yīng)用

在vue編譯的過(guò)程中需要查找html結(jié)構(gòu)中的雙大括號(hào)，或者@事件等代表vue中的數(shù)據(jù)及方法的屬性值，通過(guò)編譯將查找到的部分使用vue實(shí)例中的屬性或方法替換

class Compile {    // el是宿主元素選擇器    // vm是KVue實(shí)例    constructor(el, vm) {        this.$vm = vm;        this.$el = document.querySelector(el);        // 先把模板移動(dòng)到fragment標(biāo)簽中，更新完成后在追加回來(lái)        this.$fragment = this.node2Fragment(this.$el);        // 執(zhí)行編譯        this.compile(this.$fragment);        // 追加        this.$el.appendChild(this.$fragment);    }    node2Fragment(el) {        // 移動(dòng)操作        const fragment = document.createDocumentFragment();        let child;        while(child = el.firstChild) {            // 移動(dòng)操作            fragment.appendChild(child);        }        return fragment    }    // 遞歸el，分別處理文本節(jié)點(diǎn)和元素節(jié)點(diǎn)    compile(el) {        const childNodes = el.childNodes;        Array.from(childNodes).forEach(node => {            if (node.nodeType == 1) {                // 元素節(jié)點(diǎn) <p k-text="abc" @click="onClick"></p>                // console.log('元素節(jié)點(diǎn)：' node.nodeName);                this.compileElement(node);            } else if (this.isInter(node)) {                // 文本節(jié)點(diǎn)，且內(nèi)容是{{xxx}}實(shí)行                // console.log('插值文本：' node.textContent);                this.compileText(node);            }            // 遞歸子節(jié)點(diǎn)            if (node.childNodes && node.childNodes.length > 0) {                this.compile(node);            }        })    }    // 文本節(jié)點(diǎn)，且內(nèi)容是{{xxx}}實(shí)行    isInter(node) {        return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent)    }    // 編譯元素節(jié)點(diǎn)    compileElement(node) {        // 遍歷所有屬性        const nodeAttrs = node.attributes;        Array.from(nodeAttrs).forEach(attr => {            // 規(guī)定：指令以k-xxx="yyy"命名            const attrName = attr.name; // 屬性名稱 k-xxx            const exp = attr.value;// 屬性值 yyy            if (attrName.indexOf('k-') == 0) {                const dir = attrName.substring(2);                // 執(zhí)行指令解析                this[dir] && this[dir](node, exp)            }        })    }    compileText(node) {        const exp = RegExp.$1;        this.update(node, exp, 'text');    }    // 通用update方法    update(node, exp, dir) {        // 獲取更新函數(shù)        let updator = this[dir   'Updator'];        // 初始化，首次頁(yè)面賦值        updator && updator(node, this.$vm[exp]);        // 創(chuàng)建Watcher        new Watcher(this.$vm, exp, function(value) {            updator && updator(node, value);        })    }    textUpdator(node, value) {        node.textContent = value;    }    text(node, exp) {        this.update(node, exp, 'text')    }    html(node, exp) {        this.update(node, exp, 'html')    }    htmlUpdator(node, value) {        node.innerHTML = value;    }}

以上是簡(jiǎn)單的進(jìn)行屬性查找的示例，通過(guò)nodeType為1來(lái)判斷是元素節(jié)點(diǎn)，還是文本節(jié)點(diǎn)并進(jìn)行相應(yīng)的操作。

?