jQuery의 관찰자 Pattern_jquery에 대한 자세한 설명

jQuery에서 on 메소드는 이벤트를 요소에 바인딩할 수 있고, Trigger 메소드는 이벤트를 수동으로 트리거할 수 있습니다. 이 두 가지 메소드를 중심으로 jQuery의 Observer Pattern을 경험해 보겠습니다.

■ on 메소드는 내장된 이벤트를 바인딩하여 자연스럽게 트리거합니다

예를 들어 페이지의 본문 요소에 클릭 이벤트를 바인딩하는 경우 다음과 같이 작성합니다.

코드 복사 코드는 다음과 같습니다.

$(function() { $('body').on('클릭', 함수 () { console.log('클릭했습니다~~'); }); });

안녕하세요

위에서는 본문을 클릭해야만 클릭 이벤트를 실행할 수 있습니다. 즉, 내장 이벤트가 페이지 요소에 바인딩되면 내장 이벤트가 발생하는 순간 이벤트가 트리거됩니다.

■ on 메소드는 내장 이벤트를 바인딩하고 수동으로 트리거합니다.

트리거 메소드를 사용하면 요소에 바인딩된 내장 이벤트를 수동으로 트리거할 수도 있습니다.

$(function() { $('body').on('클릭', 함수 () { console.log('클릭했습니다~~'); }); $('body').trigger('click'); }); 위에서는 본문을 클릭할 필요가 없으며 페이지가 로드된 후 본문이 자동으로 클릭 이벤트를 트리거합니다.

■ on 메소드는 맞춤 이벤트를 바인딩하고 수동으로 트리거합니다. 클릭은 jquery에 내장된 이벤트라는 것을 알고 있습니다. 그렇다면 이벤트를 수동으로 맞춤설정하고 실행할 수 있나요?

코드 복사 코드는 다음과 같습니다. $(function() { $('body').on('someclick', function () { console.log('클릭했습니다~~'); }); $('body').trigger('someclick'); });

위에서는 someclick 이벤트를 커스터마이징했는데, 결과는 위와 같습니다.

그래서 우리는 맞춤 이벤트를 요소에 바인딩하고 트리거 메소드를 사용하여 이벤트를 트리거할 수 있다는 것을 알았습니다.

물론, 맞춤 이벤트 이름은 app.someclick과 같은 "namespace.custom 이벤트 이름" 형식으로 작성할 수 있습니다. 이는 맞춤 이벤트 이름 충돌을 효과적으로 방지할 수 있는 대규모 프로젝트에서 특히 유용합니다.

'게시 및 구독' 관점에서 on 방식은 구독자 및 관찰자에 해당하고, 트리거 방식은 게시자에 해당합니다.

■ "비동기적으로 json 데이터 가져오기"에서 jQuery 관찰자 모드를 경험해 보세요.

루트 디렉터리에 data.json 파일이 있습니다.

{ "one" : "안녕하세요", "둘" : "세계" } 이제 비동기적으로 json 데이터를 가져옵니다.

코드 복사 코드는 다음과 같습니다. $(함수 () { $.getJSON('data.json', function(data) { console.log(데이터); }); });

비동기적으로 획득한 json 데이터를 받기 위해 전역 변수를 사용하는 경우.

코드 복사 코드는 다음과 같습니다. $(함수 () { var 데이터; $.getJSON('data.json', function(results) { 데이터 = 결과; }); console.log(데이터); });

이번에 얻은 결과는 정의되지 않았습니다. 왜 그렇습니까?

--$.getJSON 메소드가 여전히 데이터를 가져오는 동안 console.log(data)가 실행되었으며 현재로서는 data에 데이터가 없기 때문입니다. 이 문제를 어떻게 해결하나요?

--$.getJSON 메소드 외에 실행해야 할 메소드를 먼저 정의한 뒤 실제로 $.getJSON 메소드의 콜백 함수에서 이 메소드를 트리거하면 해결되지 않을까요?

코드 복사 코드는 다음과 같습니다. $(함수 () { $.getJSON('data.json', function(results) { $(document).trigger('app.myevent', results) //게시와 동일 }); $(document).on('app.myevent', function(e, results) { //구독과 동일 console.log(결과); }); });

위에서 on 메소드는 맞춤 이벤트 app.myevent를 구독하는 구독자와 비슷하며, 트리거 메소드는 구독자 메소드가 실제로 실행되기 전에 이벤트와 매개변수를 게시하는 게시자와 같습니다.

■ jQuery 관찰자 패턴의 확장 방법

이를 위해 특별히 jQuery 관찰자 패턴을 위한 확장 메서드를 작성할 수도 있습니다.

코드 복사 코드는 다음과 같습니다. $(함수 () { $.getJSON('data.json', 함수(결과) { $.publish('app.myevent', 결과); }); $.subscribe('app.myevent', 함수(예, 결과) { console.log(결과); }); }); (함수($) { var o = $({});//맞춤 이벤트 객체 $.each({ 트리거: '게시', on: '구독', 끄기: '구독 취소' }, 함수(키, 값) { jQuery[val] = 함수() { o[키].apply(o, 인수); }; }); })(jQuery);

위에서는 언제든지 호출할 수 있는 전역 게시 및 구독 메서드를 정의합니다.

코드 복사 코드는 다음과 같습니다. $(함수 () { $.getJSON('data.json', 함수(결과) { $.publish('app.myevent', 결과); }); $.subscribe('app.myevent', 함수(e, 결과) { $('body').html( 결과.하나 ); }); });

요약: jQuery의 관찰자 모드에서는 실제로 이벤트를 트리거하는 데 트리거 메서드가 사용될 때까지 on 메서드에 바인딩된 맞춤 이벤트가 실행되지 않도록 허용합니다. jQuery의 관찰자 패턴을 사용하면 한 번 게시하고 여러 번 구독할 수 있다는 이점이 있습니다.