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

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>
4

3 に答える 3

1

これは実際にはモジュール タイプの状況ではありません。モジュールを使用したい場合は、イベント ハンドラーへの単純なインライン呼び出しではなく、ほとんどが他のコードから呼び出されることが理にかなっています。

changeImage書かれているように、関数はグローバルにスコープされておらず、アンカー要素はそれにアクセスできないため、コードは正しく機能しません。このコードから変更する必要があるのは、changeImage関数をグローバル スコープに公開することだけです。これはかなり単純なシナリオなので、単に接続して先に進むだけで問題はありませんwindow。

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

ここで注意すべきもう 1 つの点は、代入なしで IIFE (関数式の即時実行) を使用する場合、値を返す必要がないことです。戻り値は、そこに何があったかに関係なく、それを保持する変数がなかったため、ununsed になります。

于 2013-10-21T21:16:12.843 に答える
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 と呼ばれるオブジェクトを作成しました。公開したいものはすべてそのオブジェクトに追加されます。モジュールの最後でそのオブジェクトを返すことで、それを公開し、その中のすべてを利用できるようにします。プライベートにしたいものについては、それらを変数として宣言するだけで、それ以上何もしません。クロージャー内で作成されたアイテムは、自動的に「非公開」になります。

于 2013-10-21T21:35:17.387 に答える