实例化JavaScript模块模式

我试图在页面上创建滑块的多个实例。每个滑块应该知道它当前正在查看哪个幻灯片。看起来，当我更新slide属性时，我将其更改为类，而不是实例。这表明我没有在我的公开init()函数中正确实例化。我哪里错了？实例化JavaScript模块模式

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

      } 
     } 
    } 

})();

来源

2013-04-24 Jezen Thomas

我不明白这种创建方法的目的，除了增加无用的复杂性和错误来源。有人能够启发我吗？ – Virus721 2013-04-24 14:26:41

你的“我不认为这是正确的”路线很好评估。您将同一个对象附加到每个滑块。我的倾向是将其反转，并使MySlider成为一个构造函数，它需要一个参数（单个滑块元素）来操作。为每个滑块元素创建一个新的MySlider。 – underrun 2013-04-24 14:28:09

@underrun你能告诉我如何？这个想法是，当有人实现这个模块时，他们可以调用MySlider.init（）;一旦他们的DOM已经加载，我的函数将遍历页面上的匹配元素并为每个元素创建一个实例。我不希望他们必须手动创建实例。 – 2013-04-24 14:31:04

基于您的评论，我觉得这是：

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

这样，您将每个元素与它自己的元素特定数据相关联，但是您有一个包含模块，您可以在其中对模块集合进行操作。

来源

2013-04-24 14:57:00 underrun

看来，当我更新的幻灯片财产，我改变它的类，而不是实例。

你是对的。该代码仅在定义了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); 

      } 
     } 
});

来源

2013-04-24 14:22:55

在这种情况下实例化的正确方法是什么？在其他地方，我已经看到'var sliderOne = MySlider（）;'，但似乎我不能在我的'init（）'函数中做到这一点。 – 2013-04-24 14:25:57

为构造函数创建一个参数，然后在返回块中分配它。 – 2013-04-24 14:27:49

更新的代码来演示。 – 2013-04-24 14:28:59

实例化JavaScript模块模式

回答

相关问题