垂直门户网站的盈利模式探讨,深圳网站优化企业,wordpress免费 360插件下载地址,提高网站访问速度1、如何追踪变化 数组的侦测方式和对象不同#xff0c;比如#xff1a; this.list.push(1) 此时并不会像改变对象一样触发setter。 同理#xff0c;要侦测数组的变化意味着我们在改变数组的时候得到通知#xff0c;如图#xff0c;我们可以用一个拦截器覆盖Array.prototyp… 1、如何追踪变化 数组的侦测方式和对象不同比如 this.list.push(1) 此时并不会像改变对象一样触发setter。 同理要侦测数组的变化意味着我们在改变数组的时候得到通知如图我们可以用一个拦截器覆盖Array.prototype,每当使用array原型方法时实际 执行的是拦截器中的方法而拦截器中的方法储存原生方法实现。 2、实现拦截器 拦截器其实是一个和Array.prototype一样的object只不过这个object中某些可以改变数组自身内容的方法是处理过的。 改变数组内容的方法一共有七个pushpopshift, unshiftj, slice, sort 和reverse const arrayProto Array.prototype
const arrayMethods Object.create(arrayProto)
const methods [pop, push, shift, unshift, splice, sort, reverse]
methods.forEach(function (method) {// 缓存原始方法const original arrayProto[method]Object.defineProperty(arrayMethods, method, {value: function mutator (...args) {return original.apply(this, args)},enumerable: false,writable: true,configurable: true,})
}) 上面代码中arrayMethods继承自Array.prototype具备其所有功能。当使用push方法时调用的是arrayMethods.push即mutator函数这里可以做一些发送通知 变化之类的事情。 3、使用拦截器覆盖Array原型 有了拦截器就需要让它覆盖Array.prototype但又不能直接覆盖因为会污染全局变量Array我们希望只是拦截那些被侦测了变化的数据生效。 这时就需要借助Observer class Observer {constructor (value) {this.value value}if (Array.isArray(value)) {value.__proto__ arrayMethods} else {this.walk(value)}
} 它的作用是将拦截器加工后具备拦截功能的arrayMethods赋值给value.__proto__通过__proto__巧妙的实现覆盖value原型功能。 __proto__其实是Object.getPrototypeOf和Object.setPrototypeOf的早期实现所以使用es6的Object.setPrototypeOf来代替__ptoto__可以实现同样的效果。 4、将拦截器方法挂载到数组属性上 虽然绝大多数浏览器都支持这个非标准的属性来访问原型但并不是所有浏览器都支持因此需要处理不能使用__proto__的情况。 vue的做法是对于不能使用__proto__的直接将arrayMethods身上的这些方法设置到被侦测的数组上。 export class Object {if (Array.isArray(value)) {const augment hasProto ? protoAugment : copyAugmentaugment(value, arrayMethods, arrayKeys)} else {this.walk(value)}
}function protoAugment (target, src, keys) {target.__proto__ src
}function copyAugment (target, src, keys) {for (let i0, len keys.lenght;i 1; i) {const key keys[i]default(target, key, src[key])}
} 在上面代码中新增了hasProto来判断当前浏览器是否支持__proto__,如果支持则使用protoAugment覆盖原型否则用copyAugment将拦截器中的方法挂载到value。 copyAugment函数用来将已经加工了拦截操作的原型方法直接添加到value的属性中。 转载于:https://www.cnblogs.com/pjl43/p/10666448.html
