进一步了解javascript初始化函数设置
因此，我有一个从以前的开发人员那里继承来的大JS文件，我正试图了解一些主要部分。以下是完整的代码：进一步了解javascript初始化函数设置,javascript,Javascript,因此，我有一个从以前的开发人员那里继承来的大JS文件，我正试图了解一些主要部分。以下是完整的代码： $(function () { var homepage = (function () { var startNewsTicker = function () { var news = $('#newsSlider div'), idx = 0, isHovered = false
$(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();
});
主页inithomepage.init（）运行的。这是不是homepage.init（）
call调用homepage
和init
函数来运行吗
谢谢你的帮助
1） 为什么以这种方式创建这个主页功能会有好处呢
它通常被称为“显示模块模式”，通常用于创建只能使用“公共”属性/方法（封装）访问的私有静态成员
有关此模式的更多信息，请参阅：
或者：Google/Bing/Yahoo“显示模块模式”
2） 另外，我不明白函数是如何返回一个包含另一个JS函数init的对象，然后使用homepage.init（）运行该对象的；。不支持这个homepage.init（）；调用调用homepage和init函数来运行
是的，它调用homepage
对象引用的init
方法
1） 为什么以这种方式创建这个主页功能会有好处呢
它通常被称为“显示模块模式”，通常用于创建只能使用“公共”属性/方法（封装）访问的私有静态成员
有关此模式的更多信息，请参阅：
或者：Google/Bing/Yahoo“显示模块模式”
2） 另外，我不明白函数是如何返回一个包含另一个JS函数init的对象，然后使用homepage.init（）运行该对象的；。不支持这个homepage.init（）；调用调用homepage和init函数来运行
是的，它调用homepage
对象引用的init
方法。在javascript中，类是通过函数创建的。所以这段代码创建了一个匿名函数并调用它，立即将其值返回到主页。返回到主页的是一个带有一个属性的函数/对象——在本例中是init
函数
然后使用对象主页
访问init
功能
为什么要这样做？它从全局范围中隐藏了示例中的所有内容。但是当调用homepage.init（）
时，init
函数仍然可以访问它们。为什么？因为它们与init
函数在同一个范围内（在本例中是一个更高的范围）。所以你可以调用homepage.int（）但不能调用homepage.startSlider（）
。在javascript中，类是通过函数创建的。所以这段代码创建了一个匿名函数并调用它，立即将其值返回到主页。返回到主页的是一个带有一个属性的函数/对象——在本例中是init
函数
然后使用对象主页
访问init
功能
为什么要这样做？它从全局范围中隐藏了示例中的所有内容。但是当调用homepage.init（）
时，init
函数仍然可以访问它们。为什么？因为它们与init
函数在同一个范围内（在本例中是一个更高的范围）。所以你可以调用homepage.int（）但是你不能调用homepage.startSlider（）
例如。信息量很大！谢谢你的信息！我一定会研究这个模块模式。非常有用！谢谢你的信息！我一定会研究这个模块模式。非常感谢你提供的信息！您描述此信息的叙述方式非常有用！非常感谢你提供的信息！您描述此信息的叙述方式非常有用！
var homepage = (function () {
...
return {
init: function () {
centerSlideWrapper();
$(window).resize(function () {
centerSlideWrapper();
});
buildSlider();
startSlider();
startNewsTicker();
}
}
})();
homepage.init();