JavaScript 代码片段

发布/订阅模式

// 事件，具有添加/删除事件处理器的功能
function Event(name) {
    var handlers = [];

    this.getName = function () {
        return name;
    };

    this.addHandler = function (handler) {
        handlers.push(handler);
    };

    this.removeHandler = function (handler) {
        for (var i = 0; i < handlers.length; i++) {
            if (handlers[i] == handler) {
                handlers.splice(i, 1);
                break;
            }
        }
    };

    this.fire = function (eventArgs) {
        handlers.forEach(function (h) {
            h(eventArgs);
        });
    };
}

// 事件集合器，具有发布/订阅事件的功能
function EventAggregator() {
    var events = [];

    function getEvent(eventName) {
        return $.grep(events, function (event) {
            return event.getName() === eventName;
        })[0];
    }

    this.publish = function (eventName, eventArgs) {
        var event = getEvent(eventName);

        if (!event) {
            event = new Event(eventName);
            events.push(event);
        }
        event.fire(eventArgs);
    };

    this.subscribe = function (eventName, handler) {
        var event = getEvent(eventName);

        if (!event) {
            event = new Event(eventName);
            events.push(event);
        }

        event.addHandler(handler);
    };
}

检查元素是否位于当前视窗

/*
 * 检查元素是否位于当前视窗(可用于lazyload, infinite scroll等常见功能)
 * 参考链接：http://snippets.barretlee.com/#!/snippets/javascript/check-if-in-viewport.snippet
 */
function isInViewport(el) {

    /*
     *  getBoundingClientRect()   参考链接：http://www.cnblogs.com/leejersey/p/4127714.html
     *  返回一个矩形对象，包含四个属性：left、top、right和bottom，分别表示元素各边与页面上边和左边的距离。
     *  注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，
     *  默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。
     *
     *
     * window.innerHeigh / innerWidth 窗口显示区（可视区域）的宽度和高度，包括滚动条区域，不包含边框
     * window.innerHeight / innerWidth  IE8及以下不支持，所以使用document. documentElement.clientHeight / clientWidth 替代
     */
    var rect = el.getBoundingClientRect();

    return rect.bottom > 0 &&
        rect.right > 0 &&
        rect.left < (window.innerWidth || document. documentElement.clientWidth) &&
        rect.top < (window.innerHeight || document. documentElement.clientHeight);
}