javascript模块化编程思维学习（一）入门

最近读《javascript核心开发技术解密》，文中大篇幅强调了模块化思维的重要性，很受教。

下面借用作者的小例子，进行简单描述下这个重要的编程思维：

//管理全局状态的模块
    var module_status = (function(){
        var status = {
            number:0,
            color:null
        }
        var get = function(prop){
            return status[prop];
        }
        var set = function(prop,value){
            status[prop] = value;
        }
        return {
            set:set,
            get:get
        }
    })();



    //负责颜色变化模块
    var module_color = (function(){

        //引入上个模块
        var state = module_status;
        var colors = ["orange","#ccc","pink"];
        function render(){
            var color = colors[state.get('number') % 3];
            document.body.style.backgroundColor = color;
        }
        return {
            render:render
        }
    })();

    //显示页面颜色number的模块，用于直观对比
    var module_context = (function(){
        var state = module_status;
        function render(){
            document.body.innerHTML = 'this Number is ' + state.get('number');
        }
        return {
            render:render
        }
    })();


    //建立主模块
    var module_main = (function(){
        var state = module_status;
        var color = module_color;
        var context = module_context;

        setInterval(function(){
            var newNumber = state.get('number') + 1;
            state.set('number',newNumber);
            color.render();
            context.render();
            console.log(1111);
        },500);
    })();