[英]jQuery Object Literal Pattern
为了编写更简洁的代码,我决定学习一些设计模式。 我真的很喜欢对象文字模块模式,但是我有点麻烦。 我已经用意大利细面条代码创建了一个灯箱,但无法将其转换为对象文字模式。
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()
初始化lightbox。
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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.