簡(jiǎn)單實(shí)現(xiàn)迷你Vue框架

soasme 發(fā)布于2019-08-23 14:40 / 2493人閱讀

摘要：它們不是主樹(shù)的一部分。在樹(shù)中，文檔片段被其所有的子元素所代替。因?yàn)槲臋n片段存在于內(nèi)存中，并不在樹(shù)中，所以將子元素插入到文檔片段時(shí)不會(huì)引起頁(yè)面回流對(duì)元素位置和幾何上的計(jì)算。因此，使用文檔片段通常會(huì)帶來(lái)更好的性能。

本教程說(shuō)明將采用es6語(yǔ)法來(lái)編寫(xiě)

創(chuàng)建MiniVue.js文件

//創(chuàng)建一個(gè)MVVM類(lèi)
class MVVM {
  // 構(gòu)造器
  constructor(option) {
    // 緩存重要屬性
    this.$vm = this;
    this.$el = option.el;
    this.$data = option.data;
  }
}

MVVM類(lèi)的作用: 解析視圖模板，把對(duì)應(yīng)的數(shù)據(jù)，渲染到視圖

首先得判斷視圖是否存在，在視圖存在的時(shí)候，創(chuàng)建模板編譯器，來(lái)解析視圖

class MVVM {
  // 構(gòu)造器
  constructor(option) {
    // 緩存重要屬性
    this.$vm = this;
    this.$el = option.el;
    this.$data = option.data;
    // 判斷視圖是否存在
    if (this.$el) {
      // 創(chuàng)建模板編譯器， 來(lái)解析視圖
      this.$compiler = new TemplateCompiler(this.$el, this.$vm)
    }
  }
}

下面我們來(lái)創(chuàng)建文件TemplateCompiler.js, 輸入以下內(nèi)容

// 創(chuàng)建一個(gè)模板編譯工具
class TemplateCompiler {
  // el 視圖
  // vm 全局vm對(duì)象
  constructor(el, vm) {
    // 緩存重要屬性
    this.el = document.querySelector(el);
    this.vm = vm;
  }
}

當(dāng)緩存好重要的屬性后，就要解析模板了

步驟分三步

把模板內(nèi)容放進(jìn)內(nèi)存（內(nèi)存片段）

解析模板

把內(nèi)存的結(jié)果，放回到模板

class TemplateCompiler {

// el 視圖
// vm 全局vm對(duì)象
constructor(el, vm) {
  // 緩存重要屬性
  this.el = document.querySelector(el);
  this.vm = vm;
  
  // 1. 把模板內(nèi)容放進(jìn)內(nèi)存（內(nèi)存片段）
  let fragment = this.node2fragment(this.el);
  // 2. 解析模板
  this.compile(fragment);
  // 3. 把內(nèi)存的結(jié)果，放回到模板
  this.el.appendChild(fragment);
}

}

上面定義node2fragment()方法和compile()方法下面我們來(lái)實(shí)現(xiàn)

分析TemplateCompiler 類(lèi)有兩大類(lèi)方法：工具方法、核心方法

    class TemplateCompiler {
      // el 視圖
      // vm 全局vm對(duì)象
      constructor(el, vm) {
        // 緩存重要屬性
        this.el = document.querySelector(el);
        this.vm = vm;
    
        // 1. 把模板內(nèi)容放進(jìn)內(nèi)存（內(nèi)存片段）
        let fragment = this.node2fragment(this.el)
        // 2. 解析模板
        this.compile(fragment);
        // 3. 把內(nèi)存的結(jié)果，放回到模板
        this.el.appendChild(fragment);
       }
      }

  // 工具方法
  isElementNode(node) {
    // 1. 元素節(jié)點(diǎn)  2. 屬性節(jié)點(diǎn)  3. 文本節(jié)點(diǎn)
    return node.nodeType === 1;
  }
  isTextNode(node) {
    return node.nodeType === 3;
  }

  // 核心方法
  node2fragment(node) {
    // 1. 創(chuàng)建內(nèi)存片段
    let fragment = document.createDocumentFragment();
    // 2. 把模板內(nèi)容放進(jìn)內(nèi)存
    let child;
    while (child = node.firstChild) {
      fragment.appendChild(child);
    }
    // 3. 返回
    return fragment;
  }
  compile(node) {
  }
}

