跨 JavaScript 对象引用事件侦听器答案

【问题标题】：Reference an event listener across JavaScript objects跨 JavaScript 对象引用事件侦听器
【发布时间】：2015-02-11 22:40:21
【问题描述】：

我编写了一个 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 很简单，但我很困惑当网络连接突然从在线变为离线时如何引用事件侦听器，反之亦然。有人可以帮我吗？

【问题讨论】：

你不应该在你的 onOffAPI() 函数中使用new，因为它返回一个值而不是分配给this。

标签： javascript dom-events offline

【解决方案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。

【讨论】：