2. 程式人生 > 前端設計 >基於 Proxy 實現簡易版 Vue

基於 Proxy 實現簡易版 Vue

阿新 • • 發佈：2020-06-29

分解剖析

  1. 實現 new Vue() 例項化
  2. 實現 {{ prop }} 繫結值
  3. 實現 v-model 雙向繫結值
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Vue</title>
  </head>
  <body>
    <div
 
 id="app">
      <input v-model="text" />
      {{text}}
      <span>{{text}}</span>
    </div>
    <script src="./vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",data: {
          text: "hello world",},});
    </script>
  </body
 
>
</html>
複製程式碼

實現 class Vue

初始化

// 這裡繼承 EventTarget 提供 Vue 可以接收事件、並且可以建立偵聽器的功能
class Vue extends EventTarget {
  constructor(options) {
    this.options = options;
    this.$el = document.querySelector(options.$el);
    // 資料雙向繫結
    this.data = this.observerData(options.data);
    // 資料模板渲染
    this
 
.compileTemplate(this.$el);
  }
}
複製程式碼

渲染模板

  • 遍歷子元素，拆解文字節點，拆解文字中符合 {{**}} 特徵資料值，繫結data中的值;
  • 元素節點中涵蓋 v-model 屬性的對該屬性值進行資料data繫結;
compileTemplate(node) {
  // 子節點
  const children = node.childNodes;
  children.forEach((it) => {
    if (it.nodeType === 3) {
      // text 文字節點
      // 正則匹配 {{}} 特徵的繫結值
      const regexp = /\{\{\s*([^\s\{\}]+)\s*\}\}/gi;
      const textContent = it.textContent;
      if (textContent.match(regexp)) {
        const prop = RegExp.$1;
        it.textContent = textContent.replace(regexp,this.data[prop]);
        // 節點事件響應監聽
        // 用於接收屬性 set 後的事件響應
        this.addEventListener(
          prop,function (event) {
            it.textContent = textContent.replace(regexp,event.detail);
          },false
        );
      }
    } else if (it.nodeType === 1) {
      // node 元素節點
      this.compileTemplate(it);
      // check v-model
      const attrs = it.attributes;

      if (attrs.hasOwnProperty("v-model")) {
        const _this = this;
        const prop = attrs["v-model"].nodeValue;
        it.value = this.data[prop];
        // 監聽輸入 change
        it.addEventListener(
          "input",function (event) {
            // TODO 入口需要做XSS校驗
            _this.data[prop] = event.target.value;
          },false
        );
      }
    }
  });
}
複製程式碼

資料雙向繫結

  // 雙向繫結
  observerData(data) {
    const _this = this;
    return new Proxy(data,{
      set: function (target,prop,newValue) {
        // 建立 set 屬性事件
        const event = new CustomEvent(prop,{ detail: newValue });
        // 廣播該 set 屬性事件
        _this.dispatchEvent(event);

        return Reflect.set(...arguments);
      },});
  }
複製程式碼

相關物件

EventTarget

EventTarget 是一個 DOM 介面，由可以接收事件、並且可以建立偵聽器的物件實現。

Reflect

Reflect 是一個內建的物件，它提供攔截 JavaScript 操作的方法。這些方法與 proxy handlers 的方法相同。Reflect 不是一個函式物件，因此它是不可構造的。
與大多數全域性物件不同，Reflect 不是一個建構函式。你不能將其與一個 new 運算子一起使用，或者將 Reflect 物件作為一個函式來呼叫。Reflect 的所有屬性和方法都是靜態的（就像 Math 物件）。

  • Reflect.get(): 獲取物件身上某個屬性的值，類似於 target[name]。
  • Reflect.set(): 將值分配給屬性的函式。返回一個 Boolean，如果更新成功，則返回 true。

Proxy

Proxy 物件用於定義基本操作的自定義行為（如屬性查詢、賦值、列舉、函式呼叫等）。

  • target：要使用 Proxy 包裝的目標物件（可以是任何型別的物件，包括原生陣列，函式，甚至另一個代理）。
  • handler：一個通常以函式作為屬性的物件，各屬性中的函式分別定義了在執行各種操作時代理 p 的行為。
    • handler.get()：屬性讀取操作的捕捉器。

      該方法會攔截目標物件的以下操作:

      1. 訪問屬性: proxy[foo]和 proxy.bar
      2. 訪問原型鏈上的屬性: Object.create(proxy)[foo]
      3. Reflect.get()：Reflect.get()方法與從 物件 (target[propertyKey]) 中讀取屬性類似，但它是通過一個函式執行來操作的。
    • handler.set()：屬性設定操作的捕捉器。

      該方法會攔截目標物件的以下操作:

      1. 指定屬性值：proxy[foo] = bar 和 proxy.foo = bar
      2. 指定繼承者的屬性值：Object.create(proxy)[foo] = bar
      3. Reflect.set()：靜態方法 Reflect.set() 工作方式就像在一個物件上設定一個屬性。
const handler = {
  get: function(target,receiver){
    // 攔截讀取
    return Reflect.get(...arguments);
  },set: function(target,newValue,receiver){
    // 攔截設定
    return Reflect.set(...arguments);
  }
};
const p = new Proxy(target,handler);
複製程式碼

CustomEvent

CustomEvent 事件是由程式建立的，可以有任意自定義功能的事件。

  • CustomEvent.detail: 只讀，任何時間初始化時傳入的資料

完整程式碼

class Vue extends EventTarget {
  constructor(options) {
    super();

    this.options = options;
    this.$el = document.querySelector(options.el);
    this.data = this.observerData(options.data);
    this.compileTemplate(this.$el);
  }

