Mootools 1.2 튜토리얼 클래스 (1)_Mootools

간단히 말해서, 클래스는 특정 기능을 구현하기 위해 이러한 변수에 대해 작동하는 변수 및 함수 모음을 포함하는 컨테이너입니다. 대규모 프로젝트에서 수업은 매우 유용할 수 있습니다.
변수
이전 시리즈에서는 해시 객체에서 키/값 쌍을 사용하는 방법을 배웠습니다. 따라서 다음 예에서는 매우 친숙해 보일 수 있는 일부 변수만 포함하는 클래스를 만들었습니다. 당신:
참조 코드:

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

/ / class_one이라는 클래스 생성
// 두 개의 내부 변수 포함
var Class_one = new Class({
variable_one : "내가 첫 번째",
variable_two : "나는 두 번째"
});

마찬가지로 비슷한 방식으로 해시의 변수에 액세스할 수 있습니다. 아래 코드에서는 위에서 정의한 Class_one 클래스의 인스턴스를 만듭니다.
참조 코드:

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

var run_demo_one = function() {
// Demo_1이라는 Class_one 클래스의 인스턴스를 생성합니다.
var 데모_1 = new Class_one()
// 데모_1에 변수를 표시합니다.
alert( deco_1.variable_one); 🎜> Alert( 데모_1.variable_two );
}

메서드/함수
메서드는 지정된 클래스의 함수를 참조합니다(일반인의 용어로는 클래스의 함수를 호출함). 메소드, 이름만 변경함). 이러한 메서드는 이 클래스의 인스턴스를 통해 호출되어야 하며 클래스 자체에서는 호출할 수 없습니다. 변수를 정의하는 것과 마찬가지로 메서드를 정의할 수 있습니다. 차이점은 메서드에 정적 값을 할당하고 익명 함수를 할당해야 한다는 것입니다.
참조 코드:

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

var Class_two = new Class({
variable_one : "내가 먼저입니다",
Variable_two : " 저는 둘째입니다",
function_one : function(){
alert('첫 번째 값 : ' this.variable_one)
},
function_two : function(){
Alert(' 두 번째 값 : ' this.variable_two);
}
});

위 예에서 this 키워드 사용에 주의하세요. 위 메소드에서 동작하는 변수는 모두 클래스 내부의 변수이므로 this 키워드를 사용하여 해당 변수에 접근해야 합니다. 그렇지 않으면 정의되지 않은 값만 얻게 됩니다.
참조 코드:

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

// 정답
Working_method : function(){
alert('첫 번째 값 : ' this.variable_one)
},
// Error
broken_method : function(){
alert(' 두 번째 값 : 'variable_two);
}

새로 생성된 클래스에서 메서드를 호출하는 것은 해당 클래스의 변수에 액세스하는 것과 같습니다.
참조 코드:

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

var run_demo_2 = function() {
// 클래스 인스턴스화 class_two
var deco_2 = new Class_two()
// function_one 호출
demo_2.function_one()// function_two 호출
데모_2.function_two();
}


초기화 방법

클래스 객체의 초기화 옵션을 사용하면 클래스에 대한 일부 초기화 작업을 수행할 수 있으며 일부 사용자를 처리할 수도 있습니다. 설정 옵션 및 변수. (Fdream 참고사항: 사실 이는 클래스의 초기화 메소드와 동일합니다.) 메소드처럼 정의할 수 있습니다:
참조 코드:

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

var Myclass = new Class({

// 하나의 매개변수를 포함하는 초기화 방법 정의
initialize : function( user_input){
// 이 클래스에 속하는 변수를 생성하고
// 값을 할당합니다
// 값은 사용자가 전달한 값입니다
this.value = user_input;
}
} )


이 초기화를 통해 다른 옵션이나 동작을 변경할 수도 있습니다.

참조 코드:

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

