Создание шаблона модуля 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); 

      } 
     } 
});