圖像滑塊中的JavaScript模塊模式

所以我是JavaScript新手，我想嘗試製作圖像滑塊。我從一些教程開始做了一個基本的教程，我已經開始工作了，但我希望它在一個外部的js文件中（它已經是這樣了），並且我知道你想使用模塊模式來製作'私人'變量。圖像滑塊中的JavaScript模塊模式

我該如何將它放入模塊模式？這是我到目前爲止有：

slider.js

(function() { 
    var images = ['img/1.png', 'img/2.png', 'img/3.jpg']; 

    var imgNum = 0; 
    var imgLength = images.length -1; 

    function changeImage(direction) { 
     imgNum = imgNum + direction; 
     if (imgNum > imgLength) { 
      imgNum = 0; 
     } 
     if (imgNum < 0) { 
      imgNum = 2; 
     } 

     document.getElementById('slideshow').src = images[imgNum]; 
     return false; 
    } 

    window.setInterval(function() { 
     changeImage(1); 
    }, 30000); 

    return { 
     //Not sure what to put here 
    } 
})();

的index.html

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test Page</title> 
     <link rel="stylesheet" type='text/css' href='style.css'> 
     <script src="slider.js"></script> 
    </head> 
    <body> 
     <img src="img/1.png" alt='football1' id='slideshow'> 
     <a href="#" onclick="return changeImage(-1)">Previous</a><br/> 
     <a href="#" onclick="return changeImage(1)">Next</a> 
    </body> 
</html>

來源

2013-10-21 Nik

jsFiddle Demo

爲了修改該使用模塊模式，一些變化將不得不作出。避免內聯javascript是最好的做法。標記處理程序的更好方法是使用類名稱。

比方說，我們將使用「下一步」和「上一個」類名稱的按鈕

<a href="#" class="prev">Previous</a><br/> 
<a href="#" class="next">Next</a>

首先，我們將開始滑動模塊

var slider = (function(){ 
var images = ['img/1.png', 'img/2.png', 'img/3.jpg']; 

var imgNum = 0; 
var imgLength = images.length -1; 

function changeImage(direction) { 
    imgNum = imgNum + direction; 
    if (imgNum > imgLength) { 
     imgNum = 0; 
    } 
    if (imgNum < 0) { 
     imgNum = 2; 
    } 

    document.getElementById('slideshow').src = images[imgNum]; 
} 

window.setInterval(function() { 
    changeImage(1); 
}, 30000); 

return { 
    next: function(){ changeImage(1); }, 
    prev: function(){ changeImage(-1); } 
}; 
})();

現在，它被初始化，當一切都加載時，我們可以掛接一些事件處理程序，它們將調用模塊

window.onload = function(){ 
var nextButtons = document.querySelectorAll(".next"); 
for(var i = 0, len = nextButtons.length; i<len; i++){ 
    nextButtons[i].onclick = function(){ slider.next(); }; 
} 
var prevButtons = document.querySelectorAll(".prev"); 
for(var i = 0, len = prevButtons.length; i<len; i++){ 
    prevButtons[i].onclick = function(){ slider.prev(); }; 
} 
};

來源

2013-10-21 21:37:15

非常感謝你，正是我需要的！ – Nik

這不是真正的情況模塊類型。如果你想使用一個模塊，這將是有意義的，它將主要從其他代碼調用，而不僅僅是一個簡單的內聯調用事件處理程序。

正如您所寫，您的代碼將無法正常工作，因爲函數changeImage不在全局範圍內，因此anchor元素將無法訪問它。您需要從此代碼更改所有代碼將changeImage函數公開到全局範圍。由於這是一個相當簡單的情況，只要將它附加到window並繼續前進就沒有任何問題。

window.changeImage = function(direction) { 
    //code 
};

另一件事這裏要注意的是，使用IIFE時（立即執行函數表達式）沒有分配沒有必要返回一個值。返回的值，不管內部是什麼，都會失去活力，因爲沒有變量來保存它。

來源

2013-10-21 21:16:12

@bfavaretto - 是的，我會編輯。當我以這種方式使用它時，我正在說話，但它們對於作業非常有用。 –

我以爲你的意思是，我只是怕OP會誤解它。感謝您的編輯。 – bfavaretto

你想要做這樣的事情：

var Koy = (function(publicAPI) { 

    publicAPI.imageSlider = function(images) { 
     // initialize the slideshow here 
    }; 

    var privateVariable = "I'm a private variable!"; 

    var privateFunction = function() { 
     // this is a private method 
    }; 

    publicAPI.publicVariable = "I'm a public variable!" 

    publicAPI.publicMethod = function() { 
     alert(privateVariable); 
    }; 

    return publicAPI; 

})(Koy || {});

現在，從這個文件外，你可以這樣做：

var slideshow = new Koy.imageSlider('image1.jpg', 'image2.jpg', 'image3.jpg');

我在這裏所做是它創建了一個模塊模式的變化名爲「Koy」的名稱空間。在閉包內部，我創建了一個名爲publicAPI的對象，它將會......等待它......您的公共API。任何想要公開的東西都會被添加到該對象中。在模塊結束時，您返回該對象，從而暴露它並使其中的所有內容都可用。對於你想要私密的東西，你只需將它們聲明爲變量，不用做任何事情。在閉包內創建的項目自動爲「私有」。

來源

2013-10-21 21:35:17

不是我正在尋找的東西，但這真的很酷！我可能更喜歡做模塊的典型方式。 – Nik

這裏的非標準唯一的事情是將publicAPI對象傳遞給閉包並將其添加到Koy命名空間。如果您從調用中刪除匿名函數中的「PublicAPI」和「Koy || {}」，則您有一個「標準」模塊。然後，您將添加var publicAPI = {};到關閉的開始。如果您沒有傳入圖像來啓動滑塊，則無法將其作爲模塊B/C代碼不可重複使用。在這種情況下，只需使用IIFE並稱之爲一天。順便說一句，我稱之爲「publicAPI」的對象在教程中經常被命名爲「我的」。 Obs你可以稱它爲你喜歡的東西 –

圖像滑塊中的JavaScript模塊模式

回答

相關問題