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

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。

跨JavaScript对象引用事件侦听器

1 个答案: