javascript - 实例化 JavaScript 模块模式

Question

我正在尝试在页面上创建 slider 的多个实例。每个 slider 都应该知道它当前正在查看哪张幻灯片。似乎当我更新 slide 属性时，我为类而不是实例更改了它。这向我表明我没有在我的公共(public) init() 函数中正确实例化。我哪里错了？

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

            }
        }
    }

})();

Answer 1

根据您的评论，我认为这更像是您想要的:

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

通过这种方式，您将每个元素与其自己的元素特定数据相关联，但您有一个包含模块，您可以在其中操作您的模块集合。