關(guān)于createDocumentFragment的描述：

DocumentFragments 是DOM節(jié)點(diǎn)。它們不是主DOM樹(shù)的一部分。通常的用例是創(chuàng)建文檔片段，將元素附加到文檔片段，然后將文檔片段附加到DOM樹(shù)。在DOM樹(shù)中，文檔片段被其所有的子元素所代替。

因?yàn)槲臋n片段存在于內(nèi)存中，并不在DOM樹(shù)中，所以將子元素插入到文檔片段時(shí)不會(huì)引起頁(yè)面回流（對(duì)元素位置和幾何上的計(jì)算）。因此，使用文檔片段通常會(huì)帶來(lái)更好的性能。

分析解析模板compile()方法實(shí)現(xiàn)方式

首先獲取每一個(gè)子節(jié)點(diǎn)，然后遍歷每一個(gè)節(jié)點(diǎn)，再判斷節(jié)點(diǎn)類(lèi)型
下面childNode是類(lèi)數(shù)組沒(méi)有數(shù)組方法

使用擴(kuò)展運(yùn)算符( spread )[...childNode]使其轉(zhuǎn)化為數(shù)組便于操作

compile(parent) {
    // 1. 獲取子節(jié)點(diǎn)
    let childNode = parent.childNodes;
    // 2. 遍歷每一個(gè)節(jié)點(diǎn)
    [...childNode].forEach(node => {
      // 3. 判斷節(jié)點(diǎn)類(lèi)型
      if (this.isElementNode(node)) {
        // 解析元素節(jié)點(diǎn)的指令
        this.compileElement(node);
      }
    })
  }

下面來(lái)實(shí)現(xiàn)compileElement()方法當(dāng)前調(diào)用傳過(guò)來(lái)的是元素節(jié)點(diǎn)

接下來(lái)就要獲取元素的所有屬性，然后遍歷所有屬性，再判斷屬性是否是指令

v-text是vue的指令，像ng-xxx指令是不進(jìn)行收集的

判斷為指令時(shí)就要收集結(jié)果

compileElement(node) {
    // 1. 獲取當(dāng)前節(jié)點(diǎn)的所有屬性
    let attrs = node.attributes;
    // 2. 遍歷當(dāng)前元素的所有屬性
    [...attrs].forEach(attr => {
      let attrName = attr.name
      // 3. 判斷屬性是否是指令
      if (this.isDirective(attrName)) {
        // 4. 收集
        let type = attrName.substr(2); // v-text
        // 指令的值就是表達(dá)式
        let expr = attr.value;
        // 解析指令
        CompilerUtils.text(node, this.vm, expr);
      }
    })
  }

實(shí)現(xiàn)CompilerUtils類(lèi)

CompilerUtils = {
  // 解析text指令
  text(node, vm, expr) {
    // 1. 找到更新方法
    let updaterFn = this.updater["textUpdater"];
    // 執(zhí)行方法
    updaterFn && updaterFn(node, vm.$data[expr]);
  },
  // 更新規(guī)則對(duì)象
  updater: {
    // 文本更新方法
    textUpdater(node, value) {
      node.textContent = value;
    }
  }
}

在TemplateCompiler類(lèi)工具方法下添加方法isDirective()判斷屬性是否是指令

isDirective(attrName) {
    // 判斷屬性是否是指令
    return attrName.indexOf("v-") >= 0;
  }

實(shí)現(xiàn)（v-text）完整代碼

