阅读 48

观察者模式--设计模式之js运用

原文链接: blog.uproject.cn

1、观察者模式

当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知它的依赖对象。观察者模式属于行为型模式。

2、js实现

1)实现一个被观察主题


                                                

                                                    
/**

                                                    
 * 被观察者

                                                    
 * @constructor

                                                    
 */

                                                    
function Subject(){

                                                    
    this.observers = [];

                                                    
    this.state = 0;

                                                    
}

                                                    
Subject.prototype.setState=function(val){

                                                    
    this.state = val;

                                                    
    this.notifyAllObservers();

                                                    
}

                                                    
//添加观察者对象

                                                    
Subject.prototype.addObs=function(obj){

                                                    
    this.observers.push(obj);

                                                    
}

                                                    
//触发通知

                                                    
Subject.prototype.notifyAllObservers = function(){

                                                    
    for(var i in                                                        this.observers){

                                                    
        this.observers[i].update();

                                                    
    }

                                                    
}

                                                

                                            复制代码

2)实现几个观察者


                                                

                                                    
/**

                                                    
 * 观察者1

                                                    
 * @param subject

                                                    
 * @constructor

                                                    
 */

                                                    
function FirstObserver(subject){

                                                    
    this.subject = subject;

                                                    
    subject.addObs(this);

                                                    
}

                                                    
FirstObserver.prototype.update=function(){

                                                    
    console.log("first observer:"+this
                                                        .subject.state);
                                                    

                                                    
};

                                                    
 

                                                    
/**

                                                    
 * 观察者2

                                                    
 */

                                                    
function SecondObserver(subject){

                                                    
    this.subject = subject;

                                                    
    subject.addObs(this);

                                                    
}

                                                    
SecondObserver.prototype.update=function(){

                                                    
    console.log("second observer:"+this
                                                        .subject.state);
                                                    

                                                    
};

                                                

                                            复制代码

3)测试


                                                

                                                    
<!DOCTYPE html>

                                                    
<html>

                                                    
<head lang="en">

                                                    
    <meta charset=
                                                        "UTF-8">

                                                
    <title></title
                                                    >
                                                

                                                
    <script src=
                                                    "FirstObserver.js"></script>

                                                
    <script src=
                                                    "SecondObserver.js"></script>

                                                
    <script src=
                                                    "Subject.js"></script>

                                                
</head>

                                                
<body>

                                                
    <script>

                                                
        var sub = new Subject();

                                                
        var fo = new FirstObserver(sub);

                                                
        var so = new SecondObserver(sub);

                                                
        sub.setState("222");

                                                
    </script>

                                                
</body>

                                                
</html>

                            

                            复制代码

 结果