JavaScript代理模式与new Proxy对象模拟实现prop-types值验证

设计原则

代理与本体接口一致性

• 用户可以放心地使用代理，只需要关心能否得到想要的结果
• 在任何使用本体的地方都可以替换成使用代理
• 单一职责 与 开放-封闭原则

单一职责原则指的是，就一个类（通常也包括对象和函数等）而言，应该仅有一个引起它变化的原因。如果一个对象承担了多项职责，就意味着这个对象将变得巨大，引起它变化的原因可能会有多个。面向对象设计鼓励将行为分布到细粒度的对象之中，如果一个对象承担的职责过多，等于把这些职责耦合到了一起，这种耦合会导致脆弱和低内聚的设计。[1]

new Proxy模拟实现Prop-types

API设计

PropTypes.checkPropTypes(obj:Object[, proptypes])

Usage

let obj = {}
//add type props
obj.propTypes = {
  name : PropTypes.string,
  age : PropTypes.number
}

//subscribe
obj = PropTypes.checkPropTypes(obj)
//or 
obj = PropTypes.checkPropTypes(obj, {
  name: PropTypes.string,
  age : PropTypes.number
})

obj.name = 24; //throw Error
console.log(obj.name)  //undefined

实现

PropTypes对象[2]

    export const PropTypes = {
        checkPropTypes: function(){
            let obj = arguments[0],
                _propTypes = arguments[1];
            return new Proxy(obj, {
                set(target,key,val,proxy){
                    let _target = _propTypes||target.propTypes;
                    if(new RegExp(_target[key]['reg']).test(val)){
                        return Reflect.set(target,key,val,proxy)
                    }
                    return _target[key]['error'].call(this)
                }
            })
        },
        string:{
            reg:/^[\u4e00-\u9fa5]*$/,
            error:function(){
                throw new Error('不是字符串类型')
            }
        },
        number:{
            reg:/^[0-9]*$/,
            error:function(){
                throw new Error('不是数字类型')
            }
        },
    }

Reference

• [1] JavaScript设计模式与开发实践[M] p.93
• [2] new Proxy 数据验证