图像滑块中的JavaScript模块模式_Javascript

图像滑块中的JavaScript模块模式

javascript

图像滑块中的JavaScript模块模式,javascript,Javascript,所以我是JavaScript新手，我想尝试制作一个图像滑块。我根据几篇教程制作了一个基本的，我已经让它工作了，但我希望它在一个外部js文件中（它已经存在），我知道您希望使用模块模式来生成“私有”变量我如何将其放入模块模式中？以下是我目前掌握的情况： slider.js (function() { var images = ['img/1.png', 'img/2.png', 'img/3.jpg']; var imgNum = 0; var imgLength = i

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

我如何将其放入模块模式中？以下是我目前掌握的情况：

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

（函数（）{
var images=['img/1.png'，'img/2.png'，'img/3.jpg']；
var imgNum=0；
var imgLength=images.length-1；
功能更改图像（方向）{
imgNum=imgNum+方向；
如果（imgNum>imgLength）{
imgNum=0；
}
if（imgNum<0）{
imgNum=2；
}
document.getElementById（'slideshow'）.src=images[imgNum]；
返回false；
}
setInterval（函数（）{
改变形象（1）；
}, 30000);
返回{
//不知道该在这里放什么
}
})();

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>


测试页

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

编写时，您的代码将无法正常工作，因为函数

changeImage

没有全局范围，因此锚元素将无法访问它。您只需更改此代码，即可将

changeImage

函数公开到全局范围。由于这是一个相当简单的场景，所以将其附加到

窗口

并继续前进并没有什么错

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

这里需要注意的另一点是，当使用IIFE（立即执行的函数表达式）而不赋值时，不需要返回值。返回的值，无论其中包含什么，都将不被使用，因为没有变量来保存它。

这实际上不是一种模块类型的情况。如果您想使用一个模块，可以理解的是，它将主要从其他代码调用，而不仅仅是对事件处理程序的简单内联调用

编写时，您的代码将无法正常工作，因为函数

changeImage

没有全局范围，因此锚元素将无法访问它。您只需更改此代码，即可将

changeImage

函数公开到全局范围。由于这是一个相当简单的场景，所以将其附加到

窗口

并继续前进并没有什么错

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

这里需要注意的另一点是，当使用IIFE（立即执行的函数表达式）而不赋值时，不需要返回值。返回的值，无论其中包含什么，都将成为未使用的值，因为没有变量来保存它。

您希望执行以下操作：

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。您想要公开的任何内容都会添加到该对象中。在模块结束时，返回该对象，从而将其公开并使其内部的所有内容都可用。对于您想要私有的东西，您只需将它们声明为变量，而不做更多的事情。在闭包内创建的项目自动为“私有”项目。

您希望执行以下操作：

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

为了修改它以使用模块模式，必须进行一些更改。避免内联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); }
 };
})();

var slider=（函数（）{
var images=['img/1.png'，'img/2.png'，'img/3.jpg']；
var imgNum=0；
var imgLength=images.length-1；
功能更改图像（方向）{
imgNum=imgNum+方向；
如果（imgNum>imgLength）{
imgNum=0；
}
if（imgNum<0）{
imgNum=2；
}
document.getElementById（'slideshow'）.src=images[imgNum]；
}
setInterval（函数（）{
改变形象（1）；
}, 30000);
返回{
下一步：函数（）{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(); };
 }
};

window.onload=function（）{
var nextButtons=document.querySelectorAll（“.next”）；
对于（变量i=0，len=nextButtons.length；i
为了修改它以使用模块模式，必须进行一些更改。避免内联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); }
 };
})();

var slider=（函数（）{
var images=['img/1.png'，'img/2.png'，'img/3.jpg']；
var imgNum=0；
var imgLength=images.length-1；
功能更改图像（方向）{
imgNum=imgNum+directio