Proxy 中 有指定方法
例如:
get() // 方法用于拦截对象的读取属性操作。
set() // 方法用于 拦截对象 设置属性操作
has() // 方法是针对in操作符的代理方法。
apply() // 方法用于拦截函数的调用
construct() // 方法用于拦截 new 操作符,为可使new操作符在生成的Proxy对象上生效,用于初始化代理的目标对象自身必须具有【Construct】内部方法(即 new target 必须是有效的)。
defineProperty() // 用于拦截对对象的object.defineProperty()操作;
deleteProperty() // 方法用于拦截对对象属性的delete操作。
handler.getOwnPropertyDrscriptor() // 方法是Object.getOwnPropertyDescriptor()的钩子。
handler.getPrototypeOf() // 是一个代理方法,当读取代理对象的原型时,该方法就会被调用。
handler.isExtensible() // 用于拦截对对象的Object.isExtensible()。
小栗子:
const DOM = new Proxy({}, {
get (target, name) {
// target 代表传入的 Object
// name Object 的 key
return function (json, ...children) {
const el = document.createElement(name)
// 元素添加属性
for (let key of Object.keys(json)) {
el.setAttribute(key, json[key])
}
// 添加子元素
for (let child of children) {
if (Object.prototype.toString.call(child) === '[object String]') {
child = document.createTextNode(child)
}
el.appendChild(child)
}
return el
}
},
del (target, name) {}
})
// 传入要创建的dom 以及属性
let odiv = DOM.div({id: 'div1', class:'aaa'},'第一个div', 'nihao',
DOM.span({ onclick: 'name(this)'}, '我是span'),
DOM.a({href: 'http://www.baidu.com', target: '_blank'}, '这是链接')
)
// 页面加载完成之后 添加DOM
window.onload = () => {
document.body.appendChild(odiv)
}