参考对面的JavaScript事件侦听器对象

Question

所以我写了一个API，允许不同的应用程序来处理在线/离线检测：

function onOffAPI() { 

    var connection; 

    function init() { 
     var onLoadStatus = window.navigator.onLine; 

     window.addEventListener('online', function() { 
      connection.status = true; 
     }, false); 

     window.addEventListener('offline', function() { 
      connection.status = false; 
     }, false); 

     return { 
      status: onLoadStatus 
     }; 
    } 

    return { 
     getStatus: function() { 
      if (!connection) { 
       connection = init(); 
      } 
      return connection; 
     } 
    }; 
} 

所以一个示例应用程序使用下面的代码来检测每当应用程序在线或离线：

var $alert = $('.alert'); 
var notification = new onOffAPI(); 
var networkStatus = notification.getStatus().status; 

$alert.text('Online: ' + notification.getStatus().status); //returns true if online, false if offline 

如果能够参考API时加载应用程序很简单，但我很困惑，如何引用事件监听器每当网络连接被突然从网上更改为脱机，或副VERS一个。有人可以帮我在这里吗？

Answer 1

我可以看到你想要做什么，但我认为你会以错误的方式去做。你真正想要的是重新公开在线和离线事件作为一个新的'connectionStatus'事件。你目前所拥有的将需要你对api的状态进行轮询，而你真的希望它是事件驱动的。

它看起来像你使用jQuery，所以我希望你不介意我在这个例子中使用jQuery。以下有两种通知状态的方法。一种方法是使用jQuery回调，另一方面是揭露一个新的事件 “connectionStatus”：

var apiOnlineOffline = (function() { 
    var callbacks = $.Callbacks('unique memory'), 
     eventName = 'connectionStatus'; 

    function setStatus(status) { 
     $(window).trigger(eventName, status); 
     callbacks.fire(status); 
    } 

    function addCallback(callback) { 
     callbacks.add(callback); 
    } 

    return { 
     init: function() { 
      // document.body #becauseIE8 
      document.body.addEventListener('online', function() { 
       setStatus(true); 
      }); 
      document.body.addEventListener('offline', function() { 
       setStatus(false); 
      }) 

      // Set the initial status; assume true for browsers that don't support onLine property. 
      setStatus(window.navigator.onLine || true) 
     }, 

     addCallback: addCallback 
    }; 
}()); 

用法：

<p> 
    Current connection status (event): <span id="statusEvent"></span> 
</p> 

<p> 
    Current connection status (callback): <span id="statusCallback"></span> 
</p> 

<script type="text/javascript"> 
    $(function() { 
     // Using events. 
     $(window).on('connectionStatus', function (event, online) { 
      $('#statusEvent').text(online.toString()); 
     }); 

     // Using callbacks. 
     apiOnlineOffline.addCallback(function (online) { 
      $('#statusCallback').text(online.toString()); 
     }) 

     // Note; this must appear last or the event version won't work. 
     apiOnlineOffline.init(); 
    }); 
</script> 

希望这有助于。

参考：caniuse.com article for online-offline。