为了编写更清晰的代码,我决定学习一些设计模式。我真的很喜欢对象文字模块模式,但我遇到了一些麻烦。我用意大利面条代码创建了一个灯箱,但无法将其转换为对象文字模式。
var $overlay = $("<div class='lightbox'></div>");
var $img = $("<img>");
var $caption = $("<p class='caption'></p>");
$overlay
.append($img)
.append($caption);
$('body').append($overlay);
$('.gallery li').click(function (e) {
e.preventDefault();
var src = $(this).children('img').attr("src");
var cap = $(this).children('img').attr("alt");
$img.attr('src',src);
$caption.text(cap);
$overlay.fadeIn('fast');
$overlay.click(function () {
$overlay.fadeOut('fast');
});
});
最佳答案
我已使用与您的帖子链接的相同类型的结构将代码重构为对象文字。所有创建的元素都位于 lightbox.el
命名空间中,并且您可以使用 lightbox.init()
启动灯箱。
var lightbox = {
el: {
overlay: $("<div class='lightbox'></div>"),
img: $("<img>"),
caption: $("<p class='caption'></p>"),
galleryItems: $('.gallery li'),
body: $('body')
},
fadeSpeed: 'fast',
init: function(){
lightbox.append();
lightbox.bindUIActions();
},
bindUIActions: function(){
lightbox.el.galleryItems.click(lightbox.handleGalleryClick);
},
handleGalleryClick: function(e){
e.preventDefault();
var src = $(this).children('img').attr("src");
var cap = $(this).children('img').attr("alt");
lightbox.el.img.attr('src',src);
lightbox.el.caption.text(cap);
lightbox.el.overlay.fadeIn(lightbox.fadeSpeed);
lightbox.el.overlay.click(lightbox.fadeOutOverlay);
},
fadeOutOverlay: function(){
lightbox.el.overlay.fadeOut(lightbox.fadeSpeed);
},
append: function(){
lightbox.el.overlay
.append(lightbox.el.img)
.append(lightbox.el.caption);
lightbox.el.body.append(lightbox.el.overlay);
}
}
用法:
lightbox.init();
关于javascript - jQuery 对象文字模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35175572/