(5) 컨트롤러 및 상태

16462 단어 컨트롤러
1 모듈 모드
모듈 모드는 논리를 봉인하고 전역 명명 공간 오염을 피하는 좋은 방법으로 익명 함수도 할 수 있다.
익명 함수의 논리는 모두 패키지 안에서 실행되고 응용 중인 변수에 국부적인 작용역과 개인적인 운행 환경을 제공한다
 (function(){
        
    })();

2 글로벌 가져오기
모듈에 정의된 변수는 모두 국부 변수이기 때문에 전역 이름 공간에서는 접근할 수 없지만 전역 변수는 사용할 수 있습니다
(function($){

    })(jQuery);// jQuery

 
3 글로벌 내보내기
전역 내보내는 데 윈도우가 필요합니다.
 (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.toggle Class), 함께 보시면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');
    });

좋은 웹페이지 즐겨찾기