搜尋
首頁後端開發php教程PHP設計模式之JS實作觀察者模式 c 觀察者模式 android 觀察者模式 ios 觀察者模

觀察者模式 Observer
java观察者设计模式,ios观察者设计模式,设计模式中观察者模式,设计模式之观察者模式,观察者模式,观察者模式 java,c 观察者模式,android 观察者模式,ios 观察者模

實現目標:變換select框來變動內容區和廣告區
一般思路
1:判斷選取的值
2:順序下來,根據值,修改內容區域
3:再修改廣告區域.

<code><span>if</span>(v == <span>'男'</span>) <span>{
   内容区背景变灰
   广告区内容变成男人话题
}</span><span>else</span><span>if</span>(v == <span>'女'</span>)<span>{
   内容区背景变粉
   广告区内容变成女人话题
}</span></code>

那麼問題有哪些:
1:讓你選擇時引起3個區域的變化,是否要修改if/elseif部分
2:如果選擇女性樣式,但不要變粉,現在流行變紫色,是否又要修改if elseif部分?
問題在於: 控制邏輯與被操作對象耦合嚴重.

這是就需要觀察者模式
js實作觀察者模式

我們讓div物件觀察select的變化,select變化,就會通知到這兩個物件。並引起這2個對象的變化,實現觀察者模式。
java观察者设计模式,ios观察者设计模式,设计模式中观察者模式,设计模式之观察者模式,观察者模式,观察者模式 java,c 观察者模式,android 观察者模式,ios 观察者模

下邊是解決效果
select物件負責attach,detach,notifyObservers,與具體的物件變化解耦。
1.index.html

<code><span>body</span>><span>select</span><span>name</span>=<span>''</span><span>id</span>=<span>""</span>><span>option</span><span>value</span>=<span>'male'</span>>男士风格<span><span>option</span>></span><span>option</span><span>value</span>=<span>'female'</span>>女士风格<span><span>option</span>></span><span><span>select</span>></span><span>input</span><span>type</span>=<span>'button'</span><span>value</span>=<span>"观察学习区"</span><span>onclick</span>=<span>"t1();"</span>><span>input</span><span>type</span>=<span>'button'</span><span>value</span>=<span>"不再观察学习区"</span><span>onclick</span>=<span>"t2();"</span>><span>div</span><span>id</span>=<span>'content'</span>>我是内容<span><span>div</span>></span><span>div</span><span>id</span>=<span>'ad'</span>>我是广告<span><span>div</span>></span><span>div</span><span>id</span>=<span>'study'</span>>我是学习区<span><span>div</span>></span><span><span>body</span>></span></code>

2.index.html中js部分

<code><span>script</span>><span><span>//获取对象</span><span>var</span> sel = document.getElementsByTagName(<span>'select'</span>)[<span>0</span>];
    <span>//定义方法</span>
    sel.observers={};
    <span>//增加某个方法</span>
    sel.attach = <span><span>function</span><span>(key,obj)</span>{</span><span>this</span>.observers[key] = obj;
    }
    <span>//卸掉某个方法</span>
    sel.detach = <span><span>function</span><span>(key)</span>{</span><span>delete</span><span>this</span>.observers[key];
    }
    <span>//通知</span>
    sel.onchange = sel.notify = <span><span>function</span><span>()</span>{</span><span>for</span>(<span>var</span> key <span>in</span><span>this</span>.observers){
            <span>this</span>.observers[key].update(<span>this</span>);<span>//去调用对象的update方法</span>
        }
    }

    <span>//客户端</span><span>var</span> content = document.getElementById(<span>'content'</span>);
    <span>var</span> ad = document.getElementById(<span>'ad'</span>);
    <span>//内容区变化效果</span>
    content.update = <span><span>function</span><span>(observer)</span>{</span><span>if</span>(observer.value==<span>'male'</span>){
            <span>this</span>.style.backgroundColor=<span>'gray'</span>;
        }<span>else</span><span>if</span>(observer.value==<span>'female'</span>){
            <span>this</span>.style.backgroundColor=<span>'pink'</span>;
        }
    }
    <span>//广告区变化效果</span>
    ad.update = <span><span>function</span><span>(observer)</span>{</span><span>if</span>(observer.value==<span>'male'</span>){
            <span>this</span>.innerHTML=<span>'汽车'</span>;
        }<span>else</span><span>if</span>(observer.value==<span>'female'</span>){
            <span>this</span>.innerHTML=<span>'减肥'</span>;
        }
    }
    <span>//确定谁来监视变化</span>
    sel.attach(<span>'content'</span>,content);
    sel.attach(<span>'ad'</span>,ad);

    study = document.getElementById(<span>'study'</span>);
    sel.attach(<span>'study'</span>,study);<span>//默认为观察学习区</span>
    study.update = <span><span>function</span><span>(observer)</span>{</span><span>if</span>(observer.value==<span>'male'</span>){
            <span>this</span>.innerHTML=<span>'学习计算机'</span>;
        }<span>else</span><span>if</span>(observer.value==<span>'female'</span>){
            <span>this</span>.innerHTML=<span>'学习减肥'</span>;
        }
    }
    <span>//增加学习区的观察</span><span><span>function</span><span>t1</span><span>()</span>{</span>
        sel.attach(<span>'study'</span>,study);
    }
    <span>//取消学习区的观察</span><span><span>function</span><span>t2</span><span>()</span>{</span>
        sel.detach(<span>'study'</span>);
    }
