Instantiating JavaScript module pattern

Question

I'm trying to create multiple instances of a slider on a page. Each slider should know which slide it’s currently viewing. It seems that when I update the slide property, I change it for the class, and not the instance. This suggests to me that I'm not instantiating properly in my public init() function. Where am I going wrong?

var MySlider = (function() {

    'use strict';

    var animating = 0,
           slides = 0, // total slides
           slider = null,
            slide = 0, // current slide
             left = 0;

    function slideNext(e) {
        if ((slide === slides - 1) || animating) return;

        var slider = e.target.parentNode.children[0],
                 x = parseFloat(slider.style.left);

        animate(slider, "left", "px", x, x - 960, 800);
        slide++;
    }

    return {
        init: function() {
            var sliders = document.querySelectorAll('.my-slider'),
                      l = sliders.length;

            for (var i = 0; i < l; i++) {
                sliders[i] = MySlider; // I don't think this is correct.

                slider = sliders[i];

                buildSlider(slider);

            }
        }
    }

})();

I don't get the purpose of this way of creating things except adding useless complexity and sources of mistakes. Can someone enlighten me ? — Virus721
– Virus721, Commented Apr 24, 2013 at 14:26
your "I don't think this is correct" line is well assessed. you are attaching the same object to every slider. My inclination would be to invert this and make MySlider a constructor that takes a parameter (a single slider element) on which to operate. Make a new MySlider for each slider element you have. — underrun
– underrun, Commented Apr 24, 2013 at 14:28
@underrun Could you show me how? The idea was that when someone implements this module, they could just call MySlider.init(); once their DOM has loaded, and my function would loop over matched elements on the page and create an instance for each. I wouldn’t want them to have to manually create instances. — Jezen Thomas
– Jezen Thomas, Commented Apr 24, 2013 at 14:31

underrun · Accepted Answer · 2013-04-24 14:57:00Z

5

Based on your comment, I think this is more like what you want:

MySlider = (function () {
    Slider = function (e) {
        this.e = e;
        // other per element/per slider specific stuff
    }

    ...

    var sliders; // define this out here so we know its local to the module not init

    return {
        init: function () {

            sliders = document.querySelectorAll('.my-slider');
            var l = sliders.length;

            for (var i = 0; i < l; i++) {
                sliders[i] = new Slider(sliders[i]); //except I'd use a different array

                slider = sliders[i];

                buildSlider(slider);
        }
    }
})();

This way, you are associating each element with it's own element specific data but you have a containing module within which you can operate on your collection of modules.

answered Apr 24, 2013 at 14:57

underrun

6,8712 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Bratton · Accepted Answer · 2013-04-24 14:28:44Z

3

It seems that when I update the slide property, I change it for the class, and not the instance.

You are correct. That code is run only when the MySlider class is defined. If you want an instance variable, you need to declare it inside the returned object, ie, part of your return block:

 var MySlider = (function(param) {
    return {
       slider: param, 

       init: function() {
            var sliders = document.querySelectorAll('.my-slider'),
                      l = sliders.length;

            for (var i = 0; i < l; i++) {
                sliders[i] = MySlider; // I don't think this is correct.

                slider = sliders[i];

                buildSlider(slider);

            }
        }
});

edited Apr 24, 2013 at 14:28

answered Apr 24, 2013 at 14:22

Peter Bratton

6,4076 gold badges42 silver badges62 bronze badges

5 Comments

Jezen Thomas Over a year ago

What's the correct way to instantiate in this context? Elsewhere, I’ve seen something like var sliderOne = MySlider();, but it seems I can’t do that in my init() function.

Peter Bratton Over a year ago

Create a parameter for the constructor, then assign it in the return block.

Bergi Over a year ago

You're not using the slider property anywhere?

Jezen Thomas Over a year ago

I'm actually focusing on the slide property. In my slideNext(e) function, I'm checking and updating the slide property.

Peter Bratton Over a year ago

The same principal is true regardless of which variables you want to make class/instance. If you'd like, feel free to edit my answer to put in the correct variable name(s).

Collectives™ on Stack Overflow

Instantiating JavaScript module pattern

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related