JavaScript

JavaScript 手軽にモジュール化する方法メモ

More than 1 year has passed since last update.

jsで手軽にモジュール化する方法のメモです。

名前空間を作ったり、
ちゃんとしたモジュールパターンの記事などはこちら
http://qiita.com/Im0_3/items/3d46f900aa4d4c5c3cde
http://qiita.com/KENJU/items/a8a1009f5872a8b12568

kissメソッド、
hugメソッドなどを持っている、
Loveというモジュールの例です。微妙ですが。

即時関数でくくって作ります。

module.js
var Love = (function(w, d){
    return{
        kiss:function(){
            console.log("キッスします");
        },
        hug:function(){
            console.log("ハグします");
        },
        // pタグの中身を「愛」に変更するメソッド
        changeTextLove:function(){
            var list = d.querySelectorAll('p');
            for(var i = 0; i<list.length; i++){
                list[i].innerHTML = "愛";
            }
        }
    };
})(window, window.document);

使い方は普通にモジュール化したjsを読み込んで、
Love.kiss();
Love.hug();
のように使います。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>モジュールの作り方コードメモ</title>
</head>
<body>
    <p></p>
    <p>初恋</p>
    <p>淡い恋</p>

    <!-- モジュール読み込み -->
    <script src="module.js"></script>

    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        Love.kiss(); // キッスします
        Love.hug(); // ハグします
        Love.changeTextLove();
    });
    </script>

</body>
</html>

以上。