跨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很簡單，但是我困惑的是，每當網絡連接突然從聯機更改為脫機時，如何引用事件偵聽器，反之亦然。 有人可以幫幫我嗎？

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在線離線文章 。