|
阅读：5423回复：0
MVVM实现（使用object.defineproperty）
/*
写一个MVVM框架,需要了解 ================================================== 1.object.defineproperty()方法. object.defineproperty(添加在的对象名称,'添加的属性名',{属性的描述}) 2.发布订阅模式 下方只涉及到object.defineproperty,设计模式的发布订阅模式下次再说 */ var obj = { name: '李老板', age: 15 } // 对象的打点调用方式 let getName = obj.name console.log("get.name：" + getName) // 对象可以用中括号调用 let getAge = obj['age'] console.log("get[age]：" + getAge) // object defineproperty Object.defineProperty(obj, 'sex', { value: '男孩子', }) console.log(obj.sex) // 默认是禁止删除，因为configurable默认为false console.log('默认configurable为：' + delete obj.sex + '不可以删除object.defineproperty添加的属性和值') // 添加一个改为false Object.defineProperty(obj, 'class', { value: '2000', configurable: true }) // 打印一下添加的class属性和configurable为true时 console.log("defineproperty添加的class值为：" + obj.class) console.log('configurable为：' + delete obj.class + '可以删除object.defineproperty添加的属性和值') /* 1.enumerable 同上还有 enumerable 表示是否可以遍历，默认是false == 不可遍历。本生基础的对象时可以采用for in 进行遍历的嘛，但是采用object.difineproperty创建的属性和值默认是不可以遍历的 设置为true便可以进行遍历了 2.writable writable表示是否可以改写，默认是false 当为true时才能进行修改和上两个用法相同 ================================================== 3.value 和 writable 叫数据描述符, value 是添加的属性对应的值,可以是 任何有效的JavaScript值(数组/对象/字符串/数字...),默认是undefined. writable 是设置属性的值是否可以修改,默认是false 不可以 configurable 和 writable,是一个表示是否可以删除,一个是否可以修改 */ /* vue应用到的两个属性 set 和get ===================================================== 1.get 和 set 叫存取描述符 get 给属性提供getter的方法,如果getter没有则为undefined.返回的值被作为属性的值.默认undefined. set 给属性提供setter的方法,如果getter没有则为undefined. 将接受唯一参数，并将该参数的新值分配给该属性.默认为 undefined。 get 和 set对应的是两个函数, 有什么用呢?看下方 */ var obj_02 = {}; var age_02; Object.defineProperty(obj_02, 'age_02', { get: function () { console.log('get age_02 get test...') return age_02 }, set: function (value) { console.log('set age_02 set test...') age_02 = value } }) // 当我调用obj_02的age_02属性的时候,他回去执行get的这个函数把值返回回来给全局的那个age_02. console.log(obj_02.age_02) // undefined // 当我去设置age_02的时候,他会去调用set,并把设置这个值10传进去,然后全局的age_02等于这个值. obj_02.age_02 = 10; // 现在这样写,这里就会先去调用set把值设置为10,然后打印时再次调用get就会打印10 obj_02.age_02 = 10; console.log(obj_02.age_02) /* 存储运算符和数据描述符不能同时存在 =================================== 下方会报错 var obj_02 = {}; var age_02; Object.defineProperty(obj_02, 'age_02', { value:20, get: function () { console.log('get age_02 get test...') return age_02 }, set: function (value) { console.log('set age_02 set test...') age_02 = value } }) */ /* 最后 ========================================== 利用set和get的这个就可以做一些数据的劫持,vue框架就利用了这个特点! 再加上发布订阅模式,订阅数据的改变您就可以做一个简单的mvvm的小框架了 个人编辑器设置 编辑器:vs code 字体:Source Code Pro 字体大小:16px 字体行高:26px 作者:李子烨 时间:2019年05月22日 23:09 |
|
公众号
