最后
喜欢的话别忘了关注、点赞哦~
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
})
- 这样便可以知道name属性的变化,读取和操作都能监听到
-
name 属性我们可以监测到变化与读取,但是age属性是不行的
-
数据虽有变化,但是没法捕获,这显然是不对的,(就好像我娶了几个漂亮老婆,不发朋友圈让大家知道,炫耀一番,心里总是不舒服的)
observer.js 实现
-
为了让obj里的每一个数据都变得可观测,我们可以写一个专门负责侦听的类,代码如下:
-
注释也写的明明白白的,别忘了给个三连(给大家拜年了🙏🙏🙏)
export class Observer {
// 初始化
constructor(value) {
this.value = value
if(Array.isArray(value)){
// 数组的逻辑
}else{
// 对象的逻辑
this.walk(value)
}
}
// 先考虑对象
// 具体的操作
walk(obj) {
const keys = Object.keys(obj) // []
for(let i = 0; i < keys.length; i++){
defineReactive(obj, keys[i])
}
}
}
// 让一个对象转化成可观测对象
function defineReactive(obj, key, val){
// 减少一个变量
if(arguments.length === 2){
val = obj[key] // 当前项的值 => 基本类型?引用类型
}
// 引用类型,递归深层对象
if(typeof val === “object”){
new Observer(val)
}
Object.defineProperty(obj, key, {
enumerable: true, // 可枚举
configurable: true, // 可删除
get() {
console.log(${key}属性被读取${val}
)
return val
},
set(newVal){
if(val === newVal){
return
}
console.log(${key}属性被修改了,值为${newVal}
)
val = newVal
}
})
}
- 代码如下:
如何让对象中的每一个属性都能够被观测?
- 效果在这里👇👇👇
css
1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解
js
1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
late、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
[外链图片转存中…(img-v1CNhjVj-1715163765987)]