2024-04-19 深入JavaScript高级语法七——响应式原理实现

最新推荐文章于 2024-06-21 16:41:46 发布
最新推荐文章于 2024-06-21 16:41:46 发布
阅读量269 收藏 7
点赞数 5
分类专栏： js学习 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41068717/article/details/137955645
版权

目录

1、一个简单的响应式函数的封装

// 只针对name的变化做了封装
let reactiveFns = []
// 封装一个响应式的函数
function watchFn(fn) {
  reactiveFns.push(fn)
}

// 对象的响应式
const obj = {
  name: "张三",
  age: 12
}

watchFn(function() {
  const newName = obj.name
  console.log('hello world')
  console.log(obj.name)
})

watchFn(function() {
  console.log(obj.name, "-----")
})

function bar() {
  console.log("普通的其他函数，这个函数不需要有任何响应")
}

// 对象的某个属性发生了变化，使用了该对象的方法自动重新执行
obj.name = "李四"
reactiveFns.forEach(fn => {
  fn()
})
// console.log打印值
// "hello world"
// "李四"
// "李四 -----"

2、依赖收集类的封装

实际开发中，需要响应的对象是有很多的，每个对象也有很多属性，不可能每个对象及每个对象的属性都通过一个数组分别收集，所以引出了类的封装。

class Depend {
  constructor() {
    this.reactiveFns = []
  }
  addDepend(reactiveFn) {
    this.reactiveFns.push(reactiveFn)
  }
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

// 封装一个响应式的函数
const depend = new Depend()
function watchFn(fn) {
  depend.addDepend(fn)
}

// 对象的响应式
const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}

watchFn(function() {
  const newName = obj.name
  console.log('hello world')
  console.log(obj.name)
})

watchFn(function() {
  console.log(obj.name, "-----")
})

obj.name = "李四"
// 手动监听变化
depend.notify()

3、自动监听对象变化(暂未区分具体的属性变化)

class Depend {
  constructor() {
    this.reactiveFns = []
  }
  addDepend(reactiveFn) {
    this.reactiveFns.push(reactiveFn)
  }
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

// 封装一个响应式的函数
const depend = new Depend()
function watchFn(fn) {
  depend.addDepend(fn)
}

// 对象的响应式
const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj, {
  get: function(target,key,receiver) {
    return Reflect.get(target,key,receiver)
    
  },
  set: function(target,key,newValue,receiver) {
    Reflect.set(target,key,newValue,receiver)
    // 自动监听
    depend.notify()
  }
})


// 注意：原对象通过Proxy代理后，要想监听到对象变化，就不能使用原对象了，而要使用代理对象objProxy
watchFn(function() {
  const newName = objProxy.name
  console.log('hello world')
  console.log(objProxy.name)
})

watchFn(function() {
  console.log(objProxy.name, "-----")
})

objProxy.name = "李四"
objProxy.name = "王二"
// 就算是age发生变化，依赖name的方法也会重新执行
objProxy.age= 17

4、依赖收集的管理

原因：真实开发中，是有多个对象的，而且每个对象也会对应不同的属性。

注释：每个对象单独对应一个Map（是为了防止有不同对象存在相同属性的情况），再把不同对象的Map通过一个统一的WeakMap管理起来。
对象的依赖管理
伪代码：

const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}
const info= {
  name: "张三", // dep对象
  address: "四川省成都市",  // dep对象
}
const objMap = new Map()
objMap.set('name', 'nameDepend')
objMap.set('age', 'ageDepend')

const infoMap = new Map()
infoMap.set('address', 'addressDepend')
objMap.set('name', 'nameDepend')

const targetMap = new WeakMap()
targetMap.set(obj, objMap)
targetMap.set(info, infoMap)

// 获取obj.name的depend
const depend = targetMap.get(obj).get('name')
depend.notify()

封装一个获取depend的函数

// 封装一个获取depend的函数
const targetMap = new WeakMap()
function getDepend(target, key) {
  // 根据target对象获取map的过程
  let map = targetMap.get(target)
  if (!map) {
    targetMap.set(target, map)
  }
  
  // 根据key获取depend对象
  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }
  return depend
}
...
const objProxy = new Proxy(obj, {
  get: function(target,key,receiver) {
    return Reflect.get(target,key,receiver)
    
  },
  set: function(target,key,newValue,receiver) {
    Reflect.set(target,key,newValue,receiver)
    // 使用getDepend方法
    const depend = getDepend(target, key)
    depend.notify()
  }
})

5、正确的收集依赖

重点关注watchFn方法的变化和activeReactiveFn全局变量的作用，以及Proxy中的get方法

class Depend {
  constructor() {
    this.reactiveFns = []
  }
  addDepend(reactiveFn) {
    this.reactiveFns.push(reactiveFn)
  }
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

// 封装一个响应式的函数
// activeReactiveFn：一个全局中间变量，使得能够在Proxy的get方法中拿到需要响应的函数
let activeReactiveFn = null
function watchFn(fn) {
  activeReactiveFn = fn
  fn()
  activeReactiveFn = null
}

// 封装一个获取depend的函数
const targetMap = new WeakMap()
function getDepend(target, key) {
  // 根据target对象获取map的过程
  let map = targetMap.get(target)
  if (!map) {
    map = new Map()
    targetMap.set(target, map)
  }
  
  // 根据key获取depend对象
  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }
  return depend
}

// 对象的响应式
const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj, {
  get: function(target,key,receiver) {
  	// 收集对应的响应式函数
    // 1、根据target,key获取对应的depend
    const depend = getDepend(target, key)
    // 2、给depend对象中添加响应函数
    depend.addDepend(activeReactiveFn)
    return Reflect.get(target,key,receiver)
    
  },
  set: function(target,key,newValue,receiver) {
    Reflect.set(target,key,newValue,receiver)
    // 自动监听
    const depend = getDepend(target, key)
    depend.notify()
  }
})


// 注意：原对象通过Proxy代理后，要想监听到对象变化，就不能使用原对象了，而要使用代理对象objProxy
watchFn(function() {
  console.log("--第一个name函数开始--")
  const newName = objProxy.name
  console.log('hello world')
  console.log(objProxy.name)
  console.log("--第一个name函数结束--")
})

watchFn(function() {
  console.log("--第一个age函数开始--")
  console.log(objProxy.age)
  console.log("--第一个age函数结束--")
})

watchFn(function() {
  console.log(objProxy.name, "新函数")
  console.log(objProxy.age, "新函数")
})

console.log("----------------改变obj的name值----------------")
// objProxy.name = '王五'
objProxy.age = 20

6、对Depend类进行重构优化

Depend优化：

  1. depend方法
  2. 使用Set来报错依赖函数，而不是数组[]
// activeReactiveFn：一个中间变量，使得能够在Proxy的get方法中拿到需要响应的函数
let activeReactiveFn = null

class Depend {
  constructor() {
    // 优化2：通过Set结构收集需要响应的方法，防止同一个响应式函数被重复收集
    this.reactiveFns = new Set()
  }
  addDepend(reactiveFn) {
    this.reactiveFns.add(reactiveFn)
  }
  // 优化1：增加depend方法，使得在Proxy.get方法里面添加响应式函数时，不需要关心activeReactiveFn参数
  depend() {
    if (activeReactiveFn) {
      this.addDepend(activeReactiveFn)
    }
  }
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

// 封装一个响应式的函数
function watchFn(fn) {
  activeReactiveFn = fn
  fn()
  activeReactiveFn = null
}

// 封装一个获取depend的函数
const targetMap = new WeakMap()
function getDepend(target, key) {
  // 根据target对象获取map的过程
  let map = targetMap.get(target)
  if (!map) {
    map = new Map()
    targetMap.set(target, map)
  }
  
  // 根据key获取depend对象
  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }
  return depend
}

// 对象的响应式
const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj, {
  get: function(target,key,receiver) {
    // 根据target,key获取对应的depend
    const depend = getDepend(target, key)
    // 给depend对象中添加响应函数
    // depend.addDepend(activeReactiveFn)
    // 直接调用depend方法，不需要传递activeReactiveFn参数
    depend.depend()
    return Reflect.get(target,key,receiver)
    
  },
  set: function(target,key,newValue,receiver) {
    Reflect.set(target,key,newValue,receiver)
    // 自动监听
    const depend = getDepend(target, key)
    depend.notify()
  }
})


// 注意：原对象通过Proxy代理后，要想监听到对象变化，就不能使用原对象了，而要使用代理对象objProxy
watchFn(function() {
  console.log(objProxy.name,"------")
  console.log(objProxy.name,"++++++")
})

objProxy.name = "李四"

