sunshine
管理员
管理员
  • 最后登录2023-10-30
  • 发帖数170
  • 社区居民
阅读:5423回复:0

MVVM实现(使用object.defineproperty)

楼主#
更多 发布于:2019-05-23 07:15
/*
写一个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
游客


返回顶部

公众号

公众号