(5) 컨트롤러 및 상태
16462 단어 컨트롤러
모듈 모드는 논리를 봉인하고 전역 명명 공간 오염을 피하는 좋은 방법으로 익명 함수도 할 수 있다.
익명 함수의 논리는 모두 패키지 안에서 실행되고 응용 중인 변수에 국부적인 작용역과 개인적인 운행 환경을 제공한다
(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');
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
SpringBoot의 사용자 정의 메모 구현 컨트롤러 액세스 횟수 제한 사례오늘은 SpringBoot에서 컨트롤러의 접근 횟수를 제한하는 주해를 사용자 정의하는 방법을 소개합니다. 웹에서 가장 자주 발생하는 것은 악성 URL을 이용하여 폭발 서버에 접근하는 것과 같은 공격입니다. 오늘은 사...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.