タイマーは見た目以上のことを行うことができ、関数を定期的にトリガーできます。一方、ハッシュはキーと値のペアのコレクションです。ハッシュにまだ慣れていない場合でも、心配する必要はありません。今日は簡単に説明し、さらに読むためのリンクをいくつか提供します。 MooTools のすべての機能と同様に、使い方は非常に簡単で、一度正しく使用すると非常に便利です。
.periodical() 関数
基本的な使用法
このメソッドを使用するために必要な唯一のことは、関数が定期的にトリガーされるように、関数の最後に .periodical(); を追加することです。前と同様に、定義する必要があることがいくつかあります。まず、タイマーを使用する必要がある関数と、それを実行する頻度 (ミリ秒単位) を定義する必要があります。
参照コード:
var periodicalFunction = function() {
alert('again');
}
window.addEvent('domready', function() {
// 最後の数字はこの関数の時間間隔を決定しますトリガーされる単位はミリ秒です。
var periodicalFunctionVar = periodicalFunction.periodical(100)
});
組み込みの .bind() メソッド
.periodical( ) メソッドには、2 番目のパラメーターを自動的にバインドできる非常に優れた機能が含まれています。たとえば、domready の外部からパラメータを渡したい場合は、それを 2 番目のパラメータとして渡すだけで、定期的にトリガーする関数にバインドできます。
参照コード:
window.addEvent ('domready ', function() {
// 変数に値を割り当てます
var passVar = $('elementID');
// periodicalFunction は "this" を使用して "passedVar" を参照できるようになりました"
var periodicalFunctionVar = periodicalFunction.periodical(100, PassedVar);
});
定期的にトリガーされる関数を停止します
$clear()
定期的にトリガーされる関数 (上記と同様) を停止したい場合は、非常に簡単に使用できる $clear() メソッドを使用できます。
参照コード: [コードをコピー] [コードを保存]
// タイマー関数を使用したタイマー変数を渡します
$clear(periodicalFunctionVar);
コード例
これまでに学習した内容をすべて接続します。以前に学習したこと (およびまだ学習していないこと) を使用してタイマーを作成します。まず、タイマー HTML ページを作成します。開始ボタン、停止ボタン、リセット ボタンも必要です。さらに、時間の経過とともに長くなるバーを作成します。最後に、現在の経過時間を表示する場所が必要です。
参照コード:
<ボタンid=" timer_start">start
>
0 >コードは次のとおりです:
var timerFunction = 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() {
// これは単純なハッシュ オブジェクトです
// 1 つのキーと値のペア (キー/値のペア)
var currentCounter = new Hash({counter: 0});
// タイマーを初期化し、ハッシュ変数を渡してバインドします
var simpleTimer = timerFunction.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("click", function (){
// リセット ボタンは最初にタイマーをクリアします
$clear(simpleTimer);
// 次にカウンターを 0 に設定します
// これについては後で詳しく説明します
currentCounter 。 set('counter', 0);
//
$('timer_display').set('text', currentCounter.counter);
$('timer_bar').setStyle(' width' , 0);
});
});
ハッシュの作成
上記の例では、今まで見たことがない。まず、ハッシュを使用しました。ハッシュはキーと値のペアのコレクションであり、多くのオブジェクトを含む配列に似ていますが、これらの各オブジェクトには属性が 1 つだけあります。まずハッシュの作成方法を見てみましょう:
リファレンス コード:
コードをコピー
'secondKey': 0
});キーを変更するには、キーを左側に置き、値を右側に置きます (ハッシュに精通している人を除いて、ここではハッシュに関する最も基本的な事項のいくつかについてのみ説明し、ストレージ関数について説明します)将来的にはハッシュ化されます）。いずれにせよ、このようなシステムを使用することには多くの利点があります。まず、複数のコレクションを 1 つのオブジェクトに保存できるため、複雑なデータを整理するためのアクセスがはるかに簡単になります。
.set() メソッドと .get() メソッド
ハッシュではおなじみの .set() メソッドと .get() メソッドも使用できます。設定する必要がある場合は、キーを宣言してから、設定する値を宣言します。取得する必要がある場合は、取得したいキーを宣言するだけです。それはとても簡単です。
参照コード:
コードをコピー
コードは次のとおりです:
hash.key 名を参照して値を取得できます:
参照コード:
コードをコピー
コードは次のとおりです。
.extend() メソッドに追加します。 .extend(); メソッドを通じて追加できます。1 つ以上の新しいキーと値のペアがハッシュに収集されます。まず、新しいキーと値のペアのオブジェクトを作成する必要があります。
参照コード:
コードをコピー
コードは次のとおりです:
このセットを既存のハッシュに追加する場合は、.extend(); メソッドを使用してハッシュを拡張するだけです:
参照コード:
//hashVar には genericObject 内のすべてのキーと値のペアが含まれます
hashVar.extend(genericObject) ;
注: 繰り返されたキーは後続の設定によって上書きされます。したがって、元のハッシュに「firstKey」:「letterA」のペアがあり、そのペア「firstKey」:「letterB」を拡張すると、ハッシュの読み取り結果は「firstKey」:「letterB」になります。 」。
2 つのハッシュを結合する
.combine(); メソッド
このメソッドを使用すると、重複するキーがある場合、元の値が保持されます。残りは .extend() メソッドと同じです。
ハッシュからキーと値のペアを削除する
.erase() メソッド
このメソッドはすでに一度見たことがあります。期待どおりに機能します。ハッシュを宣言し、最後に .erase(); を追加し、最後に括弧内に「キー」を入れます。
参照コード:
hashVar.erase ('firstKey ');
ハッシュと .each() メソッド
ハッシュを走査するとき、走査関数は次のようになります。 「value」は最初の引数として渡され、「key」は 2 番目の引数として渡されます。これは、配列で .each を使用する場合と同じであり、各「item」）を最初のパラメータとして受け取ります。
参照コード:
hashVar.each (function( value, key) {
// これにより、ハッシュ内のキーと値のペアごとにダイアログ ボックスが表示されます
alert(key ":" value);
});
さらに詳しく
これまでのところ、ハッシュについて説明する必要があるのはこれだけです。私たちはこの一連のチュートリアルでさらに深く学んでいくので、将来的にはハッシュのさらに多くの関数について話す機会が見つかるでしょう。ただし、現時点では、初心者の場合は、ハッシュの基本的な概念を理解してもらいたいと考えています。すぐにクラスについて話します。そのとき、すべてがつながります。また、ドキュメント
のハッシュに関するセクション もお読みください。
開始するために必要なものがすべて入った zip パッケージをダウンロードします
MooTools 1.2 のコア ライブラリ、上記の例、外部 JavaScript ファイル、単純な HTML ページ、および CSS ファイルが含まれています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
