首页 > 其他分享 >js DOM 节点元数据

js DOM 节点元数据

时间:2024-01-15 11:04:13浏览次数:26  
标签:const 映射 DOM wm js user new 节点 id

这样,拿不到弱映射中的健,也就无法取得弱映射中对应的值。虽然这防止了前面提到的访问,但 整个代码也完全陷入了 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});

标签:const,映射,DOM,wm,js,user,new,节点,id
From: https://blog.51cto.com/u_16255561/9250129

相关文章

  • js 弱键
    WeakMap中“weak”表示弱映射的键是“弱弱地拿着”的。意思就是,这些键不属于正式的引用,不会阻止垃圾回收。但要注意的是,弱映射中值的引用可不是“弱弱地拿着”的。只要键存在,键/值对就会存在于映射中,并被当作对值的引用,因此就不会被当作垃圾回收。来看下面的例子:constwm=ne......
  • js WeakMap
    ECMAScript6新增的“弱映射”(WeakMap)是一种新的集合类型,为这门语言带来了增强的键/值对存储机制。WeakMap是Map的“兄弟”类型,其API也是Map的子集。WeakMap中的“weak”(弱),描述的是JavaScript垃圾回收程序对待“弱映射”中键的方式。6.5.1基本API可以使用new关......
  • js 选择Object还是Map
    键和值在迭代器遍历时是可以修改的,但映射内部的引用则无法修改。当然,这并不妨碍修改作为键或值的对象内部的属性,因为这样并不影响它们在映射实例中的身份:constm1=newMap([["key1","val1"]]);//作为键的字符串原始值是不能修改的for(letkeyofm1.keys()){......
  • js 顺序与迭代
    与Object类型的一个主要差异是,Map实例会维护键值对的插入顺序,因此可以根据插入顺序执行迭代操作。映射实例可以提供一个迭代器(Iterator),能以插入顺序生成[key,value]形式的数组。可以通过entries()方法(或者Symbol.iterator属性,它引用entries())取得这个迭代器:constm......
  • Js中的闭包
    Js中的闭包APR 11TH, 2017 5:11PM闭包的概念Wikipedia:Inprogramminglanguages,closures(alsolexicalclosuresorfunctionclosures)areatechniqueforimplementinglexicallyscopednamebindinginlanguageswithfirst-classfunctions.译文:”在编程语言......
  • js 获取 url 中的参数
    方法一: functiongetParam(name){varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)");varr=window.location.search.substr(1).match(reg);if(r!=null)returnunescape(r[2]);returnnull;}//例如网址是 ht......
  • 在nodejs环境使用promise函数
     如果单纯的使用promise,对环境比较简单,只需要一个js文件即可。//constp1=newPromise((resolve,reject)=>{//setTimeout(()=>{//resolve('resolve')//},1000)//})//constp2=newPromise((resolve,reject)=>{//setTimeout(()......
  • JS时间格式化方案汇总
    目前JS实现时间格式化有很多种方案,但具体采用哪一种需要看项目需求以及对应的技术栈。下面汇总常见的方式:Date对象APIDate对象是JavaScript处理日期和时间的基本工具。它提供了一系列方法来获取和设置日期时间的各个部分,以及进行日期和时间的计算。//*******************......
  • js delete()和 clear()函数
    constm=newMap();constfunctionKey=function(){};constsymbolKey=Symbol();constobjectKey=newObject();m.set(functionKey,"functionValue");m.set(symbolKey,"symbolValue");m.set(objectKey,"ob......
  • js Map 基本API
    使用new关键字和Map构造函数可以创建一个空映射:constm=newMap();如果想在创建的同时初始化实例,可以给Map构造函数传入一个可迭代对象,需要包含键/值对数组。可迭代对象中的每个键/值对都会按照迭代顺序插入到新映射实例中://使用嵌套数组初始化映射constm1=newM......