자 바스 크 립 트 대상 에 대한 인식 분석

 
var obj = document.getElementById("name"); 
function clickMe() { 
alert(this.value); 
this.value += "!!!!"; 
alert(this.value); 
} 
var ActionBinder = function() {//      
} 
ActionBinder.prototype.registerDOM = function(doms) { 
this.doms = doms;//  doms 
} 
ActionBinder.prototype.registerAction = function(handlers) { 
this.handlers = handlers;//       
} 
ActionBinder.prototype.bind = function() { 
this.doms.onclick = this.handlers 
}//  doms    
var binder = new ActionBinder();//  ActionBinder         
binder.registerDOM(obj); 
binder.registerAction(clickMe); 
binder.bind();

먼저 js 로 쓴 대상 을 대상 으로 하 는 코드 를 만 들 고 Action Binder 의 클래스 를 만 듭 니 다.쓰기 도 자바 와 유사 합 니 다.js 는 html 의 dom 대상 을 바탕 으로 html 를 조작 하 는 내용 이기 때문에 클래스 에서 dom 을 등록 하 는 방법 registerDOM 을 정의 하고 prototype 으로 이 방법 을 원형 화하 여 호출 하기에 편리 합 니 다.또한 등록 이벤트 방법 registerAction 을 추가 하고 prototype 방법 으로 원형 화 합 니 다.마지막 으로 등 록 된 dom 과 등 록 된 이 벤트 를 원형 화 된 동작 bid 로 연결 하고 실행 합 니 다.그 다음 에 원시 적 인 js 코드 세 션:Code

 
<body> 
<script> 
document.onload= function(){ 
var obj = document.getElementById("name"); 
obj.onclick = function(){alert(this.value);} 
} 
</script> 
<input type="text" id="name" /> 
</body>

코드 도 필요 한 효 과 를 실현 했다.간단 한 응용 에 있어 위의 효 과 는 만족 할 수 있 지만 비교적 복잡 한 프로그램 에 대해 응용 하기 가 비교적 번 거 롭 고 코드 에 쓰 는 것 도 비교적 번거롭다.예 를 들 어 코드 세 션 Code

 
<body> 
<script> 
document.onload= function(){ 
obj1 = document.getElementById("name1"); 
obj2 = document.getElementById("name2"); 
obj3 = document.getElementById("name3"); 
obj1.onclick = function(){alert(this.value);} 
obj2.onclick = function(){alert(this.value);} 
obj3.onclick = function(){alert(this.value);} 
} 
</script> 
<input type="text" id="name1" value="111" /> 
<input type="text" id="name2" value="222" /> 
<input type="text" id="name3" value="333" /> 
</body>

나 Code

 
<body> 
<script> 
function clickMe(){alert(this.value);} 
</script> 
<input type="text" id="name1" value="111" onclick="return clickMe()" /> 
<input type="text" id="name2" value="222" onclick="return clickMe()" /> 
<input type="text" id="name3" value="333" onclick="return clickMe()" /> 
</body>

는 물론 위의 두 단락 코드 에 도 다른 간단 한 표기 법 이 있 고 전체적으로 보면 불필요 한 코드 가 많이 나타난다.대상 을 대상 으로 하 는 방법 으로 쓰 는 것 이 비교적 유연 하 다.예 를 들 어 Code

 
<body> 
<script> 
window.onload = function() { 
var objs = document.getElementsByTagName("input"); 
function clickMe() { 
alert(this.value); 
} 
var ActionBinder = function() {//      
} 
ActionBinder.prototype.registerDOM = function(doms) { 
this.doms = doms;//  doms 
} 
ActionBinder.prototype.registerAction = function(handlers) { 
this.handlers = handlers;//       
} 
ActionBinder.prototype.bind = function() { 
this.doms.onclick = this.handlers 
}//  doms    
for (var i=0;i<objs.length;i++ ){ 
var binder = new ActionBinder();//  ActionBinder         
binder.registerDOM(objs[i]); 
binder.registerAction(clickMe); 
binder.bind(); 
}; 
} 
</script> 
<input type="text" id="name" value="111"/> 
<input type="text" id="name1" value="222"/> 
<input type="text" id="name2" value="333"/> 
</body>

는 불필요 한 코드 가 없 을 뿐만 아니 라 js 논리 적 으로 도 비교적 상쾌 하기 때문에 여러 사건 의 귀속 에 대해 아직 연구 가 필요 하 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Thymeleaf 의 일반 양식 제출 과 AJAX 제출

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

자 바스 크 립 트 대상 에 대한 인식 분석

좋은 웹페이지 즐겨찾기