赞
踩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 这个是基于我们ES6的新语法,window.Proxy对象实现的 // 通过Proxy创建的代理对象 // 目标对象 let user = { name : "Jack" }; // 通过Proxy生成代理对象 let userProxy = new Proxy(user,{ // 主要是通过这些配置项实现响应式的 // 当你读取的时候get执行 get(target,propertyName){ // target代表目标对象,propertyName代表目标上的某个属性 console.log(target); console.log(propertyName); console.log(typeof propertyName); return target[propertyName]; }, // 当你修改某属性或新增某个属性的时候执行 set(target,propertyName,value){ // target代表目标对象,propertyName代表目标上的某个属性 target[propertyName] = value; }, // 当你删除某个属性的时候 deleteProperty(target,propertyName){ // target代表目标对象,propertyName代表目标上的某个属性 // 必须要返回,不返回默认返回值就变成undefined了(false) return delete target[propertyName]; } }); // 代理模式的原理:通过代理对象完成目标对象的任务,同时还可以顺带新增一些程序 </script> </body> </html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 这个是基于我们ES6的新语法,window.Proxy对象实现的
// 通过Proxy创建的代理对象
// 目标对象
let user = {
name : "Jack"
};
// 通过Proxy生成代理对象
let userProxy = new Proxy(user,{
// 主要是通过这些配置项实现响应式的
// 当你读取的时候get执行
get(target,propertyName){
// target代表目标对象,propertyName代表目标上的某个属性
console.log(target);
console.log(propertyName);
console.log(typeof propertyName);
return target[propertyName];
},
// 当你修改某属性或新增某个属性的时候执行
set(target,propertyName,value){
// target代表目标对象,propertyName代表目标上的某个属性
target[propertyName] = value;
},
// 当你删除某个属性的时候
deleteProperty(target,propertyName){
// target代表目标对象,propertyName代表目标上的某个属性
// 必须要返回,不返回默认返回值就变成undefined了(false)
return delete target[propertyName];
}
});
// 代理模式的原理:通过代理对象完成目标对象的任务,同时还可以顺带新增一些程序
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 创建一个user1对象 let user1 = { name : "Jack" }; // 创建一个user2对象 let user2 = {}; // 给user2扩展一个name属性 Object.defineProperty(user2,"name",{ // 数据代理 get(){ console.log("get方法执行了") return user1.name; }, // 数据劫持 set(value){ // 改数据 user1.name = value; console.log("页面更新了"); } }); // 成也萧何败也萧何 // 这个会导致我们的属性新增或删除没有响应式处理 </script> </body> </html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建一个user1对象
let user1 = {
name : "Jack"
};
// 创建一个user2对象
let user2 = {};
// 给user2扩展一个name属性
Object.defineProperty(user2,"name",{
// 数据代理
get(){
console.log("get方法执行了")
return user1.name;
},
// 数据劫持
set(value){
// 改数据
user1.name = value;
console.log("页面更新了");
}
});
// 成也萧何败也萧何
// 这个会导致我们的属性新增或删除没有响应式处理
</script>
</body>
</html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。