이것 좀 봐 :

_{( http://web.archive.org/web 의 아카이브 된 버전을 기반으로 만료 된 블로그 페이지 http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/ 에서 재 인쇄 됨 /20130120010146/http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/ )}

jQuery로 게시 / 구독

2008 년 6 월 17 일

Google Gears의 오프라인 기능과 통합 된 jQuery UI를 작성하기 위해 jQuery를 사용하여 네트워크 연결 상태를 폴링하는 코드를 가지고 놀았습니다.

네트워크 감지 개체

기본 전제는 매우 간단합니다. 정기적으로 URL을 폴링하는 네트워크 감지 개체의 인스턴스를 만듭니다. 이러한 HTTP 요청이 실패하면 네트워크 연결이 끊겼거나 현재 시간에 서버에 연결할 수 없다고 가정 할 수 있습니다.

$.networkDetection = function(url,interval){
    var url = url;
    var interval = interval;
    online = false;
    this.StartPolling = function(){
        this.StopPolling();
        this.timer = setInterval(poll, interval);
    };
    this.StopPolling = function(){
        clearInterval(this.timer);
    };
    this.setPollInterval= function(i) {
        interval = i;
    };
    this.getOnlineStatus = function(){
        return online;
    };
    function poll() {
        $.ajax({
            type: "POST",
            url: url,
            dataType: "text",
            error: function(){
                online = false;
                $(document).trigger('status.networkDetection',[false]);
            },
            success: function(){
                online = true;
                $(document).trigger('status.networkDetection',[true]);
            }
        });
    };
};

여기에서 데모를 볼 수 있습니다. 브라우저가 오프라인에서 작동하도록 설정하고 어떻게되는지 확인하십시오. 아니, 그렇게 흥미 진진하지 않습니다.

트리거 및 바인드

신나는 것은 (또는 적어도 신나는 것은) 응용 프로그램을 통해 상태가 전달되는 방법입니다. jQuery의 트리거 및 바인드 메소드를 사용하여 펍 / 서브 시스템을 구현하는 거의 논의되지 않은 방법을 발견했습니다.

데모 코드는 필요한 것보다 더 모호합니다. 네트워크 감지 개체는 문서에 ‘상태’이벤트를 게시하여 문서를 적극적으로 수신하고 모든 가입자에게 ‘알림’이벤트를 게시합니다 (나중에 자세히 설명). 실제 응용 프로그램에는 ‘알림’이벤트가 언제 어떻게 게시되는지를 제어하는 ​​논리가 더 많을 것입니다.

$(document).bind("status.networkDetection", function(e, status){
    // subscribers can be namespaced with multiple classes
    subscribers = $('.subscriber.networkDetection');
    // publish notify.networkDetection even to subscribers
    subscribers.trigger("notify.networkDetection", [status])
    /*
    other logic based on network connectivity could go here
    use google gears offline storage etc
    maybe trigger some other events
    */
});

jQuery의 DOM 중심 접근 방식 이벤트는 DOM 요소에 게시됩니다. 일반 이벤트의 창 또는 문서 객체이거나 선택기를 사용하여 jQuery 객체를 생성 할 수 있습니다. 데모로 취한 접근 방식은 구독자를 정의하는 거의 네임 스페이스 방식을 만드는 것입니다.

가입자가 될 DOM 요소는 “구독자”및 “networkDetection”으로 간단히 분류됩니다. 그런 다음 알림 이벤트를 트리거하여 이러한 요소 (데모에 하나만있는)에만 이벤트를 게시 할 수 있습니다.$(“.subscriber.networkDetection”)

#notifier의 일부 사업부 .subscriber.networkDetection가입자 그룹은 효과적으로 청취자의 역할을 바인드 익명의 기능이 있습니다.

$('#notifier').bind("notify.networkDetection",function(e, online){
    // the following simply demonstrates
    notifier = $(this);
    if(online){
        if (!notifier.hasClass("online")){
            $(this)
                .addClass("online")
                .removeClass("offline")
                .text("ONLINE");
        }
    }else{
        if (!notifier.hasClass("offline")){
            $(this)
                .addClass("offline")
                .removeClass("online")
                .text("OFFLINE");
        }
    };
});

그래서 당신은 간다. 그것은 모두 장황하고 내 예제는 전혀 흥미 롭지 않습니다. 또한이 방법으로 할 수있는 흥미로운 것을 보여주지는 않지만 소스를 파고 싶은 사람이 있다면 자유롭게 느끼십시오. 모든 코드는 데모 페이지 헤드에 인라인되어 있습니다.

답변

$(document).on('testEvent', function(e, eventInfo) {
  subscribers = $('.subscribers-testEvent');
  subscribers.trigger('testEventHandler', [eventInfo]);
});

$('#myButton').on('click', function() {
  $(document).trigger('testEvent', [1011]);
});

$('#notifier1').on('testEventHandler', function(e, eventInfo) {
  alert('(notifier1)The value of eventInfo is: ' + eventInfo);
});

$('#notifier2').on('testEventHandler', function(e, eventInfo) {
  alert('(notifier2)The value of eventInfo is: ' + eventInfo);
});

 $("p").bind("myCustomEvent", function(e, myName, myValue){
      $(this).text(myName + ", hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent", [ "John" ]);
    });

$('#myInput').keydown(function(ev) {
    if (ev.which == 13) {
        ev.preventDefault();
        // Do some stuff that handles the enter key
    }
});

$('#myInput').enterKey(function() {
    // Do some stuff that handles the enter key
});

(function($){
    $('body').on('keydown', 'input', function(ev) {
        if (ev.which == 13) {
            var enterEv = $.extend({}, ev, { type: 'enterKey' });
            return $(ev.target).trigger(enterEv);
        }
    });

    $.fn.enterKey = function(selector, data, fn) {
        return this.on('enterKey', selector, data, fn);
    };
})(jQuery);

$('a.button').on('click enterKey', function(ev) {
    ev.preventDefault();
    ...
});

$(document).on("getMsg", {
    msg: "Hello to everyone",
    time: new Date()
}, function(e, param) {
    console.log( e.data.msg );
    console.log( e.data.time );
    console.log( param );
});

$( document ).trigger("getMsg", [ "Hello guys"] );

var event = jQuery.Event('customEventName');
$(element).trigger(event);

$(element).trigger('eventname');

var prevented = event.isDefaultPrevented();

$(element).off('eventname.namespace').on('eventname.namespace', function () {
    ...
});

$(element).on('eventname', function () {
    ...
});

$(element).on('eventname', function () {});

$(element).off('eventname', function () {});

$(element).on('eventname.namespace', function () {});

$(element).off('eventname.namespace').on('eventname.namespace', ...)