Mootools 1.2 타이머 및 해시 소개_Mootools

타이머는 보이는 것보다 더 많은 일을 할 수 있습니다. 즉, 주기적으로 기능을 트리거할 수 있습니다. 반면, 해시는 키/값 쌍의 모음입니다. 아직 해싱에 익숙하지 않더라도 걱정하지 마세요. 오늘 간단히 소개하고 추가 내용을 읽을 수 있는 링크를 제공하겠습니다. MooTools의 모든 기능과 마찬가지로 사용이 매우 간단하고 올바르게 사용하면 매우 유용합니다. 참조 코드:

코드 복사 코드는 다음과 같습니다. var periodicalFunction = function() {

alert('again');

}
window.addEvent('domready', function() {
// 끝에 있는 숫자는 이 함수의 시간 간격을 결정합니다. 트리거되는 단위(밀리초)
var periodicalFunctionVar = periodicalFunction. periodical(100);
})


내장된 .bind() 메서드
. periodical( ) 메소드에는 매우 유용한 기능이 포함되어 있습니다. 두 번째 매개변수를 자동으로 바인딩할 수 있습니다. 예를 들어, domready 외부에서 매개변수를 전달하려는 경우 이를 두 번째 매개변수로 전달하기만 하면 되며 주기적으로 트리거하려는 함수에 이를 바인딩할 수 있습니다.

참조 코드:

코드 복사 코드는 다음과 같습니다. window.addEvent ('domready', function() {

// 변수에 값 할당

var passVar = $('elementID');
// 이제 periodicalFunction은 "this"를 사용하여 "passedVar를 참조할 수 있습니다. "
var periodicalFunctionVar = periodicalFunction. periodical(100, passVar);
});


정기적으로 트리거되는 함수를 중지합니다.
$clear()

일단 초기화한 후 정기적으로 실행되는 함수 함수(위에서 했던 것처럼)를 중지하려면 $clear() 메서드를 사용하면 됩니다. 사용이 매우 간단합니다.
참조 코드: [코드 복사] [코드 저장]
// 타이머 함수를 사용한 타이머 변수를 전달합니다
$clear( periodicalFunctionVar)

코드 예시
이 모든 것을 연결하기 위해 지금까지 배운 내용을 사용합니다. 타이머를 생성하기 위해 이전에 배운 내용도 있고 아직 배우지 않은 내용도 있습니다. 먼저 타이머 HTML 페이지를 생성하고 시작 버튼, 중지 버튼, 재설정 버튼도 필요합니다. 또한 시간이 지남에 따라 더 길어지는 막대를 만들 예정입니다. 마지막으로 현재 경과 시간을 표시할 장소가 필요합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다. <버튼 id="timer_start">시작

일시 중지

reset >< div id="timper_bar_wrap">

0 >코드는 다음과 같습니다.

var timeFunction = function(){
// 이 함수가 호출될 때마다
// 변수 currentTime이 1씩 증가합니다
// 동시에 주의할 점 "this.counter"
// "this"는 해시입니다
// "counter"는 키입니다
var currentTime = this.counter
// 여기서는 다음과 같은 div의 콘텐츠를 변경합니다. 시간 표시
$('timer_display').set('text', currentTime)
// 시간 진행 표시줄을 쉽게 만들려면 여기에서 스타일 시트의 너비 속성을 변경하세요.
$('timer_bar ').setStyle ('width', currentTime);
}
window.addEvent('domready', function() {
// 이것은 간단한 해시 객체입니다
// 하나의 키-값 쌍(키/값 쌍)
var currentCounter = new Hash({counter: 0})
// 타이머를 초기화하고 해시 변수를 전달하고 바인딩합니다.
var simpleTimer = timeFunction. periodical( 100, currentCounter);// onload 시 타이머를 시작하고 싶지 않기 때문에
// 여기서 타이머를 중지해야 합니다
$clear(simpleTimer); >// 시작 버튼에 이벤트 추가
//여기에서 타이머를 다시 시작
$('timer_start').addEvent("click", function(){
simpleTimer =timerFunction. periodical( 100, currentCounter )
});
// 여기서 타이머를 지우고
// 시간 표시줄을 깜박이게 합니다
$('timer_stop').addEvent("click", function() {
$clear(simpleTimer)
$('timer_bar').highlight('#EFE02F')
})
$('timer_reset').addEvent("클릭", function (){
// 재설정 버튼은 먼저 타이머를 삭제합니다
$clear(simpleTimer)
// 그런 다음 카운터를 0으로 설정합니다
// 나중에 자세히 설명합니다
currentCounter . set('counter', 0);
//
$('timer_display').set('text', currentCounter.counter)
$('timer_bar').setStyle(' width' , 0);
});
});

