jQuery 对象文字模式
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');
});
});
我已使用您与 post 链接的相同类型的结构将代码重构为对象文字。所有创建的元素都在 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();
为了编写更简洁的代码,我决定学习一些设计模式。我真的很喜欢对象文字模块模式,但我遇到了一些麻烦。我用意大利面条代码创建了一个灯箱,但无法将其转换为对象文字模式。
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');
});
});
我已使用您与 post 链接的相同类型的结构将代码重构为对象文字。所有创建的元素都在 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();