(5) 控制器和状态

1 模块模式

模块模式是用来封装逻辑并避免全局命名空间污染的好方法，匿名函数也可以做到。

在匿名函数的逻辑都在闭包里面运行，为应用中的变量提供了局部的作用域和私有的运行环境

 (function(){
        
    })();

2 全局导入

定义在模块里的变量都是局部变量，因此在全局命名空间中时无法访问他们的，然而全局变量仍都是可用的

(function($){

    })(jQuery);//导入jQuery

3 全局导出

全局导出需要用到window

 (function($,exports){
    exports.name = "Jackey Li";
    })(jQuery,window);//导入jQuery,导入的window，可使用作为导出变量

4 添加少量上下文

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/jquery-2.1.1.js"></script>
    <style>
        #view{
            width:600px; height: 600px; background: black;
        }
        .assets{width: 300px; height: 300px; background: white;}
    </style>
</head>
<body>
<div id="view">
    <div class="assets"></div>
</div>
</body>
<script>
    (function($,exports){
        var mod = {};
        mod.load = function(func){
            $($.proxy(func,this));
        };
        mod.load(function(){
           this.view = $("#view");
        });
        mod.assetClick = function(e){
            //处理点击
            console.log('ddd');
        };
        mod.load(function(){
            this.view.find(".assets").click(
                //$.proxy 代理的是assets的this，这句话的意思是将assetClick事件添加到.assets的dom上，这样就实现了click事件
                $.proxy(this.assetClick,this)
            );
        });
    })(jQuery,window);//导入jQuery,导入的window，可使用作为导出变量
</script>
</html>

(function($,exports){
    var mod = function(includes){
        if(includes)
            this.include(includes);
    };
    mod.fn = mod.prototype;
    mod.fn.proxy = function(func){
        return $.proxy(func,this);
    };
    mod.fn.load = function(func){
        $(this.proxy(func));
    };
    mod.fn.include = function(ob){
        $.extend(this,ob);
    };
    exports.Controller = mod;
})(jQuery,window);

(function($,Controller){
    var mod = new Controller;
    mod.toggleClass = function(e){
        console.log("ddd");
    };
    mod.load(function(){
        this.view = $("#view");
        this.view.mouseover('',this.proxy(this.toggleClass));
    });
})(jQuery,Controller);

下面做一些分析：

 mod.fn.proxy = function(func){
        return $.proxy(func,this);
    };

上面使用代理把func添加到mod原型里面，与下文的this.proxy(this.toggleClass)，一起看，可以知道this.proxy会把toggleClass放到this里面。

mod.fn.load = function(func){
        $(this.proxy(func));
    };

load这个function把返回来的function委托给jQuery对象

文档加载完后加载控制器

 var exports = this;
    (function($){
        var mod = {};
        mod.create = function(includes){
            var result = function(){
                this.init.apply(this,arguments);
            };
            result.fn = result.prototype;
            result.fn.init = function(){};
            result.proxy = function(func){
                return $.proxy(func,this);
            };

            result.fn.proxy = result.proxy;
            result.include = function(obj){
                $.extend(this.fn,obj);
            };
            result.extend = function(obj){
                $.extend(this,obj);
            };
            if(includes) result.include(includes);
            return result;
        };
        exports.Controller = mod;
        //Controller 是一个object，里面的create是一个function
    })(jQuery);

    jQuery(function($){
        //Controller.create({})，返回的是一个function，这个function的入口是init，
        //使用init这个function可以把参数都传到内部
        var ToggleView = Controller.create({
            init:function(view){
                this.view = $(view);
                this.view.mouseover('',this.proxy(this.toggleClass));
            },
           toggleClass:function(){
                console.log('dd');
            }
        });
    new ToggleView('#view');
    });