jQuery Custom Event Sample

* 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('')
    + '
');
});