實例化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模塊模式

回答

相關問題