jQuery 对象文字模式

Question

为了编写更简洁的代码，我决定学习一些设计模式。我真的很喜欢 Object Literal Module 模式，但我遇到了一些麻烦。我在意大利面条代码中创建了一个灯箱，但无法将其转换为对象文字模式。

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');
    });
});

Answer 1

我已使用与您的帖子链接的相同结构将代码重构为对象字面量。所有创建的元素都在 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();