var Myclass = new Class({
initialize : function(true_false_value){
if (true_false_value){
this.message = "이 메시지가 말하는 모든 내용은 사실입니다.";
}
else {
this.message = "이 메시지가 말하는 모든 내용은 거짓입니다.";
}
}
})
// 이는 myClass 인스턴스의 메시지 속성을 설정합니다. 다음 문자열
// "이 메시지가 말하는 모든 것은 사실입니다"
var myclass_instance = new Myclass(true)
// 이는 myClass 인스턴스의 메시지 속성을 다음 문자열로 설정합니다. 🎜>/ / "이 메시지가 말하는 모든 것은 거짓입니다."
var myclass_instance = new Myclass(false);

이 모든 것은 다른 변수나 메소드를 선언하지 않고도 작동합니다. 각 키-값 쌍 뒤에 있는 쉼표만 기억하세요. 쉼표를 놓치고 존재하지 않는 취약점을 추적하는 데 많은 시간을 소비하는 것은 정말 쉽습니다.
참조 코드:

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

var Class_two = new Class( {
// 이 클래스는 클래스 생성 시 실행됩니다
initialize : function(one, two, true_false_option){
this.variable_one = one;
this.variable_two = two ;
if (true_false_option){
this.boolean_option = "참으로 선택됨";
}
else {
this.boolean_option = "거짓으로 선택됨"
}
} ,
// 일부 메소드 정의
function_one : function(){
alert('첫 번째 값 : ' this.variable_one)
},
function_two : function(){
Alert(' 두 번째 값: ' this.variable_two);
}
});
var run_demo_3 = function(){
var deco_3 = new Class_two("첫 번째 인수", "두 번째 인수" );
demo_3.function_one();
demo_3.function_two();
}

옵션 함수 구현
클래스 생성 시 일부 변수를 설정합니다. 사용자가 초기 입력을 제공하지 않는 경우 기본값이 유용합니다. 초기화 방법에서 이러한 변수를 수동으로 설정하고, 각 입력을 확인하여 사용자가 해당 값을 제공했는지 확인한 다음 해당 기본값을 바꿀 수 있습니다. 또는 MooTools의 Class.extras에서 제공하는 옵션 클래스를 사용할 수도 있습니다.
클래스에 다른 키-값 쌍을 추가하는 것과 마찬가지로 클래스에 옵션 함수를 추가하는 것은 매우 간단합니다.
참조 코드:

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

var Myclass = new Class({
구현: 옵션
})

우선 옵션의 세부 사항을 구현하는 데 너무 걱정하지 마세요. 이후 튜토리얼에서 더 자세히 알아볼 것입니다. 이제 옵션이 포함된 클래스가 있으므로 기본 옵션 몇 가지를 정의하기만 하면 됩니다. 다른 모든 것과 마찬가지로 초기화해야 하는 키-값 쌍을 추가하기만 하면 됩니다. 단일 값을 정의하는 대신 다음과 같이 키-값 쌍 세트를 정의해야 합니다.
참조 코드:

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

var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Option",
option_two : "두 번째 옵션"
}
})

이제 이러한 기본 컬렉션이 있으므로 사용자가 이 클래스를 초기화할 때 이를 재정의할 수 있는 방법도 제공해야 합니다. 기본값. 초기화 함수에 새 코드 줄을 추가하기만 하면 나머지는 Options 클래스가 수행합니다.
참조 코드:

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

var Myclass = new Class({
Implements: Options,
options: {
option_one: "First 기본 옵션 ",
option_two : "두 번째 기본 옵션"
}
initialize: function(options){
this.setOptions(options);
}
})

이 작업이 완료되면 키-값 쌍 배열을 전달하여 기본 옵션을 재정의할 수 있습니다.
참조 코드:

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

// 모든 기본 옵션 재정의
var class_instance = new Myclass({
options_one : "첫 번째 옵션 재정의" ,
options_two : "두 번째 옵션 재정의"
});
// 기본 옵션 중 하나 재정의
var class_instance = new Myclass({
options_two : "두 번째 옵션 재정의"
})