</span><span><span>script</span>></span></code>

總結:

  1. 當有另一個觀察對象加入的時候直接添加一個就好
  2. 降低了主題對象和觀察者對象的耦合度
  3. 好的設計模式不會直接進入你的程式碼中,而是進入你的大腦中
').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadeIn(1700); }); });

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何在PHP后端功能开发中合理应用设计模式?如何在PHP后端功能开发中合理应用设计模式?Aug 07, 2023 am 10:34 AM

如何在PHP后端功能开发中合理应用设计模式?设计模式是一种经过实践证明的解决特定问题的方案模板,可以用于构建可复用的代码,在开发过程中提高可维护性和可扩展性。在PHP后端功能开发中,合理应用设计模式可以帮助我们更好地组织和管理代码,提高代码质量和开发效率。本文将介绍常用的设计模式,并给出相应的PHP代码示例。单例模式(Singleton)单例模式适用于需要保

如何通过编写代码来学习和运用 PHP8 的设计模式如何通过编写代码来学习和运用 PHP8 的设计模式Sep 12, 2023 pm 02:42 PM

如何通过编写代码来学习和运用PHP8的设计模式设计模式是软件开发中常用的解决问题的方法论,它可以提高代码的可扩展性、可维护性和重用性。而PHP8作为最新版的PHP语言,也引入了许多新特性和改进,提供更多的工具和功能来支持设计模式的实现。本文将介绍一些常见的设计模式,并通过编写代码来演示在PHP8中如何运用这些设计模式。让我们开始吧!一、单例模式(Sing

深入聊聊设计模式利器之“职责链模式”(附go实现流程)深入聊聊设计模式利器之“职责链模式”(附go实现流程)Jan 17, 2023 am 11:43 AM

本篇文章给大家带来了关于golang设计模式的相关知识,其中主要介绍了职责链模式是什么及其作用价值,还有职责链Go代码的具体实现方法,下面一起来看一下,希望对需要的朋友有所帮助。

Go语言中的ETL的设计模式Go语言中的ETL的设计模式Jun 01, 2023 pm 09:01 PM

随着数据的增长和复杂性的不断提升,ETL(Extract、Transform、Load)已成为数据处理中的重要环节。而Go语言作为一门高效、轻量的编程语言,越来越受到人们的热捧。本文将介绍Go语言中常用的ETL设计模式,以帮助读者更好地进行数据处理。一、Extractor设计模式Extractor是指从源数据中提取数据的组件,常见的有文件读取、数据库读取、A

深入解析Go语言中的单例模式深入解析Go语言中的单例模式Mar 21, 2023 pm 06:36 PM

单例模式是一种常见的设计模式,它在系统中仅允许创建一个实例来控制对某些资源的访问。在 Go 语言中,实现单例模式有多种方式,本篇文章将带你深入掌握 Go 语言中的单例模式实现。

设计模式的六大原则是什么设计模式的六大原则是什么Jan 06, 2023 pm 04:25 PM

设计模式的六大原则:1、单一职责原则,其核心就是控制类的粒度大小、将对象解耦、提高其内聚性;2、开闭原则,可以通过“抽象约束、封装变化”来实现;3、里氏替换原则,主要阐述了有关继承的一些原则;4、依赖倒置原则,降低了客户与实现模块之间的耦合;5、接口隔离原则,是为了约束接口、降低类对接口的依赖性;6、迪米特法则,要求限制软件实体之间通信的宽度和深度。

策略模式:设计模式中的一种策略模式:设计模式中的一种Aug 28, 2023 pm 05:53 PM

到目前为止,我们已经介绍了本系列中的三种设计模式。我们定义了四类不同的设计模式。在本文中,我将解释策略设计模式,它属于行为设计模式。你可能有一个问题:什么时候应该使用这种设计模式?我想说,当我们有多种方法(算法)来执行相同的操作,并且我们希望应用程序根据您拥有的参数选择特定的方法时。这种模式也称为策略模式。本文的一个非常简单的示例是排序功能。例如,我们有多种对数组进行排序的算法,但是根据数组元素的数量,我们应该选择使用哪种算法来获得最佳性能。此模式也称为策略模式。问题我将举一个集成了多个支付网关

PHP 设计模式:通往代码卓越的道路PHP 设计模式:通往代码卓越的道路Feb 21, 2024 pm 05:30 PM

导言PHP设计模式是一组经过验证的解决方案,用于解决软件开发中常见的挑战。通过遵循这些模式,开发者可以创建优雅、健壮和可维护的代码。它们帮助开发者遵循SOLID原则(单一职责、开放-封闭、Liskov替换、接口隔离和依赖反转),从而提高代码的可读性、可维护性和可扩展性。设计模式的类型有许多不同的设计模式,每种模式都有其独特的目的和优点。以下是一些最常用的php设计模式:单例模式:确保一个类只有一个实例,并提供一种全局访问此实例的方法。工厂模式:创建一个对象,而不指定其确切类。它允许开发者根据条件

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),