跨JavaScript对象引用事件侦听器

Question

So I have written an API that would allow different applications to handle online/offline detection:

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;
        }
    };
}

So a sample app uses the following code to detect whenever the application is online or offline:

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

Being able to reference the API when the application loads is straightforward, but I'm perplexed as how to reference the event listeners whenever the network connection were to suddenly change from online to offline, or vice versa. Could someone help me out here?

Answer 1

I can see what you're trying to do, but I think you're going about it in the wrong way. What you really want is to re-expose the online and offline events as a new 'connectionStatus' event. What you currently have would require that you poll the api for the status, whereas you really want it to be event driven.

It looks like you're using jQuery, so I hope you don't mind if I use jQuery in this example. The following has two methods for being notified of the status. One method is to use jQuery callbacks, the other is to expose a new event "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
    };
}());

Usage:

<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>

Hope this helps.

Reference: caniuse.com article for online-offline .