【观察者Observer模式及其应用】
一、任务:小程序中没有监听属性,如何让小程序支持监听属性。
衡量模块独立性:
内聚性:模块内部变量之间的关系是否紧密。
耦合性:模块之间的关系是否紧密。
要想做到模块独立性好,就必须做到“高内聚,低耦合”。
二、代码:
//app.js为整个项目设置监听属性,让每一个页面的js文件都能使用watch:{}结构
setWatcher(data,watch){
// data - 各个页面的数据区
// watch - 各个页面的watch对象
Object.keys(watch).forEach(key=>{
this.observer(data,key,watch[key]);
})
},
//观察者
observer(data,key,fn){
let val=data[key];
Object.defineProperty(data,key,{
enumerable:true,
configurable:true,
get(){
return val;
},
set(newValue){
if(newValue==val) return;
fn(newValue,val);
val=newValue;
}
})
}
// 任意小程序页面的js文件中:
let that;
Page({
data:{ //数据区 },
watch:{ //监听区 },
onLoad(){
that=this;
getApp().setWatcher(this.data,this.watch);
}
})