接上篇Vue2.x 对象劫持,继续来写数组劫持
实现原理:
1 重新定义原生数组方法push unshift shift pop splice sort reverse 因为这些方法可以修改原数组。
2 拿到原生数组方法 Object.create(Array.prototype)
3 AOP拦截,再执行重写数组方法前,先执行原生数组方法
核心监听Observer代码
// 把data中的数据 都使用Object.defineProperty重新定义 es5 // Object.defineProperty 不能兼容ie8 及以下 vue2 无法兼容ie8版本 import {arrayMethods} from './array.js' import { isObject,def } from '../util/index' // 后续我可以知道它是不是一个已经观察了的数据 __ob__ class Observer{ constructor(value){ // 仅仅是初始化的操作 // vue如果数据的层次过多 需要递归的去解析对象中的属性,依次增加set和get方法 // value.__ob__ = this; // 我给每一个监控过的对象都增加一个__ob__属性 def(value,'__ob__',this); if(Array.isArray(value)){ // 如果是数组的话并不会对索引进行观测 因为会导致性能问题 // 前端开发中很少很少 去操作索引 push shift unshift value.__proto__ = arrayMethods; // 如果数组里放的是对象我再监控 this.observerArray(value); }else{ // 对数组监控 this.walk(value); // 对对象进行观测 } } observerArray(value){ // [{}] for(let i = 0; i < value.length;i++){ observe(value[i]); } } walk(data){ let keys = Object.keys(data); // [name,age,address] // 如果这个data 不可配置 直接reurn keys.forEach((key)=>{ defineReactive(data,key,data[key]); }); } } function defineReactive(data,key,value){ observe(value); // 递归实现深度检测 Object.defineProperty(data,key,{ configurable:true, enumerable:false, get(){ // 获取值的时候做一些操作 return value; }, set(newValue){ // 也可以做一些操作 console.log('更新数据') if(newValue === value) return; observe(newValue); // 继续劫持用户设置的值,因为有可能用户设置的值是一个对象 value = newValue; } }); } export function observe(data) { let isObj = isObject(data); if (!isObj) { return } return new Observer(data); // 用来观测数据 }
重写原生数组方法
// 我要重写数组的那些方法 7个 push shift unshift pop reverse sort splice 会导致数组本身发生变化 // slice() let oldArrayMethods = Array.prototype; // value.__proto__ = arrayMethods 原型链查找的问题, 会向上查找,先查找我重写的,重写的没有会继续向上查找 // arrayMethods.__proto__ = oldArrayMethods export const arrayMethods = Object.create(oldArrayMethods); const methods = [ 'push', 'shift', 'unshift', 'pop', 'sort', 'splice', 'reverse' ] methods.forEach(method=>{ arrayMethods[method] = function (...args) { const result = oldArrayMethods[method].apply(this,args); // 调用原生的数组方法 // push unshift 添加的元素可能还是一个对象 let inserted; // 当前用户插入的元素 let ob = this.__ob__; switch (method) { case 'push': case 'unshift': inserted = args; break; case 'splice': // 3个 新增的属性 splice 有删除 新增的的功能 arr.splice(0,1,{name:1}) inserted = args.slice(2) default: break; } if(inserted) ob.observerArray(inserted); // 将新增属性继续观测 return result; } })
工具方法定义如下:
/** * * @param {*} data 当前数据是不是对象 */ export function isObject(data) { return typeof data === 'object' && data !== null; } export function def(data,key,value){ Object.defineProperty(data,key,{ enumerable:false, configurable:false, value }) }
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月20日
2024年11月20日
- 刘紫玲2024《清平调》[低速原抓WAV+CUE]
- 伍佰1998《世界第一等》98绝版收藏EP[WAV+CUE]
- 天乐试机天碟 《终极参考SACD》十大发烧唱片之一[WAV分轨]
- 群星《新说唱2024 第12期 (下)》[320K/MP3][95.27MB]
- 楼兰2024-《楼兰传奇》[低速原抓WAV+CUE]
- 楼兰《楼兰传奇2》2024[低速原抓WAV+CUE]
- 陈果《有了你》UPM24K金碟[日本限量版][WAV+CUE]
- 群星《新说唱2024 第12期 (下)》[FLAC/分轨][506.43MB]
- 李常超 (Lao乾妈)《天生江湖》[320K/MP3][168.84MB]
- 李常超 (Lao乾妈)《天生江湖》[FLAC/分轨][633.83MB]
- 群星《雨果发烧碟二十》UPMAGCD2024[WAV+CUE]
- 刘德丽《赤的疑惑》限量1:1黄金母盘直刻[低速原抓WAV+CUE]
- 柏菲·珞叔作品集《金色大厅2》限量开盘母带ORMCD[低速原抓WAV+CUE]
- Gareth.T《sad songs(Explicit)》[320K/MP3][29.03MB]
- Gareth.T《sad songs(Explicit)》[FLAC/分轨][152.85MB]