7、对象的响应式操作

7.1、vue3实现方式——Proxy

重点关注reactive方法的封装和使用

...
// 把传入的对象变成响应式对象
function reactive(obj) {
  return new Proxy(obj, {
    get: function(target,key,receiver) {
      // 根据target,key获取对应的depend
      const depend = getDepend(target, key)
      // 给depend对象中添加响应函数
      // depend.addDepend(activeReactiveFn)
      // 直接调用depend方法，不需要传递activeReactiveFn参数
      depend.depend()
      return Reflect.get(target,key,receiver)

    },
    set: function(target,key,newValue,receiver) {
      Reflect.set(target,key,newValue,receiver)
      // 自动监听
      const depend = getDepend(target, key)
      depend.notify()
    }
  })
}

// 对象的响应式
const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = reactive(obj)

// 注意：原对象通过Proxy代理后，要想监听到对象变化，就不能使用原对象了，而要使用代理对象objProxy
watchFn(function() {
  console.log(objProxy.name,"------")
  console.log(objProxy.name,"++++++")
})

objProxy.name = "李四"

const info = {
  address: "四川省成都市"
}

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const infoProxy = reactive(info)

// 注意：原对象通过Proxy代理后，要想监听到对象变化，就不能使用原对象了，而要使用代理对象objProxy
watchFn(function() {
  console.log(infoProxy.address,"------")
})

infoProxy.address = "广州市"

const foo = reactive({
  name: "foo"
})

watchFn(() => {
  console.log(foo.name)
})
foo.name = "bar"

7.2、vue2实现方式——Object.defineProperty

