首頁 > 教學 > PHP 教學

PHP設計模式之JS實現觀察者模式 c 觀察者模式 android 觀察者模式 ios 觀察者模

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
觀察者模式 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><selectname=''id=""><optionvalue='male'>男士風格option><optionvalue='female'>女士風格option>select><inputtype='button'value="觀察學習區"onclick="t1();"><inputtype='button'value="不再觀察學習區"onclick="t2();"><divid='content'>我是內容div><divid='ad'>我是廣告div><divid='study'>我是學習區div>body>

2.index.html中js部分

<script>//擷取對象var sel = document.getElementsByTagName('select')[0];    //定義方法    sel.observers={};    //增加某個方法    sel.attach = function(key,obj){this.observers[key] = obj;    }    //卸掉某個方法    sel.detach = function(key){deletethis.observers[key];    }    //通知    sel.onchange = sel.notify = function(){for(var key inthis.observers){            this.observers[key].update(this);//去調用對象的update方法        }    }    //用戶端var content = document.getElementById('content');    var ad = document.getElementById('ad');    //內容區變化效果    content.update = function(observer){if(observer.value=='male'){            this.style.backgroundColor='gray';        }elseif(observer.value=='female'){            this.style.backgroundColor='pink';        }    }    //廣告區變化效果    ad.update = function(observer){if(observer.value=='male'){            this.innerHTML='汽車';        }elseif(observer.value=='female'){            this.innerHTML='減肥';        }    }    //確定誰來監視變化    sel.attach('content',content);    sel.attach('ad',ad);    study = document.getElementById('study');    sel.attach('study',study);//預設為觀察學習區    study.update = function(observer){if(observer.value=='male'){            this.innerHTML='學習電腦';        }elseif(observer.value=='female'){            this.innerHTML='學習減肥';        }    }    //增加學習區的觀察functiont1(){        sel.attach('study',study);    }    //取消學習區的觀察functiont2(){        sel.detach('study');    }script>

總結：

  1. 當有另一個觀察對象加入的時候直接添加一個就好
  2. 降低了主題對象和觀察者對象的耦合度
  3. 好的設計模式不會直接進入你的代碼中，而是進入你的大腦中

').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('
  • ').text(i)); }; $numbering.fadeIn(1700); }); });

    以上就介紹了PHP設計模式之JS實現觀察者模式，包括了觀察者模式,設計模式方面的內容，希望對PHP教程有興趣的朋友有所協助。

    • 本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

    聯繫我們

    該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    Get Started for Free

    • Sales Support

      1 on 1 presale consultation

      Chat Contact Sales

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

      Open a Ticket

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

      Learn More