javascript モジュールパターン：モジュールの公開サンプルと作ってみて感じたこと。 #JavaScript

できるだけグローバル空間を汚染したくない気持ちは分かるけど、ある程度はしょうがない(もうどうしようもない)部分も出てくる。
自分で設置できる部分に関してはきちんと名前空間を定義しておく。
もちろん実装したページに関してのドキュメントを残しておく。

var HogeHugaParty = HogeHugaParty || {}; //名前空間を定義

HogeHugaParty = (function () { //実際に呼び出す関数は、この中に含まれている。

    var ho  = "ﾎｰｵ"; //名前空間内でだけ使えるグローバル変数

    function sampleHoge (wao) {  //この関数を名前空間の外から呼び出す
        console.log(wao)
    }
    function sampleFuga  (gogo) {  //この関数を名前空間の外から呼び出す
        console.log(uoooo(gogo))
    }


    //ヘルパー関数　のちのち別のjsファイルに移動。
    function uoooo (gogo) {  //外から呼び出さなくてもいい関数
        var say  = "せい";
        return gogo + say + ho;
    }

    //公開する関数
    return {
        sampleHoge: sampleHoge,//呼び出す関数だけreturnする。
        sampleFuga: sampleFuga
    }
})();

HogeHugaParty.sampleFuga('エビバデ');
HogeHugaParty.sampleHoge('ゴーゴー');

・１つの関数の中では１つの仕事をさせる事を意識しておかないと、必ず混乱する。
・ヘルパー関数は、公開する関数に変化する可能性を考えておく。
　　┗webpackなど使わない時のヘルパー関数は、別の名前空間（jsファイル）を作っておくのがよい。
　　　同じjsファイルに書くと膨大な行数になってくるのでオススメしない。僕は移動した。

実装するHTMLファイル内に２つのjsを読み込んでおけばよい。
script type="text/javascript" src="helper_hogeHugaParty.js"
script type="text/javascript" src="hogeHugaParty.js"

↓↓使うとき。

//ヘルパー関数にも名前空間を作っている。
function sampleFuga  (gogo) {
    helper.log(helper.uoooo(gogo))
}

参考にさせていただいたqiita
https://qiita.com/kenju/items/a8a1009f5872a8b12568