0
点赞
收藏
分享

微信扫一扫

js DOM 节点元数据

这样,拿不到弱映射中的健,也就无法取得弱映射中对应的值。虽然这防止了前面提到的访问,但 整个代码也完全陷入了 ES6 之前的闭包私有变量模式。

const User = (() => {
  const wm = new WeakMap();
  class User {
    constructor(id) {
      this.idProperty = Symbol('id');
      this.setId(id);
}
  setPrivate(property, value) {
    const privateMembers = wm.get(this) || {};
    privateMembers[property] = value;
    wm.set(this, privateMembers);
}
  getPrivate(property) {
    return wm.get(this)[property];
}
  setId(id) {
    this.setPrivate(this.idProperty, id);
}
  getId(id) {
    return this.getPrivate(this.idProperty);
} }
       return User;
    })();
    const user = new User(123);
    alert(user.getId()); // 123
    user.setId(456);
    alert(user.getId()); // 456

因为 WeakMap 实例不会妨碍垃圾回收,所以非常适合保存关联元数据。来看下面这个例子,其中 使用了常规的 Map:

const m = new Map();
    const loginButton = document.querySelector('#login');
// 给这个节点关联一些元数据 m.set(loginButton, {disabled: true});

假设在上面的代码执行后,页面被 JavaScript 改变了,原来的登录按钮从 DOM 树中被删掉了。但 由于映射中还保存着按钮的引用,所以对应的 DOM 节点仍然会逗留在内存中,除非明确将其从映射中 删除或者等到映射本身被销毁。

如果这里使用的是弱映射,如以下代码所示,那么当节点从 DOM 树中被删除后,垃圾回收程序就 可以立即释放其内存(假设没有其他地方引用这个对象):

const wm = new WeakMap();
    const loginButton = document.querySelector('#login');
// 给这个节点关联一些元数据 wm.set(loginButton, {disabled: true});

举报

相关推荐

0 条评论