Mootools 1.2 튜토리얼(21) - 클래스(2)_Mootools

Fdream 참고: 원문에 누락된 부분이 있는 것 같아서, 제가 직접 가져가서 다음 문단과 BaseClass 코드를 추가했습니다.
오늘 튜토리얼에서는 MooTools의 클래스 구현과 상속(확장)에 대해 주로 배워보겠습니다. 구현과 상속을 통해 동일한 메서드를 다시 선언하고 구현할 필요 없이 하위 클래스에서 부모 클래스의 메서드를 사용할 수 있습니다. MooTools의 Class 클래스를 사용하면 이 작업을 쉽게 수행할 수 있습니다. 먼저 기본 클래스를 정의합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var BaseClass = new Class( {
// testFunction 메소드 정의
// 이 메소드는 대화 상자를 표시합니다
testFunction: function(){
alert('이 함수는 BaseClass에 정의되어 있습니다');
}
});

이제 기본 클래스가 있으므로 이를 구현하는 새 클래스를 만들어 전체 기능을 사용할 수 있습니다. 아래 예에서 새 클래스는 기본 클래스인 BaseClass를 구현하는 것 외에는 아무 작업도 수행하지 않습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 생성 ImplementingClass의 클래스
var ImplementingClass = new Class({
// 내가 한 일은 Baseclass
Implements : BaseClass
}를 구현하는 것뿐이었습니다.

이제 우리는 ImplementingClass의 인스턴스를 생성하고 BaseClass에 정의된 메서드를 사용할 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var deco_one = function() {
// ImplementingClass 인스턴스 생성
var test_class = new ImplementingClass();
// BaseClass에 정의된 testFunction 호출
test_class.testFunction()}

demo_one()
기본 클래스의 변수 및 초기화 함수(생성자)를 사용하여 동일한 작업을 수행할 수도 있습니다. 구현 클래스(기본 클래스를 구현하는 클래스)에서 선언하면 기본 클래스에서 정의한 모든 내용이 구현 클래스로 전송됩니다.
참고: 이제부터 아래의 모든 예제에서는 다음 버전의 BaseClass를 사용합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var BaseClass = new Class( {
// 이 클래스의 inputVariable 변수에 매개변수 할당
initialize: function(input){
this.inputVariable = input;
},
// 값 표시 변수 inputVariable
testFunction : function(){
alert('BaseClass.testFunction() : ' this.inputVariable);
},
// this의 모든 인스턴스에 대한 내부 변수를 정의합니다. class
DefinedVariable : "Defined in BaseClass",
});
var ImplementingClass = new Class({
// 반복:
// 여기서 하는 일은 BaseClass를 구현하는 것뿐입니다
구현 : BaseClass
});

다음 예제에서는 초기화, 함수 호출 및 변수가 구현 클래스에 속한 것처럼 액세스할 수 있음을 보여줍니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var deco_two = function() {
// ImplementingClass 인스턴스 생성
var test_class = new ImplementingClass('입력 값입니다')
// testFunction() 호출(BaseClass에 정의됨)
test_class. testFunction ();
// DefinedVariable 변수의 값 표시
alert('test_class.testVariable : ' test_class.definitionVariable)
}

demo_two()
클래스를 구현한 후에는 구현 클래스 정의에 원하는 기능을 추가할 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var ImplementingClass = new Class( {
Implements : BaseClass,
// 다음 함수는 BaseClass
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('This function은 BaseClass에도 정의되어 있습니다');
},
// 다음 중 어느 것도 BaseClass에 정의되어 있지 않습니다.
anotherDefinedVariable: "Also Defined in ImplementingClass",
anotherTestFunction: function(){
alert('이 함수는 ImplementingClass에 정의되어 있습니다.')
}
});
새 함수와 변수를 추가한 것처럼 구현 클래스에서 testFunction과 DefinedVariable을 다시 정의했다는 점에 유의하세요. 특별 참고 사항: 기본 클래스에 정의된 구현 클래스에서 함수나 변수를 정의하려는 경우 기본 클래스의 정의가 구현 클래스의 정의를 대체합니다. 이해가 안 되시면 아래 예시를 보시면 됩니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var 데모_세 = function() {
// ImplementingClass 인스턴스 생성
var test_class = new ImplementingClass('입력 값입니다')
// (BaseClass에 정의된 메서드 실행)
test_class.testFunction ();
// DefinedVariable 변수의 값 표시 (BaseClass에 정의된 값)
alert('test_class.testVariable : ' test_class.definatedVariable)
// (ImplementingClass에 정의된 메소드)
test_class.anotherTestFunction();
// anotherDefinedVariable(ImplementingClass에 정의된 값)의 값을 표시합니다.
alert('test_class.anotherDefinedVariable : ' test_class.anotherDefinedVariable)

데모_세()
확장(Extensions)
기본 클래스에 정의된 메서드와 변수를 재정의하려면 Extends를 사용하면 됩니다. 위 코드에서 "Implements"를 "Extends"로 바꾸면 됩니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var ExtendingClass = new Class( {
// 여기에서는 Implements 대신 Extends가 사용됩니다.
Extends : BaseClass,
// 다음은 모두 BaseClass에 정의되어 있습니다.
// 하지만 Implements / / 이는 BaseClass의 정의를 재정의합니다.
defined in ImplementingClass",
testFunction: function(){
alert('이 함수는 BaseClass에도 정의되어 있습니다.'); }
});
var deco_four = function(){
// ImplementingClass 인스턴스 생성
var test_class = new ExtendingClass('입력 값입니다.')
// 호출 testFunction( ) (BaseClass 및 ExtendingClass 모두에 정의됨)
test_class.testFunction();
// DefinedVariable 변수의 값 표시(BaseClass 및 ExtendingClass 모두에 정의됨)
alert('test_class.definitionVariable: ' test_class.defineVariable);
}


demo_four()
extend를 사용하는 또 다른 유용한 기능은 기본 클래스의 초기화 방법을 재정의하는 기능을 제공한다는 것입니다. 기본 클래스에서 초기화 메서드를 호출합니다. 따라서 기본 클래스에 다음과 같은 초기화 메서드를 정의하면

참조 코드:

코드 복사 코드는 다음과 같습니다. initialize : function(){

alert('base class');

}


그런 다음 확장에 다음 초기화 방법이 정의됩니다. class 를 입력하면 각각 "기본 클래스"와 "확장 클래스"를 표시하는 두 개의 프롬프트가 나타납니다.
참조 코드:

코드 복사 코드는 다음과 같습니다. 초기화: 기능 (){

// 상위 클래스의 생성자 호출

this.parent()
alert('extending class')
}


상위 클래스의 초기화 함수 매개변수가 필요합니다. 이 초기화 함수에 동일한 입력 매개변수가 사용되고 상위 클래스의 생성자에 전달되는지 확인하세요. 아래 예에서는 입력 값을 지정하지 않았으며 이를 상위 클래스의 생성자에 전달하기만 하면 자동으로 처리됩니다.
참조 코드:

코드 복사 코드는 다음과 같습니다. var ExtendingClass = new Class( {

// 반복:

Extends: BaseClass,
initialize: function(input){
// this.parent를 호출하여 상위 클래스를 실행하는 대신 확장 메서드를 사용합니다. 초기화 메서드
this.parent(input);
// 이렇게 하면 부모 클래스 메서드를 완전히 재정의하지 않고도 초기화 메서드에서 다른 작업을 수행할 수 있습니다.
this.otherVariable = " Original 입력 내용: " input;
}
});
var deco_five = function(){
// 확장 클래스 인스턴스 생성
var test_class = new ExtendingClass('이것이 입력입니다. value');// testFunction 호출
test_class.testFunction();
// otherVariable 값 표시
alert("test_class.otherVariable : " test_class.otherVariable); }


demo_five()
.implement() 메서드
구현 및 확장을 사용하여 클래스 정의를 확장할 수 있을 뿐만 아니라 원래 클래스를 사용하여 한 번에 하나씩 기능을 추가할 수도 있습니다. 다음 예제에서는 간단한 계산기 클래스(계산기)를 사용하겠습니다. 이 클래스를 정의할 때 두 숫자를 더하는 함수와 두 숫자를 빼는 함수 하나만 지정했습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var Calculator = new Class( {
// 초기화 중 두 개의 숫자 지정
initialize: function(first_number, second_number){
this.first = first_number;
this.second = second_number; / 두 개의 숫자를 더하고
// 결과를 반환합니다
add : function(){
result = this.first this.second
alert(result)},
// 두 숫자를 빼고
// 결과를 반환합니다
subtract: function(){
result = this.first - this.second
alert(result)
});


단순히 숫자를 더하거나 빼는 것이라면 괜찮을 것 같지만, 숫자를 곱하고 싶다면 어떻게 해야 할까요? .implement(); 메서드를 사용하면 마치 Calculator 클래스를 기반으로 다른 클래스를 만든 것처럼 이 클래스에 기능을 추가할 수 있습니다.
참조 코드:

코드 복사

코드는 다음과 같습니다. var deco_six = function() { // Calculator 클래스에 대해

// 구현하고

Calculator.implement({
// 두 숫자를 곱하고
// 결과를 반환합니다
multiply: function() {
result = this.first * this.second;
alert(result);
}
})
// 계산기 클래스 인스턴스 만들기
var myCalculator = new Calculator (100, 50);
// 곱셈 메소드 호출
myCalculator.multiply()
}


demo_six()
첫 번째 부분 클래스 튜토리얼에서는 print_r 함수를 사용하여 자바스크립트를 디버깅합니다. 구현 메소드를 사용하면 클래스의 변수 값을 매우 쉽게 인쇄할 수 있습니다. 계산기에서 이 메소드를 구현하기만 하면 됩니다.
참조 코드:

코드 복사

코드는 다음과 같습니다. var deco_seven = function() { // Calculator 클래스에 대한 메서드 구현

// 이 클래스의 내용을 인쇄하는 데 사용됨

Calculator.implement({
show_class : function(){
alert (print_r(this , true));
}
});
// 계산기 클래스 인스턴스 생성
var myCalculator(100, 50)// 표시 클래스 세부사항
myCalculator.show_class();
}


demo_seven()
코드 예시
매우 간결하지만 상대적으로 간단한 계산기 클래스에는 적합하지 않습니다. . 특히 유용한 기능입니다. 그러나 MooTools의 대부분의 객체는 동일한 방식으로 생성된 클래스이므로 이 방법을 사용하여 MooTools 클래스를 확장하여 더 많은 기능을 제공할 수 있습니다. 다음 예제에서는 보려는 HTML의 콘텐츠 구조를 표시할 수 있는 함수를 구현합니다. 이 기능은 이제 상호 작용하는 모든 HTML 요소에 자동으로 추가되므로 showStructure 요소에 대한 전체 설명을 요소에 추가할 수 있습니다.
참조 코드:

코드 복사

코드는 다음과 같습니다. var deco_eight = function() { Element.implement({ showStructure : function(){

var 구조 = '

' print_r(this, true) '

';

// 열기 팝업 창
newWindow = window.open('','Element Debug','height=600,width=600,scrollbars=yes')
//팝업에 내용 쓰기 window
newWindow.document.write(구조);
}
})
$('demo_eight').showStructure(); 참고: 이 예제를 올바르게 표시하려면 먼저 이 페이지에 대한 팝업 창을 허용해야 합니다.

자세히 알아보기

시작하는 데 필요한 모든 것이 포함된 zip 패키지를 다운로드하세요.

MooTools 수업 문서

MooTools 클래스를 더 잘 활용하는 방법에 대한 정말 좋은 토론