Javascriptの書き方（モジュール・パターンとオブジェクト・リテラル？）

Question

Javascriptの書き方（モジュール・パターン）での派生質問となります。
これの続きとしてお読みいただければ幸いです。

下記のようなJavaScriptコードがあります。
func.js

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

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

Logoを大項目、pushを中分類として、その中にshowとhideという処理を
呼び出したい場合の書き方をご教示ください。

上記の例で言いますと、
・Logo.push().show();
と呼び出すと、「Push!!」と「Show!!」が交互に2回ずつ出力されます。
これを1回だけにしたいです。

・Logo.push.show();
というような呼び出し方を実現したいです。

よろしくお願いします。

Answer 1

前回の質問から飛んできました。

上記の例で言いますと、
・Logo.push().show();
と呼び出すと、「Push!!」と「Show!!」が交互に2回ずつ出力されます。
これを1回だけにしたいです。

凄く分かりにくいのですが、前回の質問でのやりとりから、「Logo.push().show()実行時に『Push!!』と『Show!!』が出てしまい、これを『Show!!』のみ出るようにしたい」ものであると解釈します。

/**
 * この質問は、以下の要件を求めるものと仮定します
 */

Logo.push();
// Push!!

Logo.push().show();
// Push!! <-出したくない
// Show!!

Logo.push().hide();
// Push!! <-出したくない
// Hide!!

コメントでも書いたとおり、これはLogo.push()を実行したうえで、その返り値にshowメソッドが含まれているためこうなってしまいます。

Logo.push().show();
// Push!!
// Show!!

/**
 * 上の記述は、以下の処理と同等です
 */

var Logo_push = Logo.push();
// Push!!
Logo_push.show();
// Show!!

/**
 * 一旦`Logo.push`を実行してしまうので、
 * どうしても中分類`Logo.push`の処理である「Push!!」が出てしまいます
 */

Logo.push()を実行せず、また記述を殆ど変えない方法として、Logo.pushのプロパティとしてshowメソッドを定義し、Logo.push.show()のように記述する方法があります。
これを実装したコードは以下になります。

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

    // _push関数(`Logo.push`)の返り値ではなく、_push関数そのものにshowとhideを定義する
    _push.show = _show;
    _push.hide = _hide;

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

これで、「Show!!」のみ出す事が可能になります。

Logo.push();
// Push!!

Logo.push.show();
// Show!!

Logo.push.hide();
// Hide!!

なお、このコードではLogo.push().show()のようには記述できません。

余談ですが、私の書いた現在のコードでは中分類であるLogo.pushと小分類であるLogo.push.showの処理を記述した関数名が、_pushと_showという同じような名前になってしまっています。

var Logo = (function () {
    function _push() { // 中分類の関数
        // `Logo.push()`実行時のコード
        console.log('Push!!');
    }
    function _show() { // 小分類の関数 …関数名で区別しずらく、分かりにくい
        // `Logo.push.show()`実行時のコード
        console.log('Show!!');
    }
    function _hide() { // 小分類の関数 …同上。分かりにくい
        // `Logo.push.hide()`実行時のコード
        console.log('Hide!!');
    }

    // _push関数(`Logo.push`)の返り値ではなく、_push関数そのものにshowとhideを定義する
    _push.show = _show;
    _push.hide = _hide;

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

分かりやすい関数名にした方がいいでしょう。
(この提案は、デザインパターンの一般論等ではなく、私の個人的意見です)

var Logo = (function () {
    function _push() { // 中分類の関数
        // `Logo.push()`実行時のコード
        console.log('Push!!');
    }
    function _push_show() { // 小分類の関数 …分かりやすい
        // `Logo.push.show()`実行時のコード
        console.log('Show!!');
    }
    function _push_hide() { // 小分類の関数 …分かりやすい
        // `Logo.push.hide()`実行時のコード
        console.log('Hide!!');
    }

    // _push関数(`Logo.push`)の返り値ではなく、_push関数そのものにshowとhideを定義する
    _push.show = _push_show;
    _push.hide = _push_hide;

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

Comments

[sounisi5011]

前回の解答でいい忘れていましたが、私はJavaScriptのデザインパターンなどについては詳しくありません。
回答のコードは、JavaScriptのモジュール・パターンを実装したコードとして不適当である可能性があります。

[tampopopofu]

前回に引き続きありがとうございます！

本当に素晴らしい回答と補足説明ありがとうございます。
そして、質問が曖昧で申し訳ありません。
お陰様でスッキリと理解できました。

> _push関数(`Logo.push`)の返り値ではなく、_push関数そのものにshowとhideを定義する
これですね。このような理論的な考えまでに至らない自分の知識不足を実感しました。
なぜ、コンソールに同じものが2回も出力されるのかが、なんとなくでしか
分かっていませんでした。

sounisi5011さんの解説付きの回答で理解できました。
二度もご丁寧な回答ありがとうございました。

[tampopopofu]

言い忘れました。
関数名も分かりやすいほうを使用していきます。
すごく納得しましたし、今後のためにもです。

[tampopopofu]

修正して試しているところですが、どうも「Show!!」がコンソールに2回続けて出力されてしまっています。
クリックイベントで1回しか実行してないのにです。
まだ書き方の問題で何かあるのでしょうね。
ちょっと引き続き探っていきます。

[tampopopofu]

上記の
> 「Show!!」がコンソールに2回続けて出力
は、こちらのミスによるものです。
申し訳ありません。

まだ完全に把握はしておりませんが、恐らくテンプレートの関係で
JavaScriptが2回読み込まれ、クリックイベントも2回登録されているためだと思います。