JavaScript模組化

by on # javascript

Code

<script>
$('#btn1').click(function () {
    module1.m1();
    //console.log(module1._count);//物件方法才能讀取
});
$('#btn2').click(function () {
    module1.m2();
});

$('#btn3').click(function () {
    module1.m3();
});

//1.物件方法
//var module1 = new Object({
//    _count : 0,
//    m1 : function () {
//        console.log('m1');
//    },
//    m2 : function () {
//        console.log('m2');
//    }
//});

//2.立即執行函數
var module1 = (function () {
    var _count = 0;
    var m1 = function () {
        _count += 1;
        console.log('m1');
        $('#test').append('親,你點到俺 ' + _count + ' 次了<br>');
    };
    var m2 = function () {
        console.log('m2');
        $('#test').append('俺知道你點了 m1 ' + _count + '次了<br>');
    };

    return {
        m1: m1,
        m2: m2
    };
})();

//3.擴充(Augmentation):增加方法到同一個函數
var module1 = (function (mod) {
    mod.m3 = function () {
        console.log('m3');
        $('#test').append('你點了 m3<br>')
    };

    return mod;
})(module1);
</script>

下面我在CodePen有做一個範例,可參考。

參考資料

javascript, module
comments powered by Disqus