[Day11] - 利用 Proxy 来监听资料的变化

在 connectedCallback 初始建立时 , 我们需要处理 html 如何呈现 在 attributeChangedCallback 属性变更时 , 根据不同的属性来做对应的处理

我们何不效仿 React 做出一个根据 data 的 render 函式 ,

建立 render 函式前 , 我们可能需要有一个元件的资料中心 ( React 是 this.state / Vue 是 )

然後资料变更时 , 会通知元件需要触发 render 函式

刚好浏览器中有个 Proxy 物件 , 可以达到 observe 资料 & 触发 render 的功能

下面我们先来认识一下 Proxy 物件吧 !

建构子

• target : 需要 observe 的资料对象 ( 可以是 array . object 或 function )
• handler : 包括 getter 跟 setter 方法 , 当 target 的资料改变时 , 会对应触发 handler 中的 getter . setter

范例

下面我们来举例说明一下

const handler = {

  // 取出资料时 , undefined 回传 "资料未定义~~"
  get: function (obj, prop) {
    return obj[prop] || '资料未定义~~';
  },

  // 更新的数值都 * 2
  set: function (obj, prop, newValue) {
    if (newValue) obj[prop] = 2 * newValue;
  }
};

const target = {};
const p = new Proxy(target, handler);
p.a = 1;
p.b = undefined;

console.log(p.a); // 2
console.log(target); // { a : 2 }
console.log(p.b); // '资料未定义~~'
console.log('c' in p, p.c); // false, '资料未定义~~'

图解

下面我们用图片来解说 , 上面的范例都发生了那些事情 ~

p.a = 1

设定 p.a 的时候 , 我们会将数值丢给 handler.set 函式做处理

并且 set 函式接收到的参数如下 :

• obj = {} ( target 物件 )
• prop = a ( 目前要设定的属性 )
• newValue = 1 ( 目前要设定的数值 )

因为 newValue 存在 , 因此 handler.set 会将 target 物件改成 { a : 2 }

p.b = undefined

console.log(p.a)

取出 p.a 的时候 , Proxy 会透过 handler.get 函式做处理

并且 get 函式接收到的参数如下 :

• obj = { a : 2 } ( target 物件 )
• prop = a ( 目前要取出的属性 )

因为 obj[a] 存在 , 因此 handler.get 回传数值 2

console.log(p.b)

同理 , 取出 p.b 的时候 , Proxy 会透过 handler.get 函式做处理

并且 get 函式接收到的参数如下 :

• obj = { a : 2 } ( target 物件 )
• prop = b ( 目前要取出的属性 )

因为 obj[b] 不存在 , 因此 handler.get 回传字串 '资料未定义~~'

参考资料 :

• Virtual DOM | 使用 ES6 Proxy 监听资料的变化
• MDN 文件 - Proxy
• JavaScript Proxy