function reactive(obj) {
  Object.keys(obj).forEach(key => {
    let value = obj[key]
    Object.defineProperty(obj, key, {
      get: function() {
        const depend = getDepend(obj, key)
        depend.depend()
        return value
      },
      set: function(newValue) {
        value = newValue
        const depend = getDepend(obj, key)
        depend.notify()
      }
    })
  })
  return obj
}
长乐呀
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于HTML+CSS+JavaScript制作响应式个人博客模板源码( JavaScript期末大作业 )
HTML网页设计
08-07 878
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构......
Vue.js-深入响应式原理
01-27
现在是时候深入一下了！Vue最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样...
基于Web的个人网页响应式页面设计与实现 HTML+CSS+JavaScript（web前端网页制作课作业）
HTML网页设计
08-01 1157
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
全栈开发之路——前端篇（3）setup和响应式数据
m0_74475812的博客
05-02 1137
框架确定、ide设置与项目创建：介绍项目文件意义、组件结构与导入以及setup的引入。本文为该系列的第三篇，主要讲述Vue核心的setup语法，同时讲解再使用了setup后如何设置响应式数据。
vue3学习笔记(总)——ts+组合式API(setup语法糖)
小多的博客
01-18 6944
接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 。 也可以获取属性 的浅层作用形式。 1.4 triggerRef() 强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。强制更新注意： ref()和shallowRef()不能一块写，不然会影响shallowRef 造成视图更新 由于 ref底层调用了triggerRef()，所以会造成视图的强制更新 1.5 customRef() 创建一个自定义的 ref，显式声明对
2024前端JavaScript最全面面试题汇总
panerchao的博客
05-22 845
2024前端JavaScript最全面面试题汇总包括基础，高级，Ajax，ES6方面
【个人作品案例展示】壹膳健康小程序前端设计与实现-初稿
JAVA编码选手的博客
06-10 1140
摘　　要 随着生活水平的不断提高，人们越来越关注于饮食所带来的健康影响。健康饮食、营养均衡是身体保持健康的重要元素。如何高效的管理自己的健康饮食，如何准确的关注自己的个人健康，是每个人重点关注的话题。通过查阅资料显示，在此之前，很多人对于健康饮食概念模糊不清以及个人的健康概念不够明确，稍有不慎，就会对个人的健康带来不好的影响。基于上述原因，开发一套壹膳健康小程序就显得很有必要。 系统在设计上采用了当前较为流行的开发技术，后端主要运用了IDEA开发平台中的Java语言和Springboot框架，其中Sprin
vue的介绍-基本语法
qq_62898618的博客
09-18 3927
vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目。作者：尤雨溪。
小白JavaScript学习笔记----web APIs
weixin_51877011的博客
04-24 2001
DOM文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能**DOM作用:**开发网页内容特效和实现用户交互Web API阶段我们学习那两部分？DOMBOMDOM 是什么？有什么作用？DOM 是文档对象模型操作网页内容，可以开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected。
前端面试宝典总结3-JavaScript（1）
weixin_45511682的博客
06-03 1131
JavaScript知识点 #数据类型、#展开运算符、 #intanceof 操作符、 #undefined、 #typeof NaN 、 #isNaN 和 Number.isNaN 、 #Proxy 、 #对象与数组的解构、 #this对象、 #箭头函数、 #call() 和 apply() 、 #Promise、 #async/await
前端面试——JavaScript面经（持续更新）
weixin_43599321的博客
12-23 1286
本文记录为了面试而总结的JavaScript面经，其中包括JavaScript用哪些数据类型、它们有什么区别、判断数组的方式有哪些？、null和undefined有什么区别？等等
tree-sitter-[removed]树保姆的Javascript语法
04-28
tree-sitter-javascript JavaScript语法。 参考
JavaScript-study:JavaScript +基础知识（ES6语法，高级语法）
05-23
学习JavaScript 我学习了Web html和CSS的基础知识，但是我不了解js，因此我记得在一个科学项目中遇到了一些麻烦； 因此，我想通过做我所学的js来制作前端的基础知识。 通过学习这个node.js类，我们将学习js的语法...
Garuda-Javascript-Syntax:语法Garuda Javascript的屏幕截图
04-30
Javascript-语法屏幕截图由Carbon（ ）进行专辑1个Basic.png2鹰航Component.png3 Ajax.png4 Single Data.png5 Multiple Data.png6 Input Focus Value.png7 Button Event.png8预览Image.png9从URL.png加载图像10鼠标...
js-实现响应式节庆活动砸金蛋效果.rar
最新发布
06-23
js-实现响应式节庆活动砸金蛋效果.rar js-实现响应式节庆活动砸金蛋效果.rar js-实现响应式节庆活动砸金蛋效果.rar js-实现响应式节庆活动砸金蛋效果.rar js-实现响应式节庆活动砸金蛋效果.rar js-实现响应式节庆...
不出网上线CS的各种姿势（内网横向）
qq_64395221的博客
06-21 912
在内网环境中可以使用ipc $生成的SMB Beacon上传到目标主机执行，但是目标主机并不会直接上线的，需要我们自己用链接命令(link <ip>)去连接它。经常是拿下一台边缘机器，其有多块网卡，用于连接内外网，内网机器都不出网。因为连接的Beacons使用Windows命名管道进行通信，此流量封装在SMB协议中，所以SMB Beacon相对隐蔽，绕防火墙时可能发挥奇效。一样，建立pystinger连接之后，直接生成payload在业务主机执行，业务内网主机192.168.111.236即可成功上线。
Day43
m0_67496588的博客
06-20 1013
JSON，Ajax
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 496
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 236
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
在不使用库的情况下用原生javaScript语法实现HMAC-SHA256
05-26
HMAC-SHA256是一种基于哈希函数和密钥的消息认证码算法。在JavaScript中，可以使用Crypto API实现HMAC-SHA256。以下是一个示例代码： ```javascript function sha256(message) { // convert message to array buffer const msgBuffer = new TextEncoder().encode(message); // hash the message using SHA-256 return crypto.subtle.digest('SHA-256', msgBuffer); } async function hmacSha256(key, message) { // convert key and message to array buffers const keyBuffer = new TextEncoder().encode(key); const msgBuffer = new TextEncoder().encode(message); // import the key and generate the HMAC using SHA-256 const importedKey = await crypto.subtle.importKey('raw', keyBuffer, { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']); const hmac = await crypto.subtle.sign('HMAC', importedKey, msgBuffer); // convert HMAC to hex string return Array.from(new Uint8Array(hmac)).map(b => b.toString(16).padStart(2, '0')).join(''); } // example usage const key = 'secret'; const message = 'hello world'; hmacSha256(key, message).then(console.log); ``` 在上面的代码中，`sha256()`函数使用Crypto API中的`crypto.subtle.digest()`方法实现SHA-256哈希函数。`hmacSha256()`函数首先将密钥和消息转换为数组缓冲区，然后使用`crypto.subtle.importKey()`方法导入密钥并生成HMAC。最后，使用`Array.from()`方法将HMAC转换为16进制字符串。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值