图像滑块中的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模块模式

回答

相关问题