해시 빠른 시작
해시 생성
한 번도 본 적이 없어요. 먼저 해싱을 사용했습니다. 해시는 키/값 쌍의 모음으로, 많은 객체를 포함하는 배열과 유사하지만 각 객체에는 하나의 속성만 있습니다. 먼저 해시를 생성하는 방법을 살펴보겠습니다.
참조 코드:

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

var hashVar = new Hash({

'firstKey': 0,
'secondKey': 0
})


키를 바꾸려면 왼쪽에 놓고, 오른쪽에 값을 넣습니다. (해싱에 익숙한 분들을 제외하면 해싱에 대해 가장 기본적인 것 몇 가지만 이야기하고, 저장 기능에 대해서만 이야기하겠습니다. 향후 해싱). 그럼에도 불구하고, 이와 같은 시스템을 사용하면 많은 이점이 있습니다. 첫째, 하나의 개체에 여러 컬렉션을 저장할 수 있으며, 복잡한 데이터를 구성할 때 액세스가 훨씬 쉬워집니다.

.set() 메서드 및 .get() 메서드
해시에서는 친숙한 .set() 및 .get() 메서드를 사용할 수도 있습니다. 설정해야 할 경우 키를 선언한 다음 설정하려는 값을 선언합니다. 그것을 얻어야 할 때, 얻고 싶은 키를 선언하기만 하면 됩니다. 그렇게 간단합니다.
참조 코드:

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

// 여전히 위의 해시를 사용합니다

// 여기서는 firstKey 값을 200으로 설정합니다.
hashVar.set('firstKey', 200)
// 여기서는 firstKey 값을 얻습니다. 현재 값은 200입니다. 🎜>var hashValue = hashVar .get('firstKey');


hash.key 이름을 참조하여 값을 얻을 수 있습니다:
참조 코드:

코드 복사 코드는 다음과 같습니다. var hashValue = hashVar.firstKey

// 위와 같습니다. 아래의

var hashValue = hashVar .get('firstKey')


해시
.extend() 메소드에 새 키-값 쌍을 추가합니다. .extend() 메소드를 통해 추가할 수 있습니다. 하나 이상의 새로운 키/값 쌍이 해시로 수집됩니다. 먼저, 새로운 키-값 쌍 객체를 생성해야 합니다.

참조 코드:




코드 복사

코드는 다음과 같습니다. // 일반 객체입니다 // 키/값 쌍이 포함되어 있습니다

// 그러나 해시 함수는 없습니다

var genericObject = {
'third': 450,
'fourth' : 89
};


이 세트를 기존 해시에 추가하려면 .extend() 메서드만 사용하여 해시를 확장하면 됩니다.
참조 코드:

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

//이제 hashVar에는 genericObject의 모든 키-값 쌍이 포함됩니다.
hashVar.extend(genericObject) ;

참고: 반복되는 키는 이후 설정으로 덮어쓰여집니다. 따라서 원래 해시에 "firstKey":"letterA" 쌍이 있고 "firstKey":"letterB" 쌍을 확장하면 해시 읽기 결과는 "firstKey":"letterB가 됩니다. ".
두 개의 해시 병합
.combine(); 메서드
이 메서드를 사용하면 중복된 키가 있는 경우 원래 값이 유지됩니다. 나머지는 .extend() 메서드와 동일합니다.
해시에서 키-값 쌍 삭제
.erase() 메소드
이 메소드는 이미 한 번 본 적이 있습니다. 예상한 대로 작동합니다. 해시를 선언한 다음 끝에 .erase();를 추가하고 마지막으로 "키"를 괄호 안에 넣습니다.
참조 코드:

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

hashVar.erase ('firstKey');

해시 및 .each() 메서드
해시와 .each() 메서드 사이에는 또 다른 특별한 관계가 있습니다. "값"은 첫 번째 인수로 전달되고 "키"는 두 번째 인수로 전달됩니다. 이는 각 "항목"을 첫 번째 매개변수로 사용하는 배열에서 .each를 사용할 때와 동일합니다.
참조 코드:

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

hashVar.each (function( value, key) {
// 해시
alert(key ":" value);
})의 각 키-값 쌍에 대한 대화 상자가 나타납니다.

자세히 알아보기

지금까지 해싱에 관해 이야기한 것은 이것이 전부입니다. 이 튜토리얼 시리즈에서 더 깊이 배울 것이므로 앞으로 해싱의 더 많은 기능에 대해 이야기할 기회를 찾을 것입니다. 하지만 지금은 초보자라면 해싱에 대한 기본적인 아이디어만 갖췄으면 합니다. 우리는 곧 수업에 대해 이야기할 것이고, 그때 모든 것이 연결될 것입니다. 또한 문서

에서 해싱에 관한 섹션 을 읽어보세요.

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

MooTools 1.2의 핵심 라이브러리, 위의 예, 외부 JavaScript 파일, 간단한 HTML 페이지 및 CSS 파일이 포함됩니다.