0

因此，我有一个从以前的开发人员那里继承的大型 JS 文件，我正试图了解一些主要部分。这是整个代码：

$(function () {

    var homepage = (function () {

        var startNewsTicker = function () {

            var news = $('#newsSlider div'),
                idx = 0,
                isHovered = false,
                TIMEOUT = 6000;

            news.mouseenter(function () {
                isHovered = true;
            });

            news.mouseleave(function () {
                isHovered = false;
            });

            setInterval(function () {
                if (!isHovered) {
                    news.eq(idx).fadeOut(500);
                    idx = (idx + 1 <= news.length - 1) ? idx + 1 : 0;
                    news.eq(idx).fadeIn(500);
                }
            }, TIMEOUT);
            news.eq(idx).fadeIn(500);
        };

        var slides = {
                wrapper: $('#slideWrapper'),
                slide: $('#slideWrapper li'),
                imageWrapper: {},
                image: {},
                paginatorWrapper: {},
                paginator: {},
                prev: -1,
                next: -1,
                arrows: {
                    left: $('#arwLeft'),
                    right: $('#arwRight')
                }
            },
            centerSlideWrapper = function () {
                slides.wrapper.css({
                    marginTop: ((window.innerHeight - slides.wrapper.height()) / 2) + 'px',
                    opacity: 1
                });
            },
            buildSlider = function () {
                slides.prev = slides.length - 1;
                slides.next = 1;
                slides.wrapper.before('<div id="homepageBackgroundImages" />').after('<div id="homepagePagination" />');
                slides.imageWrapper = $('#homepageBackgroundImages');
                slides.paginatorWrapper = $('#homepagePagination');
                slides.paginatorWrapper.css('width', 36 * slides.slide.length + 'px')
                slides.slide.each(function () {
                    var $t = $(this);
                    slides.imageWrapper.append('<div><img src="' + $t.attr('data-img') + '" /></div>');
                    slides.paginatorWrapper.append('<a href="#"><span>' + $t.attr('data-tagline') + '</span></a>');
                });
                slides.image = slides.imageWrapper.find('div');
                slides.image.find('img').fullscreenBackground();
                slides.paginator = slides.paginatorWrapper.find('a');
                slides.imageWrapper.prepend('<div class="mask"></div>');

                //create offset margin left to auto center spans
                slides.paginator.find('span').each(function () {
                    var $t = $(this);
                    $t.css({
                        top: "-9999px",
                        display: "block"
                    });
                    $t.css({
                        marginLeft: -(($t.width() + parseFloat($t.css('paddingLeft')) + parseFloat($t.css('paddingRight'))) / 2) + 2 + 'px',
                        display: "none",
                        top: "-56px"
                    })
                });

            },
            startSlider = function () {
                var slideIdx = -1,
                    currentSlide,
                    isHovered = false,
                    interval = {
                        delay: 8000,
                        timer: {},
                        start: function () {
                            interval.timer = setInterval(function () {
                                if(!isHovered)
                                    switchSlide(slideIdx + 1);
                            }, interval.delay);
                        },
                        stop: function () {
                            clearInterval(interval.timer);
                        }
                    },
                    switchSlide = function (idx) {
                        if (slideIdx > -1) {
                            slides.image.eq(slideIdx).stop(true, true).fadeOut(500);
                            slides.slide.eq(slideIdx).stop(true, true).fadeOut(500);

                        }
                        idx = (idx <= slides.slide.length - 1) ? idx : 0;
                        slides.image.eq(idx).stop(true, true).fadeIn(500);
                        slides.slide.eq(idx).stop(true, true).fadeIn(500);
                        slideIdx = idx;
                        slides.paginator.removeClass('current').eq(idx).addClass('current');
                        slides.prev = (slideIdx - 1 >= 0) ? slideIdx - 1 : slides.slide.length-1;
                        slides.next = (slideIdx + 1 <= slides.slide.length - 1) ? slideIdx + 1 : 0;
                        slides.arrows.left.find('span').text(slides.slide.eq(slides.prev).attr('data-tagline'));
                        slides.arrows.right.find('span').text(slides.slide.eq(slides.next).attr('data-tagline'));
                    }

                slides.paginator.click(function (e) {
                    e.preventDefault();
                    interval.stop();
                    switchSlide($(this).index());
                    interval.start();
                });

                slides.arrows.left.click(function (e) {
                    e.preventDefault();
                    interval.stop();
                    switchSlide(slides.prev);
                    interval.start();
                });

                slides.arrows.right.click(function (e) {
                    e.preventDefault();
                    interval.stop();
                    switchSlide(slides.next);
                    interval.start();
                });

                slides.arrows.left.mouseenter(function (e) {
                    e.preventDefault();
                    isHovered = true;
                });
                slides.arrows.right.mouseenter(function (e) {
                    e.preventDefault();
                    isHovered = true;
                });

                slides.arrows.left.mouseleave(function (e) {
                    e.preventDefault();
                    isHovered = false;
                });

                slides.arrows.right.mouseleave(function (e) {
                    e.preventDefault();
                    isHovered = false;
                });

                slides.slide.find('strong').mouseenter(function () {
                    isHovered = true;
                });

                slides.slide.find('strong').mouseleave(function () {
                    isHovered = false;
                });

                switchSlide(0);
                interval.start();
            }

        return {
            init: function () {
                centerSlideWrapper();
                $(window).resize(function () {
                    centerSlideWrapper();
                });
                buildSlider();
                startSlider();
                startNewsTicker();
            }
        }

    })();
    homepage.init();
});

在这种情况下，我想弄清楚的是这个块发生了什么：

var homepage = (function () {

...

    return {
        init: function () {
            centerSlideWrapper();
            $(window).resize(function () {
                centerSlideWrapper();
            });
            buildSlider();
            startSlider();
            startNewsTicker();
        }
    }
})();
homepage.init();

我感到困惑的是：

1）为什么homepage以这种方式创建此功能将是有益的。

2）另外，我不明白该函数如何返回一个包含另一个 JS 函数的对象，init然后使用homepage.init();. 此homepage.init();调用是否同时调用homepage和init函数来运行？

感谢你的帮助！

4

2 回答 2

2

1）为什么以这种方式创建这个主页功能会是有益的。

它通常被称为“显示模块模式”，通常用于创建只能使用“公共”属性/方法（封装）访问的私有静态成员。

有关此模式的更多信息，请参阅：为什么将 JavaScript 类嵌入到匿名 function() 调用中？

或者：谷歌/必应/雅虎“揭示模块模式”

2）另外，我不明白该函数如何返回一个包含另一个 JS 函数 init 的对象，然后使用 homepage.init(); 运行。这个 homepage.init(); 调用调用主页和初始化函数来运行？

是的，它调用了对象引用init的方法。homepage

于 2013-02-27T18:50:00.353 回答
2

在 javascript 中，类是通过函数创建的。所以这段代码创建了一个匿名函数并调用它，立即将它的值返回给主页。返回主页的是具有一个属性的函数/对象——在本例中为init函数。

然后使用该对象homepage访问该init函数。

为什么要这样做？它在全局范围内隐藏了您...在示例中的所有内容。init但是当被调用时，函数仍然可以访问它们homepage.init()。为什么？因为它们与init函数在同一范围内（或在本例中为更高的范围）。所以你可以打电话homepage.int();，但你不能打电话homepage.startSlider()。

于 2013-02-27T18:50:18.887 回答