// 創(chuàng)建一個(gè)模板編譯工具
class TemplateCompiler {
  // el 視圖
  // vm 全局vm對(duì)象
  constructor(el, vm) {
    // 緩存重要屬性
    this.el = document.querySelector(el);
    this.vm = vm;
    // 1. 把模板內(nèi)容放進(jìn)內(nèi)存（內(nèi)存片段）
    let fragment = this.node2fragment(this.el)
    // 2. 解析模板
    this.compile(fragment);
    // 3. 把內(nèi)存的結(jié)果，放回到模板
    this.el.appendChild(fragment);
  }
  // 工具方法
  isElementNode(node) {
    // 1. 元素節(jié)點(diǎn)  2. 屬性節(jié)點(diǎn)  3. 文本節(jié)點(diǎn)
    return node.nodeType === 1;
  }
  isTextNode(node) {
    return node.nodeType === 3;
  }
  isDirective(attrName) {
    // 判斷屬性是否是指令
    return attrName.indexOf("v-") >= 0;
  }
  // 核心方法
  node2fragment(node) {
    // 1. 創(chuàng)建內(nèi)存片段
    let fragment = document.createDocumentFragment();
    // 2. 把模板內(nèi)容放進(jìn)內(nèi)存
    let child;
    while (child = node.firstChild) {
      fragment.appendChild(child);
    }
    // 3. 返回
    return fragment;
  }
  compile(parent) {
    // 1. 獲取子節(jié)點(diǎn)
    let childNode = parent.childNodes;
    // 2. 遍歷每一個(gè)節(jié)點(diǎn)
    [...childNode].forEach(node => {
      // 3. 判斷節(jié)點(diǎn)類(lèi)型
      if (this.isElementNode(node)) {
        // 元素節(jié)點(diǎn) （解析指令）
        this.compileElement(node);
      }
    })
  }
  // 解析元素節(jié)點(diǎn)的指令
  compileElement(node) {
    // 1. 獲取當(dāng)前節(jié)點(diǎn)的所有屬性
    let attrs = node.attributes;
    // 2. 遍歷當(dāng)前元素的所有屬性
    [...attrs].forEach(attr => {
      let attrName = attr.name
      // 3. 判斷屬性是否是指令
      if (this.isDirective(attrName)) {
        // 4. 收集
        let type = attrName.substr(2); // v-text
        // 指令的值就是表達(dá)式
        let expr = attr.value;
        CompilerUtils.text(node, this.vm, expr);
      }
    })
  }
  // 解析表達(dá)式
  compileText() {
  }
}
CompilerUtils = {
  // 解析text指令
  text(node, vm, expr) {
    // 1. 找到更新方法
    let updaterFn = this.updater["textUpdater"];
    // 執(zhí)行方法
    updaterFn && updaterFn(node, vm.$data[expr]);
  },
  // 更新規(guī)則對(duì)象
  updater: {
    // 文本更新方法
    textUpdater(node, value) {
      node.textContent = value;
    }
  }
}

下面來(lái)實(shí)現(xiàn)（v-model）

修改如下代碼

compileElement(node) {
  // 1. 獲取當(dāng)前節(jié)點(diǎn)的所有屬性
  let attrs = node.attributes;
  // 2. 遍歷當(dāng)前元素的所有屬性
  [...attrs].forEach(attr => {
    let attrName = attr.name
    // 3. 判斷屬性是否是指令
    if (this.isDirective(attrName)) {
      // 4. 收集
      let type = attrName.substr(2); // v-text
      // 指令的值就是表達(dá)式
      let expr = attr.value;
      //-----------------------修改代碼start---------------------
      // CompilerUtils.text(node, this.vm, expr);
      CompilerUtils[type](node, this.vm, expr);
      //-----------------------修改代碼end---------------------
    }
  })
}

在CompilerUtils類(lèi)添加實(shí)現(xiàn)

CompilerUtils = {
  ...
  //----------------------新增方法---------------------
  // 解析model指令
  model(node, vm, expr) {
    // 1. 找到更新方法
    let updaterFn = this.updater["modelUpdater"];
    // 執(zhí)行方法
    updaterFn && updaterFn(node, vm.$data[expr]);
  },
  // 更新規(guī)則對(duì)象
  updater: {
    ...
    //----------------------新增方法---------------------
    // 輸入框更新方法
    modelUpdater(node, value) {
      node.value = value
    }
  }
}

實(shí)現(xiàn)（v-html）就由讀者自行添加對(duì)應(yīng)的方法，形式和（v-model）差不多

下面來(lái)實(shí)現(xiàn)解析表達(dá)式，在compile添加以下代碼

