ES6代理Proxy----笔记整理

最新推荐文章于 2021-10-20 08:50:47 发布

HongfeiAn

最新推荐文章于 2021-10-20 08:50:47 发布

阅读量187

点赞数 1

分类专栏： ES6 前端

本文链接：https://blog.csdn.net/qq_41601327/article/details/105800927

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

ES6

3 篇文章 0 订阅

订阅专栏

代理 Proxy

Proxy这个词相信你已经听过无数遍了

语法

let p = new Proxy(target, handler);

target：一个目标对象(可以是任何类型的对象，包括本机数组，函数，甚至另一个代理)用Proxy来包装。 handler：一个对象，其属性是当执行一个操作时定义代理的行为的函数。

代理的使用

基础demo: Proxy的demo有很多，我们只分析基础demo，主要看new Proxy({}, handler)的操作，指定目标obj对象，然后handler对象执行get()操作，get()返回值的判断是，如果name是target目标对象的属性，则返回target[name]的值，否则返回37，最后测试的时候，p.a是对象p的key，所以返回a的value，而p.b不存在，返回37。

  const obj = {
      a: 10
    }
    let handler = {
        get: function(target, name){
            console.log('test: ', target, name)
            // test:  {"a":10} a
            // test:  {"a":10} b
            return name in target ? target[name] : 37
        }
    }
    let p = new Proxy(obj, handler)
    console.log(p.a, p.b) // 10 37

这个例子的作用是拦截目标对象obj，当执行obj的读写操作时，进入handler函数进行判断，如果读取的key不存在，则返回默认值。

demo 1
使用代理对年龄进行管理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var user={
				name:"小明",
				age:16
			}
			//设置代理对象
			var pUser=new Proxy(user,{
				//代理获取属性事件
				get(target,attr){
					console.log(target)
					console.log(attr)
					return target[attr]
				},
				set(target,attr,value){
					// console.log(target)
					// console.log(attr)
					// console.log(value)
					if(value>=0&&value<150){
					target[attr]=value;
					}else{
						console.warn("年龄限制（0-150）")
					}
				}
			})
			var age=pUser.age;
		</script>
	</body>
</html>

在这里插入图片描述
demo 2

使用代理简单封装标签
代理应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			let DOM = new Proxy({}, {
				get(target, attr) {
					console.log(attr)
					var DomObj = document.createElement(attr)
					return function(attrs, ...children) {
						console.log(attrs)
						console.log(children)
						for (key in attrs) {
							DomObj.setAttribute(key, attrs[key])
						}
						for (let i = 0; i < children.length; i++) {
							if (typeof children[i] == 'string') {
								// var textNode = document.createTextNode(children[i])
								children[i]=document.createTextNode((children[i]))
							}
							// DomObj.appendChild(textNode)
							DomObj.appendChild(children[i])
						}
						return DomObj;
					}
				},
				set() {

				}
			})
			var d1= DOM.div({id:"d1","class":"redBg"},"hellowworld","你好")
			document.body.appendChild(d1)
			var ul=DOM.ul(
			{id:"liebiao",'class':"redBg"},
			DOM.li({"class":'li'},'内容列表1'),
			DOM.li({"class":'li'},'内容列表2'),
			DOM.li({"class":'li'},'内容列表3'),
			DOM.li({"class":'li'},'内容列表4'),
			DOM.li({"class":'li'},'内容列表5'),
			DOM.li({"class":'li'},'内容列表6'),
			)
			document.body.appendChild(ul)
		</script>
	</body>
</html>

在这里插入图片描述

课程地址

很不错的，很不错的讲课内容，全是干货

HongfeiAn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6代理Proxy----笔记整理

代理 ProxyProxy这个词相信你已经听过无数遍了语法let p = new Proxy(target, handler);target：一个目标对象(可以是任何类型的对象，包括本机数组，函数，甚至另一个代理)用Proxy来包装。 handler：一个对象，其属性是当执行一个操作时定义代理的行为的函数。代理的使用基础demo: Proxy的demo有很多，我们只分析基础demo...
复制链接

扫一扫