观察者模式

刺骨的言语ヽ痛彻心扉 2022-07-21 00:24 36阅读 0赞

js观察者模式

<!DOCTYPE>
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <meta content="text/html" charset="utf-8">
     </head>
    	<style>
    	div{
    		margin:10px;
    		width:500px;
    		height:200px;
    		border:1px solid red;
    		
    	}
    	#ad{
    		border: 1px solid blue;
    	}
    	</style>
     <script>
    	 window.onload = function(){
    		 var sel = document.getElementById('subject');
    		 sel.observers = {};
    
    		 var content = document.getElementById('content');
    		 var ad = document.getElementById('ad');
    		 var study = document.getElementById('study');
    
    		 //添加观察者
    		 sel.attach = function(key,obj){
    			 this.observers[key] = obj;
    		 }
    
    		 //删除观察者
    		 sel.detach = function(key){
    			 delete this.observers[key];
    		 }
    
    		 //通知观察者
    		 sel.onchange = sel.notice = function(){
    			 for(var key in this.observers){
    				 this.observers[key].update(this);
    			 }
    		 }
    
    		 //观察者更新规则
    		 content.update = function(subject){
    			 if(subject.value == 'male')
    				 this.style.background = 'blue';
    			 else if(subject.value == 'female')
    				 this.style.background = 'pink';
    		 }
    
    		 ad.update = function(subject){
    			 if(subject.value == 'male')
    				 this.innerHTML = '汽车';
    			 else if(subject.value == 'female')
    				 this.innerHTML = '美容';
    		 }
    
    		 study.update = function(subject){
    			 if(subject.value == 'male')
    				 this.innerHTML = '如何年薪百万，迎娶白富美';
    			 else if(subject.value == 'female')
    				 this.innerHTML = '如何做美丽女强人';
    		 }
    
    		 //添加观察者
    		 sel.attach('content',content);
    		 sel.attach('ad',ad);
    		 sel.attach('study',study);
    	 }
     </script>
    
     <body>
      <h1>观察者模式切换</h1>
      <select name="" id="subject">
    	<option value="male">男式风格</option>
    	<option value="female">女士风格</option>
      </select>
      <div id="content">我是内容</div>
      <div id="ad">我是广告</div>
      <div id="study">学习</div>
     </body>
    </html>

php观察者模式

<?php
    //被观察对象类
    class user implements SplSubject{
        public $lognum;
        public $hobby;
    
        public function __construct($hobby){
            $this->lognum = rand(1,10);
            $this->hobby = $hobby;
            $this->observers = new SplObjectStorage();      //spl标准库对象，存储观察者的存储对象
        }
    
        public function login(){
            $this->notify();
        }
    
        public function attach(SplObserver $observer){
            $this->observers->attach($observer);
        }
    
        public function detach(SplObserver $observer){
            $this->observers->detach($observer);
        }
    
        public function notify(){
            $this->observers->rewind();     //将指针指向对象头部
            while($this->observers->valid()){
                $observer = $this->observers->current();    //弹出一个观察者对象
                $observer->update($this);
                $this->observers->next();
            }
    
        }
    }
    
    //观察者类
    class secrity implements SplObserver{
       public function update(SplSubject $subject){
            if($subject->lognum <3)
                echo '这是你第'.$subject->lognum.'次登录';
            else
                echo '这是你第'.$subject->lognum.'次登录,登录异常';
       }
    }
    
    class ad implements SplObserver{
        public function update(SplSubject $subject){
            if($subject->hobby == 'sport')
                echo "\n".'直播欧冠决赛';
            else
                echo "\n".'买买买';
        }
    }
    
    //进行观察
    $user = new user('sport');
    $user->attach(new secrity());
    $user->attach(new ad());
    $user->login();