重要的怎么用驗(yàn)證表達(dá)式

compile(parent) {
    // 1. 獲取子節(jié)點(diǎn)
    let childNode = parent.childNodes;
    // 2. 遍歷每一個(gè)節(jié)點(diǎn)
    [...childNode].forEach(node => {
      // 3. 判斷節(jié)點(diǎn)類(lèi)型
      if (this.isElementNode(node)) {
        // 元素節(jié)點(diǎn) （解析指令）
        this.compileElement(node);
      //-----------------新增代碼--------------------
        // 文本節(jié)點(diǎn)
      } else if (this.isTextNode(node)) {
        // 表達(dá)式解析
        // 定義表達(dá)式正則驗(yàn)證規(guī)則
        let textReg = /{{(.+)}}/;
        let expr = node.textContent;
        // 按照規(guī)則驗(yàn)證內(nèi)容
        if (textReg.test(expr)) {
          // 獲取分組內(nèi)容
          expr = RegExp.$1;
          // 調(diào)用方法編譯
          this.compileText(node, expr);
        }
      }
    })
  }

下面來(lái)實(shí)現(xiàn)文本解析器，通過(guò)分析（v-text）和表達(dá)式解析差不多

// 解析表達(dá)式
  compileText(node, expr) {
    CompilerUtils.text(node, this.vm, expr);
  }

完整實(shí)現(xiàn)代碼

// 創(chuàng)建一個(gè)模板編譯工具
class TemplateCompiler {
  // el 視圖
  // vm 全局vm對(duì)象
  constructor(el, vm) {
    // 緩存重要屬性
    this.el = document.querySelector(el);
    this.vm = vm;
    // 1. 把模板內(nèi)容放進(jìn)內(nèi)存（內(nèi)存片段）
    let fragment = this.node2fragment(this.el)
    // 2. 解析模板
    this.compile(fragment);
    // 3. 把內(nèi)存的結(jié)果，放回到模板
    this.el.appendChild(fragment);
  }
  // 工具方法
  isElementNode(node) {
    // 1. 元素節(jié)點(diǎn)  2. 屬性節(jié)點(diǎn)  3. 文本節(jié)點(diǎn)
    return node.nodeType === 1;
  }
  isTextNode(node) {
    return node.nodeType === 3;
  }
  isDirective(attrName) {
    // 判斷屬性是否是指令
    return attrName.indexOf("v-") >= 0;
  }
  // 核心方法
  node2fragment(node) {
    // 1. 創(chuàng)建內(nèi)存片段
    let fragment = document.createDocumentFragment();
    // 2. 把模板內(nèi)容放進(jìn)內(nèi)存
    let child;
    while (child = node.firstChild) {
      fragment.appendChild(child);
    }
    // 3. 返回
    return fragment;
  }
  compile(parent) {
    // 1. 獲取子節(jié)點(diǎn)
    let childNode = parent.childNodes;
    // 2. 遍歷每一個(gè)節(jié)點(diǎn)
    [...childNode].forEach(node => {
      // 3. 判斷節(jié)點(diǎn)類(lèi)型
      if (this.isElementNode(node)) {
        // 元素節(jié)點(diǎn) （解析指令）
        this.compileElement(node);
      } else if (this.isTextNode(node)) {
        // 表達(dá)式解析
        // 定義表達(dá)式正則驗(yàn)證規(guī)則
        let textReg = /{{(.+)}}/;
        let expr = node.textContent;
        // 按照規(guī)則驗(yàn)證內(nèi)容
        if (textReg.test(expr)) {
          expr = RegExp.$1;
          // 調(diào)用方法編譯
          this.compileText(node, expr);
        }
      }
    })
  }
  // 解析元素節(jié)點(diǎn)的指令
  compileElement(node) {
    // 1. 獲取當(dāng)前節(jié)點(diǎn)的所有屬性
    let attrs = node.attributes;
    // 2. 遍歷當(dāng)前元素的所有屬性
    [...attrs].forEach(attr => {
      let attrName = attr.name;
      // 3. 判斷屬性是否是指令
      if (this.isDirective(attrName)) {
        // 4. 收集
        let type = attrName.substr(2); // v-text
        // 指令的值就是表達(dá)式
        let expr = attr.value;
        // CompilerUtils.text(node, this.vm, expr);
        CompilerUtils[type](node, this.vm, expr);
      }
    })
  }
  // 解析表達(dá)式
  compileText(node, expr) {
    CompilerUtils.text(node, this.vm, expr);
  }
}
CompilerUtils = {
  // 解析text指令
  text(node, vm, expr) {
    // 1. 找到更新方法
    let updaterFn = this.updater["textUpdater"];
    // 執(zhí)行方法
    updaterFn && updaterFn(node, vm.$data[expr]);
  },
  // 解析model指令
  model(node, vm, expr) {
    // 1. 找到更新方法
    let updaterFn = this.updater["modelUpdater"];
    // 執(zhí)行方法
    updaterFn && updaterFn(node, vm.$data[expr]);
  },
  // 更新規(guī)則對(duì)象
  updater: {
    // 文本更新方法
    textUpdater(node, value) {
      node.textContent = value;
    },
    // 輸入框更新方法
    modelUpdater(node, value) {
      node.value = value;
    }
  }
}

