設(shè)計原則
代理與本體接口一致性
- 用戶可以放心地使用代理，只需要關(guān)心能否得到想要的結(jié)果
- 在任何使用本體的地方都可以替換成使用代理
- 單一職責(zé) 與 開放-封閉原則
單一職責(zé)原則指的是，就一個類（通常也包括對象和函數(shù)等）而言，應(yīng)該僅有一個引起它變化的原因。如果一個對象承擔(dān)了多項職責(zé)，就意味著這個對象將變得巨大，引起它變化的原因可能會有多個。面向?qū)ο笤O(shè)計鼓勵將行為分布到細(xì)粒度的對象之中，如果一個對象承擔(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ù)驗證
