JS를 처음 배우시는 분들은 자바스크립트의 객체지향적 성격에 대한 이해도를 분석해 보시고, 배워야 할 친구들이 참고하시면 좋을 것 같습니다. 다음과 같이 코드 코드를 복사합니다.
var obj = document.getElementById(이름);
함수 clickMe() {
경고(this.value);
this.value += !!!!;
경고(this.value);
}
var ActionBinder = function() {//클래스 정의
}
ActionBinder.prototype.registerDOM = 함수(doms) {
this.doms = doms;//doms 등록
}
ActionBinder.prototype.registerAction = 함수(핸들러) {
this.handlers = handlers;//액션 등록
}
ActionBinder.prototype.bind = 함수() {
this.doms.onclick = this.handlers
}//doms 액션 등록
var 바인더 = new ActionBinder();//ActionBinder 메소드에 따라 새 클래스 생성
바인더.레지스터DOM(obj);
바인더.registerAction(clickMe);
바인더.바인드();
먼저 js로 작성된 객체 지향 코드부터 시작하겠습니다. 작성 방법도 java와 유사합니다. js는 html의 내용을 조작하기 위해 html의 객체를 기반으로 하기 때문입니다. 클래스에 DOM을 등록하려면 pr을 사용하세요. ototype은 쉽게 호출할 수 있는 메소드를 프로토타입화합니다. 또한 이벤트 등록을 위한 메소드인 RegisterAction도 추가됩니다. 이 역시 프로토타입 메소드를 사용하여 프로토타입화되며, 마지막으로 등록된 DOM과 등록된 이벤트를 함께 바인딩하는 데 사용됩니다. 실행하다.
원본 js 코드 조각은 다음과 같습니다.
암호
다음과 같이 코드 코드를 복사합니다.
<본문>
<스크립트>
document.onload=함수(){
var obj = document.getElementById(이름);
obj.onclick = function(){alert(this.value);}
}
</script>
<입력 유형=텍스트 ID=이름 />
</body>
코드는 또한 원하는 효과를 얻습니다. 일부 간단한 응용 프로그램의 경우 위의 효과가 만족될 수 있지만 일부 더 복잡한 프로그램의 경우 적용하기가 더 까다롭고 코드 조각과 같은 코드를 작성하기가 더 번거롭습니다.
암호
다음과 같이 코드 코드를 복사합니다.
<본문>
<스크립트>
document.onload=함수(){
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>
<입력 유형=텍스트 ID=이름1 값=111 />
<입력 유형=텍스트 ID=이름2 값=222 />
<입력 유형=텍스트 ID=이름3 값=333 />
</body>
또는
암호
다음과 같이 코드 코드를 복사합니다.
<본문>
<스크립트>
함수 clickMe(){alert(this.value);}
</script>
<입력 유형=텍스트 id=name1 값=111 onclick=return clickMe() />
<입력 유형=텍스트 id=name2 값=222 onclick=return clickMe() />
<입력 유형=텍스트 id=name3 값=333 onclick=return clickMe() />
</body>
물론 위의 두 가지 코드를 작성하는 다른 더 간단한 방법이 있지만 전반적으로 여전히 중복되는 코드가 많이 있습니다.
다음과 같은 객체 지향 방법으로 작성하는 것이 더 유연합니다.
암호
다음과 같이 코드 코드를 복사합니다.
<본문>
<스크립트>
window.onload = 함수() {
var objs = document.getElementsByTagName(입력);
함수 clickMe() {
경고(this.value);
}
var ActionBinder = function() {//클래스 정의
}
ActionBinder.prototype.registerDOM = 함수(doms) {
this.doms = doms;//doms 등록
}
ActionBinder.prototype.registerAction = 함수(핸들러) {
this.handlers = handlers;//액션 등록
}
ActionBinder.prototype.bind = 함수() {
this.doms.onclick = this.handlers
}//doms 액션 등록
for (var i=0;i<objs.length;i++){
var 바인더 = new ActionBinder();//ActionBinder 메소드에 따라 새 클래스 생성
바인더.registerDOM(objs[i]);
바인더.registerAction(clickMe);
바인더.바인드();
};
}
</script>
<입력 유형=텍스트 ID=이름 값=111/>
<입력 유형=텍스트 ID=이름1 값=222/>
<입력 유형=텍스트 ID=이름2 값=333/>
</body>
이렇게 하면 중복되는 코드가 없으며 js 로직이 비교적 명확해집니다. 여러 이벤트의 바인딩을 연구해야 합니다.