초기화 함수의 setOptions 메소드에 주의하세요. 이는 클래스를 인스턴스화할 때 옵션을 설정할 수 있도록 Options 클래스에 제공되는 메서드입니다.
참조 코드:

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

var class_instance = new Myclass( );
// 첫 번째 옵션 설정
class_instance.setOptions({options_one : "Override First Option"})

옵션이 설정되면 통과할 수 있습니다. 방문할 수 있는 변수 옵션입니다.
참조 코드:

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

var class_instance = new Myclass( );
// 첫 번째 옵션 값 가져오기
var class_option = class_instance.options.options_one;
// 변수 class_option의 현재 값은 "첫 번째 기본 옵션"입니다

수업 내에서 이 옵션에 액세스하려면 다음 문을 사용하세요.
참조 코드:

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

var Myclass = new Class({
Implements: Options,
options: {
option_one : "첫 번째 기본 옵션",
option_two : " 두 번째 기본 옵션"
}
test : function(){
// this 키워드는
// 이 클래스를 참조하는 데 사용됩니다.
alert(this .option_two);
}
});
var class_instance = new Myclass()
// "두 번째 기본 옵션"이 표시된 대화 상자가 나타납니다.
class_instance.test() ;

이러한 항목을 클래스로 결합하면 다음과 같습니다.
참조 코드:

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

var Class_four = new Class({
Implements: Options,
options: {
option_one: "첫 번째 옵션의 기본값" ,
option_two : " 두 번째 옵션의 기본값",
},
initialize: function(options){
this.setOptions(options)
},
show_options: function (){
alert(this.options.option_one "n" this.options.option_two)
},
})
var run_demo_4 = 함수 ){
var 데모_4 = 신규 Class_four({
option_one : "새 값"
});
demo_4.show_options();
}
var run_demo_5 = function(){
var deco_5 = new Class_four( );
demo_5.show_options();
demo_5.setOptions({option_two : "새 값"})
demo_5.show_options(); class class_four
// new_option이라는 새 옵션을 지정합니다
var run_demo_6 = function(){
var deco_6 = new Class_four({new_option : "This is a new option"}); .show_options();
}


코드 및 예제
PHP에 익숙한 사람들은 아래 예제에서 show_options 메서드의 print_r() 함수를 인식할 수 있습니다.

참조 코드:

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

alert(print_r (this.options, true));

}


이것은 기본 JavaScript 메서드가 아니며 PHP2JS 프로젝트의 Kevin van Zonnveld의 작은 코드 조각입니다. PHP에 익숙하지 않은 사람들을 위해 print_r() 메소드는 배열에 있는 키-값 쌍의 형식화된 문자열을 제공합니다. 이는 스크립트를 디버깅하는 과정에서 매우 유용한 디버깅 도구입니다. 이 함수는 나중에 제공되는 다운로드 패키지에 자세한 코드가 포함되어 있으므로 테스트 및 연구에 사용하는 것이 좋습니다.
참조 코드:

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

var Class_five = new Class({
// 옵션을 사용했습니다
구현: 옵션,
// 기본 옵션 설정
options : {
option_one : "DEFAULT_1 ",
option_two : "DEFAULT_2",
},
// 초기화 함수 설정
// setOptions 메서드를 통해 옵션 설정
initialize : function(options){
this .setOptions(options);
},
// 옵션 배열 정보를 인쇄하는 데 사용되는 메서드
show_options: function(){
alert(print_r(this.options, true))
},
// 두 옵션의 값을 교환하려면 setOptions 메소드를 사용하세요
swap_options : function(){
this.setOptions({
option_one : this.options.option_two,
option_two : this.options.option_one
})
}
})
function 데모_7(){
var 데모_7 = new Class_five()
demo_7.show_options( ) ;
demo_7.setOptions({option_one : "새 값"})
demo_7.swap_options()
demo_7.show_options()

자세히 알아보기

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

MooTools 클래스 문서MooTools Class.extra 문서print_r() 참조