PHP设计模式之JS实现观察者模式 c 观察者模式 android 观察者模式 ios 观察者模

观察者模式 Observer

实现目标：变换select框来变动内容区和广告区
一般思路
1:判断选中的值
2:顺序下来,根据值,修改内容区域
3:再修改广告区域.

if(v == '男') {
   内容区背景变灰
   广告区内容变成男人话题
}elseif(v == '女'){
   内容区背景变粉
   广告区内容变成女人话题
}

那么问题有哪些：
1:让你选择时引起3个区域的变化,是否要修改if/elseif部分
2:如果选择女性样式,但不要变粉,现在流行变紫色,是否又要修改if elseif部分?
问题在于: 控制逻辑与被操作对象耦合严重.

这是就需要观察者模式
js实现观察者模式

我们让div对象观察select的变化,select变化,就会通知到这两个对象。并引起这2个对象的变化,实现观察者模式。

下边是解决效果
select对象负责attach,detach,notifyObservers,与具体的对象变化解耦。
1.index.html

body>