티스토리 뷰

웹개발/Jquery

jQuery Custom Event Sample

야쿠 yaku 2012.03.06 15:31
* Custom Event 를 사용하면 느슨한 결합을 수행할 수 있다.

이 말의 의미는 , 바로 구현해야 하는 곳에서 구현하지 않고 따로 빼서 독립적으로 구현 할 수 있다란 의미라고 이해 하면 될 듯하다.

의존은 하되 느슨하게 결합되도록 !.

예를 들어 ajax 호출 을 하고, 결과에 따른 처리를 하는데, 해당 메서드 내에서 처리하지 않고 독립적으로 사용할 수 있게끔 사용 할 수 있다.

옵져버 패턴을 공부하면 잘 알 듯 하다.


예 ) 질문을 클릭하면 답변의 출력 ( 답변을 독립적으로 구현 ), Pub/Sub 예제 Ajax 호출 후 처리


/*
   
Question
Answer
*/ $.fn.faq = function(options) { return this.each(function(i, el) { var base = el, $base = $(el); //console.log(options); base.init = function() { // Do initialization stuff $base .find("dd") .hide() .end() .find("dt") .click(function() { var ans = $(this).next(); if (ans.is(":visible")) { base.closeQ(ans); } else { base.openQ(ans); } }) }; base.openQ = function(ans) { // Open panel ans.show(); // Do callback ans.trigger("ansOpen"); }; base.closeQ = function(ans) { // Open panel ans.hide(); // Do callback ans.trigger("ansClose"); }; base.init(); }); }; $("dl").faq(); $("dd").on("ansOpen", function() { //alert("answer opened!"); }); $("dd").on("ansClose", function() { //alert("answer closed!"); }); // PubSub 패턴 // PubSub (function( $ ) { var o = $( {} ); $.each({ trigger: 'publish', on: 'subscribe', off: 'unsubscribe' }, function( key, val ) { jQuery[val] = function() { o[key].apply( o, arguments ); }; }); })( jQuery ); $.getJSON('http://search.twitter.com/search.json?q=jquery&callback=?', function( results) { $.publish( 'twitter/results', results ); }); // ... $.subscribe( 'twitter/results', function( e, results ) { $('body').html('
    ' + $.map( results.results, function( obj, index) { return '
  • ' + obj.text + '
  • '; }).join('') + '
'); });
저작자 표시
신고

'웹개발 > Jquery' 카테고리의 다른 글

jquery.Callback 소개  (0) 2012.05.09
jquery xml 를 ie가 파싱 못할 경우 .  (0) 2012.03.15
my jQuery Plugin Module Patten Sample  (0) 2012.03.12
jQuery Custom Event Sample  (0) 2012.03.06
animate 페이드 하면서 움직이는 이중 효과  (0) 2012.02.02
jQuery 모듈 패턴  (3) 2011.08.12
댓글
댓글쓰기 폼