实例化JavaScript模块模式

Question

我试图在页面上创建滑块的多个实例。每个滑块都应该知道它当前正在查看的是哪个幻灯片。似乎当我更新slide属性时，我为类而不是实例更改了它。这表明我没有在我的公共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);
        }
    }
})();

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

Answer 2

似乎当我更新幻灯片属性时，我为类而不是实例更改了它。

你是正确的。该代码仅在定义MySlider类时运行。如果你想要一个实例变量，你需要在返回的对象中声明它，也就是返回块的一部分:

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