*** 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不存在，则返回默认值。

<mark>demo 1</mark>
使用***对年龄进行管理

<!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>


<mark>demo 2</mark>

使用***简单封装标签
***应用

<!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>

课程地址

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