Question

一点建筑问题......

我最初创建了一个Javascript单例，用于存放在CMS系统的模板文件中操作照片库模块所需的方法。原始规范仅在页面上调用此照片库模块的一个实例。（下面的代码简化了我实际写的内容。）

发布代码后不久，我突然意识到即使规范要求该模块的一个实例，如果一个页面有两个模块实例（即用户将两个照片库添加到一个模块中），这个代码就会崩溃通过CMS页面）。现在，HTML标记是安全的，因为我使用了类名，但是如何重构我的Javascript和jQuery事件监听器以便能够处理多个模块？您可以假设每个照片库都有自己的JSON-P文件（或者如果您认为可以使用一个JSON-P文件更优雅地处理它，则可以假设一个JSON-P文件。）

我认为我的原始jQuery事件监听器可能必须转换为$ .delegate（），但我不知道在那之后该怎么做以及如何处理转换我的单例。任何线索将不胜感激。如果您提供代码，我更喜欢可读性而不是优化。

我不是在问这个问题，因为我迫切需要解决工作中的问题。我问这个问题是前瞻性思维，并且是一个更好的Javascript开发人员，因为我希望将来遇到这个问题，并希望做好准备。

感谢您的阅读。

HTML

<div class="photoGalleryMod">
    <div class="photoGalleryImgBox"><img src="http://www.test.org/i/intro.jpg" alt="Intro Photo" /></div>
    <div class="photoGalleryImgCap"><p>Caption</p></div>
    <a href="#" class="photoGalleryPrevImgLnk"></a>
    <a href="#" class="photoGalleryNextImgLnk"></a>  
</div>

Javascript是一个外部静态文件，它通过CMS创建的$ .getSCript（）调用JSON-P文件。

使用Javascript / jQuery的

(function($) {
    photoGalleryModule = {
        json: '',
        numSlidesInJson: '',
        currentSlide: '',
        updateSlide: function (arg_slidNum) {
            /* Update the slide here */
        },
        init: function (arg_jsonObj) {
            this.json = arg_jsonObj;
            this.numSlidesInJson = this.json.photoGallerySlides.length;
            this.currentSlide = 0;
        }
    };

    $(document).ready(function() {
        $.getScript('./photogallery.json');

        $('.photoGalleryPrevImgLnk').live('click', function(event) {
            photoGalleryModule.currentSlide = photoGalleryModule.currentSlide - 1;
            photoGalleryModule.updateSlide(photoGalleryModule.currentSlide);
            event.preventDefault();
        });

        $('.photoGalleryNextImgLnk').live('click', function(event) {
            photoGalleryModule.currentSlide = photoGalleryModule.currentSlide + 1;
            photoGalleryModule.updateSlide(photoGalleryModule.currentSlide);
            event.preventDefault();
        });
    });
})(jQuery);

photo-gallery.json的内容

photoGalleryModule.init(
{
    photoGallerySlides:
        [
            {
                type: 'intro',
                pageTitle: 'Intro Photo',
                imgUrl: 'http://www.test.org/i/intro.jpg',
                imgAltAttr: 'Intro photo',
                captionText: 'The intro photo',
            },
            {
                type: 'normal',
                pageTitle: 'First Photo',
                imgUrl: 'http://www.test.org/i/img1.jpg',
                imgAltAttr: 'First photo',
                captionText: 'the first photo',
            },
            {
                type: 'normal',
                pageTitle: 'Second Photo',
                imgUrl: 'http://www.test.org/i/img2.jpg',
                imgAltAttr: 'Second photo',
                captionText: 'the second photo',
            }
        ]
});

Answer 1

我认为最简单的方法就是将代码转换为插件。所以对于以下HTML：

<div id="photoGallery1">
    <div class="photoGalleryImgBox"></div>
    <div class="photoGalleryImgCap"></div>
    <a href="#" class="photoGalleryPrevImgLnk"></a>
    <a href="#" class="photoGalleryNextImgLnk"></a>  
</div>

<div id="photoGallery2">
    ...
</div>

<div id="photoGallery3">
    ...
</div>

您将使用$.fn.photoGallery创建插件，并将索引作为参数传递：

$.fn.photoGallery = function (index) {
    var $this = this,
        module = {
            json: '',
            numSlidesInJson: '',
            currentSlide: '',
            updateSlide: function (arg_slidNum) {
                /* Update the slide here */
            },
            init: function (arg_jsonObj) {
                module.json = arg_jsonObj;
                module.numSlidesInJson = module.json.photoGallerySlides.length;
                module.currentSlide = 0;
            }
        },
        events = {
            prev: function(e) {
                module.currentSlide = module.currentSlide - 1;
                module.updateSlide(module.currentSlide);
                e.preventDefault();
            },
            next: function(e) {
                module.currentSlide = module.currentSlide + 1;
                module.updateSlide(module.currentSlide);
                e.preventDefault();
            }
        };

    $.getScript('./photogallery' + index + '.json');

    $this.find('.photoGalleryPrevImgLnk').live('click', events.prev);
    $this.find('.photoGalleryNextImgLnk').live('click', events.next);
};

然后像这样启动每个画廊：

$(document).ready(function(){
    $('#photoGallery1').photoGallery(1);
    $('#photoGallery2').photoGallery(2);
    $('#photoGallery3').photoGallery(3);
});

您拥有文件photogallery1.json，photogallery2.json和photogallery3.json，每个文件都会使用必要的对象数据调用module.init({ ... });。

Answer 2

某些事情like this可以解决这个问题：（未经测试）

// jquery plugin: jquery.photogallery.js
$.fn.photoGallery = (function($){
    var PhotoGalleryModule = function(el, opts){
        $.extend(this, opts);
        this.el = $(el);
        // if there are multiple on the page do not re-bind or re-init
        if(!!this.el.data('photoGallery')) return el;

        this.numSlidesInJson = this.json.photoGallerySlides.length;
        this.bind();

    };
    PhotoGalleryModule.prototype = {
        updateSlide: function (arg_slidNum) {
            /* Update the slide here */
        },
        bind: function(){
            var self = this;
            this.el.find('.photoGalleryPrevImgLnk')
              .live('click', function(event) {
                self.currentSlide = self.currentSlide - 1;
                self.updateSlide(self.currentSlide);
                event.preventDefault();
            });   
            this.el.find('.photoGalleryNextImgLnk')
              .live('click', function(event) {
                self.currentSlide = self.currentSlide + 1;
                self.updateSlide(self.currentSlide);
                event.preventDefault();
            });
        } 
    };

    return function (opts) {
        return this.each(function () {
            $(this).data('photoGallery', 
                new PhotoGalleryModule(this, opts));
        });
    };
})(jQuery);

// activate
$(function(){
    var ready = function(){
        $('div.photoGalleryMod').photoGallery({
            // similar technique as below to load json
            json: { photoGallerySlides: { /*...*/} },
            currentSlide: 0
        }); 
    };
    // load script dynamically when needed
    ('photoGallery' in $.fn) ? ready() :
        $.getScript('/scripts/jquery.photogallery.js', ready);

});

如何将Javascript单例更改为可以多次使用的东西？

2 个答案: