Javascriptの書き方（モジュール・パターン）

Question

Javascriptの書き方で、モジュール・パターンというものを知りました。
基本的な書き方は分かるのですが、下記を実現する書き方が分かりません。
そもそも実現できるものなのか分かりませんが、もし実現できるのであればご教示ください。

func.js

(function() {
    var Logo = (function() {
        function _push() {
            console.log('Push!!');
        }
        return {
            push: _push
        };
    }());

    $(document).ready(function() {
        $('#logo').on('click', function() {
            Logo.push();
        });
    });
}());

#logoがクリックされた時、コンソールに「Push!!」と表示されます。

実現したいのは、この「Logo.push();」の部分を
・Logo.push().show();
・Logo.push().hide();
のような、もう一段階層がある呼び方をしたいのです。

function _push()の内部に、function show()を記述したりしましたが、
エラーとなるばかりで実現できません。

どうかよろしくお願いします。

Answer 1

Logo.push().show();
Logo.push().hide();

このような記述を実現するためには、Logo.push()が以下のようなオブジェクトを返す必要があります。

{
    show: function () {
        // `Logo.push().show()`実行時のコード
    },
    hide: function () {
        // `Logo.push().hide()`実行時のコード
    }
}

モジュール・パターンに習って素直に記述すると、以下のようになります。

var Logo = (function () {
    function _push() {
        console.log('Push!!');

        function _show() {
            // `Logo.push().show()`実行時のコード
            console.log('Show!!');
        }
        function _hide() {
            // `Logo.push().hide()`実行時のコード
            console.log('Hide!!');
        }

        return {
            show: _show,
            hide: _hide
        };
    }

    return {
        push: _push
    };
}());

ただし、Logo.pushを実行するたび_showと_hideを定義し直すため、無駄があります。
_push関数と同じ位置に定義しても動作するので、以下のようにした方が良いでしょう。

var Logo = (function () {
    function _push() {
        console.log('Push!!');

        return {
            show: _show,
            hide: _hide
        };
    }
    function _show() {
        // `Logo.push().show()`実行時のコード
        console.log('Show!!');
    }
    function _hide() {
        // `Logo.push().hide()`実行時のコード
        console.log('Hide!!');
    }

    return {
        push: _push
    };
}());

以上のコードはいずれも動作確認済みです。

Comments

[tampopopofu]

早い！ありがとうございます！

非常に分かりやすいご回答ありがとうございます。
しかも修正案まで･･･。

>Logo.pushを実行するたび_showと_hideを定義し直すため･･･
この部分は知りませんでした。
確かに再定義されるのであれば無駄が生じますね。

例が悪くて申し訳ありませんが、処理をひと塊にしたくてああいう階層にしました。
イメージとしては、Logoという大項目、pushという中分類があり、その中のshowとhideの処理、という感じです。
しかし、無理やりこのような分類にする必要もないのかなと思い直しております。
ありがとうございました。

[sounisi5011]

> 例が悪くて申し訳ありませんが、処理をひと塊にしたくてああいう階層にしました。
> イメージとしては、Logoという大項目、pushという中分類があり、その中のshowとhideの処理、という感じです。

そういうことでしたら、`Logo.push().show()`ではなく`Logo.push.show()`で動作するようにした方が良いかもしれません。

というのも、現在の記述では`Logo.push()`を実行した後`Logo.push().show()`を実行するので、`Logo.push()`の処理が途中で実行されてしまいます。
このため今回のコードでも、`Logo.push().show()`を実行したら"Push!!"と"Show!!"の2つがコンソールに出てしまいます。
"Show!!"のみ出す、ということは出来ません。
中分類の処理が実行されてしまうのです。

もし、`Logo.push.show()`のような記述をするためのコードについて知りたい場合、別の質問として投稿してください。
見かけたら回答します。

[tampopopofu]

今、いろいろと試しておりますが、どうしても"Push!!"と"Show!!"が2回ずつ出力されます。
そうなんです、「Logo.push.show()`」で動作したいです。

すみません、別の質問として投稿しました。
見かけたらどうぞよろしくお願いします。