<!--親の顔より見た光景-->

日々の発見を残していきます。

【JavaScript】モジュールパターン

自分用メモ。モジュールパターンと言いつつ、1つしか知らない。

参考:
【javascript】やさしいクラスの作り方

【index.html】

<!DOCTYPE html>
<html>
    <head>
        <title>Module Test</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script type="text/javascript" src="baseModulePattern.js"></script>
        <script type="text/javascript">
            var image = new Image('testImage');
            console.log(image.getImage());
            image.setImage('newImage');
            console.log(image.getImage());
            
            console.log(image.self.image_);     // this cause error becase accessing pribate member image_.
        </script>
    </body>
</html>

【Moduleのほう】

var Image = (function(){
    var self = this;
    
    // constructor
    var Image = function(image) {
        self.image_ = image;
    };
    
    var p = Image.prototype;
    
    // public
    p.getImage = function() {
       return self.image_; 
    };
    
    // public
    p.setImage = function(image) {
        self.image_ = image;
    };
    
    // private
    var setImageInfo = function(info) {
        sefl.info = info;
    };
    
    return Image;       // important for "new". must return Constructor.
})();

ポイントは、return Image;
ここでconstructor Image functionオブジェクトを返している。
モジュールを使う人はvar image = new Image(image);とし、imageにImage functionが入る。

Image functionだけ入れても何も出来ないので、セッター、ゲッターなどのpublic関数を用意する。
それらをprototypeで辿れるように、Image funcitonのprototypeにセッターゲッターを登録している。

という認識だが、間違っているかも。