jQuery 对象文字模式

jQuery Object Literal Pattern

本文关键字：模式 文字 对象 jQuery      更新时间：2023-09-26

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

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();
相关文章：