使用defineProperty实现自定义setter, 简化前端Angular的重构工作

一、问题场景

Angular的双向绑定给我们开发提供了很大的遍历，将父scope的引用变量作为参数传递给子指令，这样就可以方便的在父作用域内进行业务操作，数据变更会自动传递到子指令。但是如果你基于一个已有的复杂业务模块进行扩展开发，同时要将耦合其中一个功能提取为指令，这个时候就涉及到参数的传递问题。最简的方式就是直接将已有的根数据对象作为参数直接传递过去，参数携带数据大而全，指令内部肯定数据够用不会报错，但是缺点就是参数结构复杂，使用者无法准确的连接所需参数，极大地降低了指令的可用性；

二、问题分析

新开发的指令一般都是只传递需要的参数，一般结构形式比较简单，直接在原有的复杂结构中找到对应的字段直接赋值到新的参数即可；但是这里会涉及到一些非引用类型的字段，会给Angular的双向绑定带来问题；这就需要两者之间进行数据的同步更新，最简单的方式就是找到原来数据变更的地方，然后给指令的参数进行赋值即可，但是这种方式不仅繁琐容易出错，而且给以后的开发维护带来不便。

那么有没有更好的方式来解决这个问题呢，从代码的重构实践来说，最好将数据的变更封装在一个方法中，方便对数据字段的访问控制，那么js是否提供有相关的机制来实现字段的自定义settor和getter呢？

三、js的属性描述符

从ES5开始，所有的属性都具备了属性描述符。我们可以通过getOwnPropertyDescriptor获取属性的描述符信息，这个普通的对象属性对应的属性描述符可不仅仅只是一个字符串。它还包含另外三个特性：writable（可写）、enumerable（可枚举）和configurable（可配置）。

  var myObj ={
      name:'mango'
  };

  descriptor = Object.getOwnPropertyDescriptor(myObj,'name');
  console.log(descriptor);

  // {
  //     "value": "mango",
  //     "writable": true,
  //     "enumerable": true,
  //     "configurable": true
  // }

在创建普通属性时属性描述符会使用默认值，我们也可以使用Object.defineProperty(..)来添加一个新属性或者修改一个已有属性（如果它是configurable）并对特性进行设置。我们使用defineProperty(..)给myOb添加了一个普通的属性并显式指定了一些特性。然而，一般来说我们不会使用这种方式，除非想修改属性描述符。

var myObj = {};
Object.defineProperty(myObj, 'name', {
    value: 'apple',
    writable: true,
    configurable: true,
    enumerable: true
});

//apple

writable决定是否可以修改属性的值。

var myObj = {};
Object.defineProperty(myObj, 'name', {
    value: 'apple',
    writable: false,
    configurable: true,
    enumerable: true
});

myObj.name='pear'
console.log(myObj.name)

//apple

可以看到，我们对于属性值的修改静默失败（silently failed）了。如果在严格模式下，这种方法会出错,TypeError错误表示我们无法修改一个不可写的属性。

'use strict'

var myObj = {};
Object.defineProperty(myObj, 'name', {
    value: 'apple',
    writable: false,
    configurable: true,
    enumerable: true
});

myObj.name='pear'
console.log(myObj.name)

// Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'

通过configurable可以控制是否可以修改属性描述符，同时会限制不能删除属性；

enumerable控制这个属性是否会出现在对象的属性枚举中，比如说for..in循环。如果把enumerable设置成false，这个属性就不会出现在枚举中，虽然仍然可以正常访问它。相对地，设置成true就会让它出现在枚举中。

在ES5中可以使用getter和setter部分改写默认操作，但是只能应用在单个属性上，无法应用在整个对象上。getter是一个隐藏函数，会在获取属性值时调用。setter也是一个隐藏函数，会在设置属性值时调用。当你给一个属性定义getter、setter或者两者都有时，这个属性会被定义为“访问描述符”（和“数据描述符”相对）。对于访问描述符来说，JavaScript会忽略它们的value和writable特性，取而代之的是关心set和get（还有configurable和enumerable）特性。

var myObj = {
    _no:0,
    get no(){
        return this._no;
    },
    set no(val){
        this._no = val;
    }
}

Object.defineProperty(myObj, 'name', {
    get:function(){
        return 'mango' + this.no;
    }
});

console.log(myObj.no);
console.log(myObj.name)

myObj.no = 3
console.log(myObj.name)

// 0
// mango0
// mango3

四、解决方案

通过了解js提供的属性描述符机制，我们可以通过defineProperty来给需要同步的字段添加getter和setter访问控制器，实现方式如下

    function addPropertyControl(obj, property, syncObj, syncProperty) {
        syncProperty = syncProperty ? syncProperty : property;
        var dProperty = '_' + property;
        obj[dProperty] = obj[property];
        Object.defineProperty(obj, property, {
            get: function () {
                return obj[dProperty];
            },
            set: function (value) {
                syncObj[syncProperty] = value;
                obj[dProperty] = value;
            }
        });
    }

    function autoSyncDataModel() {
        var sObj = $scope.dataModel;
        var syncObj = $scope.option;
        addPropertyControl(sObj, 'name', syncObj);
        addPropertyControl(sObj, 'parents', syncObj);
        addPropertyControl(sObj, 'age', syncObj);
        addPropertyControl(sObj, 'isMan', syncObj);
    }

原文地址