찾다
백엔드 개발PHP 튜토리얼PHP 디자인 패턴 JS는 관찰자 패턴을 구현합니다. c 관찰자 패턴 안드로이드 관찰자 패턴 ios 관찰자 패턴

관찰자 모드 관전자
java观察者设计模式,ios观察者设计模式,设计模式中观察者模式,设计模式之观察者模式,观察者模式,观察者模式 java,c 观察者模式,android 观察者模式,ios 观察者模

목표 달성: 선택 상자를 변경하여 콘텐츠 영역 및 광고 영역 변경
일반 아이디어
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개 영역을 변경할 수 있습니다.
부분을 수정하시겠습니까? 2: 여성스러운 스타일을 선택했지만, 요즘 보라색이 인기가 많아 핑크색으로 바꾸지 않는다면 if elseif 부분을 수정해야 하나요?
문제는 제어 로직이 조작 대상과 심하게 결합되어 있다는 것입니다.

이를 위해서는 관찰자 패턴이 필요합니다
JS는 관찰자 모드를 구현합니다

div 객체가 선택 변경을 관찰하도록 합니다. 선택이 변경되면 이 두 객체에 알림이 전달됩니다. 그리고 이 두 개체를 변경하여 관찰자 패턴을 구현합니다.
java观察者设计模式,ios观察者设计模式,设计模式中观察者模式,设计模式之观察者模式,观察者模式,观察者模式 java,c 观察者模式,android 观察者模式,ios 观察者模

해결 방법은 다음과 같습니다
선택 개체는 연결, 분리, 통지 Observers를 담당하며 특정 개체 변경과 분리됩니다.
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('사전 번호 매기기').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadeIn(1700); }); });

위 내용은 옵저버 패턴과 디자인 패턴을 포함하여 PHP 디자인 패턴에 옵저버 패턴을 JS로 구현하는 방법을 소개한 내용으로, PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
세션 고정 공격을 어떻게 방지 할 수 있습니까?세션 고정 공격을 어떻게 방지 할 수 있습니까?Apr 28, 2025 am 12:25 AM

세션 고정 공격을 방지하는 효과적인 방법은 다음과 같습니다. 1. 사용자 로그인 한 후 세션 ID 재생; 2. 보안 세션 ID 생성 알고리즘을 사용하십시오. 3. 세션 시간 초과 메커니즘을 구현하십시오. 4. HTTPS를 사용한 세션 데이터를 암호화합니다. 이러한 조치는 세션 고정 공격에 직면 할 때 응용 프로그램이 파괴 할 수 없도록 할 수 있습니다.

세션리스 인증을 어떻게 구현합니까?세션리스 인증을 어떻게 구현합니까?Apr 28, 2025 am 12:24 AM

서버 측 세션 스토리지가없는 토큰에 저장되는 토큰 기반 인증 시스템 인 JSONWEBTOKENS (JWT)를 사용하여 세션없는 인증 구현을 수행 할 수 있습니다. 1) JWT를 사용하여 토큰을 생성하고 검증하십시오. 2) HTTPS가 토큰이 가로 채지 못하도록하는 데 사용되도록, 3) 클라이언트 측의 토큰을 안전하게 저장, 4) 변조 방지를 방지하기 위해 서버 측의 토큰을 확인하기 위해 단기 접근 메커니즘 및 장기 상쾌한 토큰을 구현하십시오.

PHP 세션과 관련된 일반적인 보안 위험은 무엇입니까?PHP 세션과 관련된 일반적인 보안 위험은 무엇입니까?Apr 28, 2025 am 12:24 AM

PHP 세션의 보안 위험에는 주로 세션 납치, 세션 고정, 세션 예측 및 세션 중독이 포함됩니다. 1. HTTPS를 사용하고 쿠키를 보호하여 세션 납치를 방지 할 수 있습니다. 2. 사용자가 로그인하기 전에 세션 ID를 재생하여 세션 고정을 피할 수 있습니다. 3. 세션 예측은 세션 ID의 무작위성과 예측 불가능 성을 보장해야합니다. 4. 세션 중독 데이터를 확인하고 필터링하여 세션 중독을 방지 할 수 있습니다.

PHP 세션을 어떻게 파괴합니까?PHP 세션을 어떻게 파괴합니까?Apr 28, 2025 am 12:16 AM

PHP 세션을 파괴하려면 먼저 세션을 시작한 다음 데이터를 지우고 세션 파일을 파괴해야합니다. 1. 세션을 시작하려면 세션 _start ()를 사용하십시오. 2. Session_Unset ()을 사용하여 세션 데이터를 지우십시오. 3. 마지막으로 Session_Destroy ()를 사용하여 세션 파일을 파괴하여 데이터 보안 및 리소스 릴리스를 보장하십시오.

PHP의 기본 세션 저장 경로를 어떻게 변경할 수 있습니까?PHP의 기본 세션 저장 경로를 어떻게 변경할 수 있습니까?Apr 28, 2025 am 12:12 AM

PHP의 기본 세션 저장 경로를 변경하는 방법은 무엇입니까? 다음 단계를 통해 달성 할 수 있습니다. session_save_path를 사용하십시오 ( '/var/www/sessions'); session_start (); PHP 스크립트에서 세션 저장 경로를 설정합니다. php.ini 파일에서 세션을 설정하여 세션 저장 경로를 전 세계적으로 변경하려면 세션을 설정하십시오. memcached 또는 redis를 사용하여 ini_set ( 'session.save_handler', 'memcached')과 같은 세션 데이터를 저장합니다. ini_set (

PHP 세션에 저장된 데이터를 어떻게 수정합니까?PHP 세션에 저장된 데이터를 어떻게 수정합니까?Apr 27, 2025 am 12:23 AM

tomodifyDatainAphPessess, startSessionstession_start (), 그런 다음 $ _sessionToset, modify, orremovevariables.

PHP 세션에 배열을 저장하는 예를 제시하십시오.PHP 세션에 배열을 저장하는 예를 제시하십시오.Apr 27, 2025 am 12:20 AM

배열은 PHP 세션에 저장할 수 있습니다. 1. 세션을 시작하고 session_start ()를 사용하십시오. 2. 배열을 만들고 $ _session에 저장하십시오. 3. $ _session을 통해 배열을 검색하십시오. 4. 세션 데이터를 최적화하여 성능을 향상시킵니다.

Garbage Collection은 PHP 세션에 어떻게 효과가 있습니까?Garbage Collection은 PHP 세션에 어떻게 효과가 있습니까?Apr 27, 2025 am 12:19 AM

PHP 세션 쓰레기 수집은 만료 된 세션 데이터를 정리하기위한 확률 메커니즘을 통해 트리거됩니다. 1) 구성 파일에서 트리거 확률 및 세션 수명주기를 설정합니다. 2) CRON 작업을 사용하여 고재 응용 프로그램을 최적화 할 수 있습니다. 3) 데이터 손실을 피하기 위해 쓰레기 수집 빈도 및 성능의 균형을 맞춰야합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.