設(shè)計原則

代理與本體接口一致性

• 用戶可以放心地使用代理，只需要關(guān)心能否得到想要的結(jié)果
• 在任何使用本體的地方都可以替換成使用代理
• 單一職責(zé) 與 開放-封閉原則

單一職責(zé)原則指的是，就一個類（通常也包括對象和函數(shù)等）而言，應(yīng)該僅有一個引起它變化的原因。如果一個對象承擔(dān)了多項職責(zé)，就意味著這個對象將變得巨大，引起它變化的原因可能會有多個。面向?qū)ο笤O(shè)計鼓勵將行為分布到細粒度的對象之中，如果一個對象承擔(dān)的職責(zé)過多，等于把這些職責(zé)耦合到了一起，這種耦合會導(dǎo)致脆弱和低內(nèi)聚的設(shè)計。[1]

new Proxy模擬實現(xiàn)Prop-types

API設(shè)計

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

實現(xiàn)

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('不是數(shù)字類型')
            }
        },
    }

Reference

• [1] JavaScript設(shè)計模式與開發(fā)實踐[M] p.93
• [2] new Proxy 數(shù)據(jù)驗證