  // 雙向繫結
  observerData(data) {
    const _this = this;
    return new Proxy(data,newValue) {
        // 事件釋出
        const event = new CustomEvent(prop,{ detail: newValue });
        _this.dispatchEvent(event);

        return Reflect.set(...arguments);
      },});
  }

  // 模板編譯
  compileTemplate(node) {
    const children = node.childNodes;
    children.forEach((it) => {
      if (it.nodeType === 3) {
        // text 文字節點
        const regexp = /\{\{\s*([^\s\{\}]+)\s*\}\}/gi;
        const textContent = it.textContent;
        if (textContent.match(regexp)) {
          const prop = RegExp.$1;
          it.textContent = textContent.replace(regexp,this.data[prop]);
          // 事件接收
          this.addEventListener(
            prop,function (event) {
              it.textContent = textContent.replace(regexp,event.detail);
            },false
          );
        }
      } else if (it.nodeType === 1) {
        // node 元素節點
        this.compileTemplate(it);
        // check v-model
        const attrs = it.attributes;

        if (attrs.hasOwnProperty("v-model")) {
          const _this = this;
          const prop = attrs["v-model"].nodeValue;
          it.value = this.data[prop];
          it.addEventListener(
            "input",function (event) {
              // TODO 入口需要做XSS校驗
              _this.data[prop] = event.target.value;
            },false
          );
        }
      }
    });
  }
}
複製程式碼

相關推薦

基於 Proxy 實現簡易版 Vue

分解剖析 實現 new Vue() 例項化 實現 {{ prop }} 繫結值 實現 v-model 雙向繫結值 <!DOCTYPE html>

簡易版 vue實現

Vue-mini 完整的Demo示例：[email protected]:xsk-walter/Vue-mini.git 一、Vue例項 建構函式： $option\\ $el\\ $data判斷是否存在 通過|| 邏輯運算子；

基於Netty實現簡易RPC框架

原文地址：pjmike的部落格 前言 現在網上有很多關於使用Netty來構建RPC框架的例子，為什麼我這裡還要寫一篇文章進行論述呢，我很清楚我可能沒有寫得他們那麼好。之所以還要寫，有兩點原因:

Python基於pygame實現單機版五子棋對戰

python實現的五子棋，能夠自動判斷輸贏，沒有是實現電腦對戰功能 原始碼下載：pygame五子棋

java實現簡易版圖形介面計算器

經過一個月的Java學習，聽說Java中的第一個小型程式好多都做的是計算器，今天我也來做做吧，把這一個月學習的知識簡單的綜合一下，熟練近期學習的知識點。

python實現簡易版學生成績管理系統

300來行python程式碼實現簡易版學生成績管理系統，供大家參考，具體內容如下

C語言實現簡易版三子棋遊戲

本文例項為大家分享了C語言實現三子棋遊戲的具體程式碼，供大家參考，具體內容如下

C語言實現簡易版掃雷小遊戲

本文例項為大家分享了C語言實現簡易版掃雷的具體程式碼，供大家參考，具體內容如下

Python基於Socket實現簡易多人聊天室

前言 套接字(Sockets)是雙向通訊通道的端點。 套接字可以在一個程序內，在同一機器上的程序之間，或者在不同主機的程序之間進行通訊，主機可以是任何一臺有連線網際網路的機器。

Python基於Socket實現簡易多人聊天室的示例程式碼

前言 套接字(Sockets)是雙向通訊通道的端點。 套接字可以在一個程序內，在同一機器上的程序之間，或者在不同主機的程序之間進行通訊，主機可以是任何一臺有連線網際網路的機器。

C語言實現簡易版掃雷的完整過程

一、問題描述 用C語言實現簡易版掃雷。 二、基本流程 1.選單介面。 2.建立地圖 (兩個地圖)。

Android實現簡易版日記本notePad

技術標籤：android經驗分享其他資料庫安卓 今天實現一個日常中大家可能會使用到的功能—日記本，也可以說是備忘錄，並已實現相容androidX和深色模式。 app中使用Androidx中的Room資料庫，Room持久資料庫提供了一

實現簡易版德州撲克|學習麻瓜程式設計以專案為導向入門前端 HTML+CSS+JS

技術標籤：csshtmljqueryjs 實現簡易版德州撲克|學習麻瓜程式設計以專案為導向入門前端 HTML+CSS+JS

基於Swing的簡易版JavaSwing通訊錄（第一部分）

技術標籤：Javajavaswing 之前學校期末實訓要求用寫一個通訊錄，下面來簡單記錄一下本次開發的過程。

利用python實現簡易版的貪吃蛇遊戲

**引言 ** 作為python 小白，總是覺得自己要做好百分之二百的準備，才能開始寫程式。以至於常常整天在那看各種語法教程，學了幾個月還是隻會print(\'hello

基於JavaScript實現簡易計算器

本文例項為大家分享了javascript實現簡易計算器的具體程式碼，供大家參考，具體內容如下

Python實用工具，paramiko模組，Python實現簡易版SSH登入工具

開發工具 Python版本： 3.5.4 相關模組： paramiko模組以及一些Python自帶的模組。 作業系統：Windows系列。

Python實用工具，SimpleGUICS2Pygame模組，Python實現簡易版計時器

開發工具 Python版本：3.6.4 相關模組： SimpleGUICS2Pygame模組。 環境搭建 安裝Python並新增到環境變數，pip安裝需要的相關模組即可。

Python實用工具，turtle庫，Python實現簡易版時鐘

前言 Python函式庫眾多，而且在不斷更新，所以學習這些函式庫最有效的方法，就是閱讀Python官方文件。同時藉助Google和百度。

基於vue實現簡易打地鼠遊戲

本文例項為大家分享了vue實現簡易打地鼠遊戲的具體程式碼，供大家參考，具體內容如下