數(shù)據(jù)雙向綁定（完結(jié)篇）

后續(xù)內(nèi)容更精彩

GPU云服務(wù)器云服務(wù)器 VUE實(shí)現(xiàn)webrtc Vue實(shí)現(xiàn)分頁(yè) 簡(jiǎn)單爬蟲(chóng)框架簡(jiǎn)單 php框架

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100953.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

soasme

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 3577·2023-04-26 02:05
GDI繪制Winform工作流組件、具有獨(dú)立圖層的增刪處理、防PPT效果

閱讀 2021·2021-11-19 11:30
外貿(mào)網(wǎng)站如何選擇服務(wù)器?外貿(mào)網(wǎng)站服務(wù)器價(jià)格多少錢(qián)?

閱讀 4230·2021-09-30 09:59
新型硅陽(yáng)極電池走向市場(chǎng)，有望改變電子設(shè)備和電動(dòng)汽車(chē)市場(chǎng)

閱讀 3184·2021-09-10 10:51
安科視頻監(jiān)控產(chǎn)品中的遠(yuǎn)程代碼執(zhí)行漏洞允許黑客入侵設(shè)備

閱讀 2614·2021-09-01 10:30
raksmart：韓國(guó)獨(dú)立服務(wù)器測(cè)評(píng)（大陸優(yōu)化線(xiàn)路）

閱讀 1496·2021-08-11 11:20
css3 動(dòng)畫(huà)（二）貝塞爾曲線(xiàn)

閱讀 2626·2019-08-30 15:54
CSS雙飛翼布局

閱讀 572·2019-08-30 10:49

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

簡(jiǎn)單實(shí)現(xiàn)迷你Vue框架

相關(guān)文章

**迷你版Vue--學(xué)習(xí)如何造一個(gè)Vue輪子**

去哪兒網(wǎng)迷你React的研發(fā)心得

吐槽專(zhuān)用

Fre：又一個(gè)小而美的前端MVVM框架

發(fā)表評(píng)論

0條評(píng)論

soasme

男|高級(jí)講師

TA的文章

tensorflow

GDI繪制Winform工作流組件、具有獨(dú)立圖層的增刪處理、防PPT效果

外貿(mào)網(wǎng)站如何選擇服務(wù)器?外貿(mào)網(wǎng)站服務(wù)器價(jià)格多少錢(qián)?

新型硅陽(yáng)極電池走向市場(chǎng)，有望改變電子設(shè)備和電動(dòng)汽車(chē)市場(chǎng)

安科視頻監(jiān)控產(chǎn)品中的遠(yuǎn)程代碼執(zhí)行漏洞允許黑客入侵設(shè)備

raksmart：韓國(guó)獨(dú)立服務(wù)器測(cè)評(píng)（大陸優(yōu)化線(xiàn)路）

css3 動(dòng)畫(huà)（二）貝塞爾曲線(xiàn)

CSS雙飛翼布局

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

簡(jiǎn)單實(shí)現(xiàn)迷你Vue框架

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！