1

所以我是 JavaScript 新手，我想尝试制作一个图像滑块。我最终从几个教程中制作了一个基本的，并且我已经让它工作了，但我希望它在一个外部 js 文件中（它已经是）并且我知道你想使用模块模式来制作“私有”变量。

我如何将其放入模块模式中？这是我到目前为止所拥有的：

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

索引.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>
4

3 回答 3

1

这不是真正的模块类型的情况。如果您想使用一个模块，那么它将主要从其他代码调用它，而不仅仅是对事件处理程序的简单内联调用，这是有道理的。

如所写，您的代码将无法正常工作，因为该函数changeImage不是全局范围的，因此锚元素将无法访问它。您需要对此代码进行更改的只是将changeImage函数公开到全局范围。window而且由于这是一个相当简单的场景，因此将其附加并继续前进并没有错。

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

这里要注意的另一件事是，当使用没有赋值的 IIFE（立即执行函数表达式）时，不需要返回值。返回的值，不管里面有什么，都不会被取消，因为没有变量来保存它。

于 2013-10-21T21:16:12.843 回答
0

jsFiddle Demo

为了修改它以使用模块模式，必须进行一些更改。最好避免使用内联 javascript。标记处理程序的更好方法是使用类名。

假设我们将使用“next”和“prev”作为按钮的类名

<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-21T21:37:15.370 回答
0

你想做这样的事情：

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-21T21:35:17.387 回答