Javascript：OOP、プロトタイプ、クロージャー、「クラス」Timer.js

こんにちはプログラマー、初心者、卒業生、そしてすべてのシンパサイザー。 ご存知のように、個人的な経験だけでなく、何も知られていない。 主なものは、経験が有用であることです。 そして、この単純な考えに続いて、いくつかの便利なことを一度に行うことを提案したいと思います。

• 「人間の顔をしたOOP」というトピックについて話します。
• JavaScriptでプロトタイプを短時間で怒って処理してください！
• 「クロージャ」は、 貴重な毛皮だけでなく...電気ショックでもあることを思い出してください。
• javascriptでタイマークラスを記述します。これは、アニメーション、イベント、あらゆる機能を実行するイベントプランナーの一種です。
• 楽しんでください！

警告！ あなたが記事から楽しいものを期待していない場合...あなたは間違っています。 ユーモアのセンスが低い人は読む...さらにお勧め！ さあ、始めましょう...



執筆時点では（hello apocalyptic-glamorous 2012！）javascriptには実際のOOPはありませんが、オブジェクト指向プログラミングの基本原則を実装するためのトリックがあります。 この非常に興味深いトピックを発見したばかりの人のために、この方法の特異性を自分の言葉で説明します。

パート1。人間の顔をしたOOP。

簡単に説明すると、OOPはまったく神聖なマントラではありませんが、本質的には、アプリケーションの編成、コードの構造化、メソッドの集中化、およびエンティティを単一の階層ファミリに結合するための単なるテクニックです。 潜水艦と航空機の建造方法と同様に、野生生物の浮力と揮発性の経験を取り入れて、OOPアプリケーションはプログラムエンティティの認識を「生きている」オブジェクトとして使用し、実際の（オフライン-覚えていますか？）世界から私たちに知られている特性と特性を採用します。



つまり、独自のプロパティとメソッドを持つだけでなく、子孫を生成して進化させることができるエンティティが作成されます！ これは、拡張機能と呼ばれます。 注意深い親のように、オブジェクトは継承によってプロパティを転送するか、別の親エンティティである親の子孫である世代の経験を受け取ります。 したがって、単一の生成ツリーが作成されます。このツリーでは、手続き型の方法である異種ライブラリとは異なり、ナビゲートおよび大量管理が便利です。



ご覧のとおり、すべてが人々のようです！ 開発者はこのシステムの神であり、何世代にもわたって継承され、ルート自体または開発の個々のブランチに変更を加えることができるという違いがあります。 戦争と紛争を排除します！ 新しい知識-追加！ またはその逆、私たちはすべてを壊します...神になるのは難しいです！ ただし、OOPの原則自体は、開発者がせっかちではなくルールに従ってアプリケーションを構築することを義務付けているため、サポートを容易にし、体系化しますが、この場合でもコードを混乱させたいという欲求をまったく妨げません... :)



私の意見では、OOPの開発を支援するのは、まさにそのような「人間」の原則の認識です。 例えば、人生のように、子どもたちが自分自身が必要だと思うことをできるようにする厳格な親がいます！ これらは抽象クラス-抽象と呼ばれます。 両親がピアノを弾いたり詩を学ばせたりしたことを覚えていますか？..だから、多くの両親と同様に、抽象クラスは子孫がなぜそれを必要とするのか、そして彼がそれをどのように使用するのかを知りませんが、彼らは確信しています必要です！ つまり このようなクラスには抽象メソッドが含まれます。抽象メソッドは、キャンディーのないキャンディーラッパーのように、実装自体のないメソッドの宣言です。これにより、子孫はこのメソッドを実装する必要があります。 人生のように、両親はしばしば満たされていない夢を子供たちに移します...



このような冗談まじめな形で、抽象クラスと家族関係のトピックに触れました...これらの両方を理解する方法として....しかし、真剣に、もちろん、プログラミングにはランダムなメソッドがなく、メソッドとプロパティはよく考え抜かれたクラスの階層。家系図のように、世代から世代へ機能を拡張する機会を提供できます。 そして、抽象クラス、さらには抽象クラス-インターフェース（インターフェースには実装がまったく含まれていない）は、プログラマーが失うことのないようにし、人生のすべての子孫に必要な共通スキルを実装することを忘れないようにします。



ジョークに加えて、実際には、たとえば店内の商品などのアプリケーション要素を設計するとき、オブジェクト表現により、実際のオブジェクトのプロパティに近づけることができます。これは、人生のように、すべての必要な属性をカプセル化します（つまり、それ自体に含まれます）：価格、数量、重量、賞味期限およびその他の必要な品質。 ただし、商品は異なる可能性があるため、クラスモデルは共通のプロパティを分岐および開発、継承、または再定義できます。



継承はおそらくOOPの最も重要な機能です。 新しいラウンドの進化が必要な場合、プログラマーは親のスキルを拡張する新しいクラスを作成し、時には新しい方法で実装します。 重複する親メソッド-オーバーライド。 結局のところ、各世代には人生に独自の概念があります...プログラマが前世代の「経験と概念」を必要とする場合、彼はそれらに目を向けます。 この構造では何も失われないため、使用できることが非常に重要です。



また、javascriptの完全なOOP仕様はまだありませんが、OOPの原則に従う機会があり、この便利さを使用します。 もちろん、この記事の枠組みの中で、理解の基本だけに触れますが、ご存知のように-面倒なトラブルが始まったので、主なことは理解することです...



したがって、私たちの目標は、タイマーによって必要なプロセスを開始する何らかの制御されたエンティティを作成することです。 「マネージド」-これは、そのようなエンティティ、または条件付きでクラスに含まれることを意味します-カプセル化、コントロールのメソッド、および必要なデータを含むプロパティ。 人生の例：

•プロパティ-これはオブジェクトが知っているものです（名前、目の色、乗算表）、

•メソッド-これはオブジェクトができることです（スリープ、食べ、シンクロファソトロンを構築します）。



重要！ 読者がオブジェクトのjavascriptの内容をまだ知らない場合は、事前に参考文献でそれについて読むことをお勧めします。そうしないと、理解が困難になります。

オブジェクトの作成は、新しいディレクティブで呼び出される関数を通じて行われます。 この関数がまったく普通のものではなく、特定のオブジェクトを作成して返す特別な関数-コンストラクターであると判断するのは、新しいディレクティブです。 彼女がそれを返す前に、私たちはこのオブジェクトに、魂が望むすべてのもの、つまり知識とスキルの両方を割り当てることができます。

function Timer() { /*    … */ }; var timer = new Timer();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そこで、Timerクラスのタイマーオブジェクトを作成しました。 しかし、創造的な人々として、私たちはすでにオブジェクトを作成する際にいくつかのプロパティを与えたい、または与えたくないかもしれません...それは 必要に応じて「知識とスキル」を尋ねることができるように普遍性が必要ですが、例えば、呼吸することができなくても、オブジェクトは苦痛で死ぬことはありません...私たちは動物ではありませんが、それを行う方法は？

これを行うために、クラスに最初に入れることは、オブジェクトが本来受け入れるデフォルトのプロパティです。 そして処理ユニット。

 function Timer( options ) { //public var defaultOptions = { delay: 20 //     ,   -   ,stopFrame: 0 //   ,loop: true //    ,frameElementPrefixId: 'timer_' //   ID ,  -  } for(var option in defaultOptions) this[option] = options && options[option]!==undefined ? options[option] : defaultOptions[option]; /*   … */ };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、関数シグネチャには、optionsパラメーターがあります。これはオブジェクトです。 オブジェクトが何であるか知っていますか？..コメントの後

//public





生活に必要なプロパティを含むdefaultOptionsオブジェクトもあります。その背後には、すべてのdefaultOptionsプロパティを名前でソートし、オプションを通過するかどうかを確認し、そうでない場合はdefaultOptionsから値を設定するコードブロックです。

オブジェクトに値を割り当てるには、これを使用します。これは、関数内で作成された現在のコンストラクターを指します（新しいことを覚えていますか？）。 したがって、次のようにオブジェクトを作成できます。

 var timer = new Timer( {delay: 500, loop: false } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

...指定されたプロパティが書き込まれ、欠落しているプロパティはdefaultOptionsから取得されます。 オブジェクトが保存されました！ 汎用性と柔軟性が得られました！



コメントに注意してください//public





もちろん、ここには条件値があります（クラスの概念を含むjavascriptのすべてのOOP規則と同様）が、その本質はパブリックプロパティのマークにあります。 外部から入手できます。 これらのプロパティには、オブジェクトから直接アクセスできます。

 alert( timer.delay );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

人生の例として、これらは隠される必要のないオブジェクトの明らかな特性、つまり猫の尻尾の長さです。



また、個人のプロパティ-プライベート、および保護-保護されています。 Personalにアクセスするには、許容される場合は、プログラマが何をどのように、誰に返品できるかを決定する特別な方法を使用する必要があります。 保護されている-保護されている、それは少し個人的ではない、なぜなら いわゆる「家族」の輪の中で、クラス自体とその相続人の両方がアクセスできます。 これは、アプリケーションの安定性のために行われます。すべてのゴミが小屋に耐える方が良いというわけではないためです...



パーソナルプロパティを追加しましょう-プライベート、これは関数内に内部変数を作成することで行われるため、そのスコープは関数自体によって制限されます（または閉じられます）。 クロージャについて説明します...一方、Timer関数にさらに挿入します。

  //private var busy = false, //  ""  " !" currentTime = 0 //   ,frame = 1 //   ,task = {} // ! !         ,   ,keyFrames=[] //    , ..      ; /*   … */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのようなプロパティに、必要に応じて、次のようなパブリックメソッドを介したアクセスを許可します。

 this.getKeyFrames = function( ) { return keyFrames; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このメソッドはパブリックであることに注意してください。 これにより、オブジェクトのプロパティに割り当てられ、ポイントを介してアクセスできます（アクションを呼び出す場合は、最後の角かっこを忘れないでください）。

 timer.getKeyFrames();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プライベートメソッドが必要な場合、プライベート変数と同様に、内部関数の「通常の」宣言によっても作成されます。

 function somePrivateMethod() { /* some code... */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デザイナーが個人的な目的で呼び出すことができるサービス機能が判明しました。 ただし、コンストラクターによって作成されたオブジェクトからは、この関数は使用できません。 彼の財産ではありません。



繰り返しますが、javascriptでは、これらはすべて、OOPの原則に従うのに役立つ規則ですが、常に正確な実装を提供するとは限りません。 たとえば、javascriptでのprotectedの実装は非常にタイトです！ 実際、protectedは部分的に、オブジェクトからのアクセス不能のためのprivateプロパティと、他のクラスからのアクセスのためのpublicの両方のプロパティを結合します。 または、パブリックメソッドを作成し、そのメソッドを呼び出すオブジェクトがメソッド所有者の相続人であるかどうかなどを内部で確認できます。 慣習の枠組みの中で、理想的な解決策はありません。



さて、アクセス組織を少し整理しました。 これはOOPで最も重要な品質、つまり両親のスキルと知識を採用し、開発する能力であるため、継承についてはどうですか？ そしてここで、javascriptの重要な機能であるプロトタイプの継承について説明します。 このトピックは理解するのにしばしば困難を引き起こします、そして、私は単純な人間の言語で「すべてをきっぱり説明する」私の試みをします。

パート2. JavaScriptのプロトタイプ。

そのため、javascriptにはプロトタイプの概念、オブジェクトの隠しリンク[[prototype]]、__ proto__、および関数のプロトタイププロパティがあります。 これらの概念の混乱を避けるために、それらを1つずつ分析します。

• 現在のオブジェクトのプロトタイプは他のオブジェクトと呼ばれ、現在のオブジェクトはそこから欠落しているメソッドとプロパティを引き出します。
• 隠しリンク[[prototype]]は現在のオブジェクトのプロトタイプを指し、仕様では開発に使用できません。 ただし、仕様に違反する一部のブラウザでは、__ proto__オブジェクトのプロパティとして開かれていますが、直接使用する意味はありません。 なぜなら クロスブラウザではなく、正しくありません。
• プロトタイプは関数の機能です！ 繰り返しますが、作成されたオブジェクトの[[prototype]]リンクに値を渡すために使用される関数です。

自尊心のあるjavascriptオブジェクトには隠しリンク[[prototype]]があり、親オブジェクトに関連付けられ、親オブジェクトに関連付けられます。 このチェーンの最上部には、組み込みjavascriptオブジェクト、一種の最高の前駆体、toString、valueOf、hasOwnPropertyなどの必要なすべての組み込みメソッドを備えたオブジェクトアダムがあります。 このため、すべての子孫オブジェクトには、最低限必要な一連のメソッドがあり、難しいjavascript環境で生き残ることができます。



thread_object2-[[プロトタイプ]]-> thread_object1-[[プロトタイプ]]-> ... {toString：...、valueOf：...、hasOwnProperty：...、...}



つまり メソッドとプロパティを持たない空のvar obj = {}オブジェクトを作成し、標準メソッドに切り替え、[[prototype]]リンクチェーン（この場合、最小の短いチェーン）を使用して、組み込みjavascriptオブジェクトからこのメソッドを取得します。

 var obj = {}; //  obj.toString(); //      "[object Object]"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、リンクのチェーン[[prototype]]を介して、javascriptでプロトタイプ継承が実装される方法です。 プロトタイプチェーンを通じて利用できるすべてのプロパティは、知識とスキルの倉庫のように子孫に開かれ、実際に進化するクラスのツリーを構築できます！



各オブジェクトのプロトタイププロパティはその中に保存されるのではなく、現在のオブジェクトと組み込みのjavascriptオブジェクトの間のプロトタイプチェーンの中間リンクに「時間の初めに」保存されることに注意してください。 このルートオブジェクトには敬意が必要であり、その平和を乱すことはきちんとしたものではありません。したがって、独自のプロトタイププロパティを作成するには、リンク[[prototype]]を使用して独自のオブジェクトを作成してチェーンに埋め込む方が良いでしょう



しかし、覚えているように、[[prototype]]は閉じたリンクです。どうすればアクセスできずにチェーンを構築できますか？ ここでは、新しいキーワードを備えた既によく知られているConstructor関数と、それ自体に対して非常にオープンなprototypeプロパティが役立ちます。 実際、コンストラクターを介して作成されたオブジェクトは、このコンストラクターのprototypeプロパティで指定された値を持つ[[prototype]]リンクを取得します！ 最初、すべての関数のプロトタイププロパティには、ほとんど空のオブジェクトへの参照があります（関数自体を指す単一のコンストラクタープロパティ）。



function_protection.prototype-> {コンストラクタ：-> function_profection}



しかし、親クラスを渡すことにより、プロトタイププロパティを置き換えることができます。 つまり Constructor関数を作成するとき、プロトタイププロパティで必要なプロパティを持つオブジェクトへの参照を割り当てるだけで、作成する新しいオブジェクトは、必要なプロパティを持つこのオブジェクトへの[[prototype]]リンクを受け取ります。

 //   "" var Foo = function() {}; //  prototype      Foo.prototype = { hi: 'Hello!', sayHi: function(){ alert( this.hi ) } }; //   "" var obj = new Foo(); //  ,    obj.sayHi();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記の例では、objオブジェクトの非表示リンク[[prototype]]が、hiプロパティとsayHiメソッドを持つオブジェクトへのポインターを受け取りました。 したがって、objオブジェクトはこの知識とスキルを継承します。

この手順を簡素化するために、関数が考案されました。

 function extend(Child, Parent) { var F = function() { } F.prototype = Parent.prototype Child.prototype = new F() Child.prototype.constructor = Child Child.superclass = Parent.prototype }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その使用例、javascript.ruを参照

javascript.ru/tutorial/object/inheritance#svoystvo-prototype-i-prototip



引数には、コンストラクター、子孫、および親の2つの関数が必要で、既に説明したことを実行します。

• プロトタイプを転送するためのユーティリティ関数を作成します
• Parent関数をそのプロトタイププロパティに書き込みます
• 親のプロトタイプへのリンク[[prototype]]を持つ中間オブジェクト、新しいチェーンリンクを渡します
• （ユーティリティFの元のコンストラクタの代わりに）コンストラクタに子関数を書き込みます
• 子孫でオーバーライドされている場合、そのコンストラクターおよび他のソースメソッドを参照できる場合に、スーパークラスプロパティで親への参照を書き込みます。

問題が発生する可能性があります。なぜ最初の3行が必要なのか、新しいF（）なしで代入をすぐにChild.prototype = Parent.prototypeにしないのか、そしてそれで終わりですか？！



実際、この割り当てでは、継承チェーンの新しい中間リンクは作成されません！ Parent.prototypeはChild.prototypeに書き込まれ、Parent.prototypeをさらに参照する中間ストレージオブジェクトではありません。Child.prototypeに何かを書き込もうとすると、親の領域に大まかに侵入し、長老への敬意と世代の継承に違反します。 新しいF（）コンストラクターを呼び出すことで、子孫に渡すことができるプロトタイプの知識を格納するための独自の領域をChildに作成します。



次の方法で、Designerのプロトタイプに個々のプロパティを追加できます。

 Child.prototype.someProperty = "someProperty";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ところで、プロトタイプをオブジェクトのプロパティ、つまりクラスのインスタンスとして参照しようとしないでください。

オブジェクトにはプロトタイププロパティがありません。非表示リンク[[prototype]]がありますが、プロトタイププロパティにはありません。

もちろん作成することはできますが、継承する意味はありません。 Senseは、作成されたオブジェクトの[[prototype]]リンクにポインターを渡すことができるため、Constructor関数のprototypeプロパティからのみです。



プロトタイプの継承は以上です。 本当に簡単ですか？

ただし、可能なのはプロトタイプの継承だけではありません。 また、スーパークラスのコンストラクターを呼び出す方法、つまり 親クラスの場合、プロトタイププロパティへの書き込みを処理したのは何の理由でもありません（関数extendを参照）。



忘れられた例のTimerコンストラクターでは、これを介していくつかのプロパティをオブジェクトに割り当てます。 これらのプロパティを将来の世代に渡すには、子孫のコンストラクターで親コンストラクターを呼び出す必要があります。つまり、

 function TimerPlayer() { TimerPlayer.superclass.constructor.apply( this, arguments ); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

this.superclass.constructor.applyを介して、つまり現在のコンストラクター（ここではTimerPlayer）の名前を介して呼び出すことはできないことに注意してください。そうでない場合、親コンストラクターもこれを使用し、this.superclass.constructor.apply（this、引数）、これは子孫としてthisのコンテキストに適用する閉じられた呼び出しに変わり、エラーが発生します。



子孫のコンテキストで親コンストラクタを呼び出すと、すべてのプロパティとメソッドが作成され、子孫に割り当てられます。 さらに、これを介してではなくvarを介して宣言された親のプライベートプロパティは、読み取りを許可する親のパブリックメソッドがある場合にのみアクセスできます。

このようにして、タイマーを構築し続けます。

パート3. JavascriptクラスTimerとそのレガシー。

そのため、すでに何かを知っているクラスがありますが、方法はわかりません。そのため、スキルを追加するときが来ました！ クラスに何を教えたいですか？ プレイヤーのようなものを作りましょう：

•開始

•一時停止

•停止

•巻き戻し

•setToFrame

そして、いくつかのそれほど重要ではない方法。 すでにそれらを書いたと想像してください...それで、Timer関数にさらに挿入します。

 this.start = function(){ /*  */ if( busy ) return; if( window.console ) console.log ('start: .currentTime='+currentTime+'; frame='+frame); busy = true; timer.call( this ); } this.pause = function() { /*  */ if( window.console ) console.log ('pause: currentTime='+currentTime+'; frame='+frame); clearInterval( this.intervalId ); busy = false; } this.stop = function() { /*  */ if( window.console ) console.log ('stop: currentTime='+currentTime+'; frame='+frame); clearInterval( this.intervalId ); busy = false; currentTime = 0; frame = 1; this.clearFrameLine(); } /* highlighting -   */ this.clearFrameLine = function() { /*    */ for(var i=1, str=''; i<this.stopFrame+1; i++) if( elFr = document.getElementById( this.frameElementPrefixId+i ) ) removeClass( elFr, 'active'); } this.setActiveFrameElement = function( frameNumber ){ /*    */ if( elFr = document.getElementById( this.frameElementPrefixId+frameNumber ) ) addClass(elFr, 'active'); } this.toString = function() { /*  ,   alert(),    */ var str = ''; for(var option in this ) str+= option+': '+( (typeof this[option]=='function') ? 'function' : this[option] )+'\n'; return '{\n'+str+'}'; } this.setTask = function( new_task ) { /*   ,       */ task = new_task; this.stopFrame = 0; keyFrames.length = 0; for(var frInd in task) { if( (+this.stopFrame)< (+frInd) ) this.stopFrame=(+frInd); keyFrames.push( +frInd ); } } this.getKeyFrames = function( ) { /*    keyFrames */ return keyFrames; } this.getTask = function() { /*    task */ return task; } this.setToFrame = function( toFrame ) { /*     */ if(toFrame>this.stopFrame) return; frame=toFrame; currentTime=(frame-1)*this.delay; for(var frInd in task) { if( (+frInd)>(+toFrame) ) break; var taskList = task[ frInd ]; for(var i=0; i<taskList.length; i++ ){ var taskItem; if( taskItem = taskList[i] )taskItem.run(); } } this.clearFrameLine(); this.setActiveFrameElement( toFrame ); } this.rewind = function( amount ) { /* !  !      :))))))))) */ if( amount<0 && this.intervalId ) amount--;/*    setInterval */ var toFrame = frame+amount; toFrame = Math.max( Math.min( toFrame, this.stopFrame), 1); this.setToFrame(toFrame); } function timer(){ /*  ,  setInterval      */ var this_ = this; /*         */ this.intervalId = setInterval( function() { /*    setInterval    this.delay */ //console.log ('currentTime='+currentTime+'; frame='+frame+';'+task); if( task[ frame ] ) { /*       ,  ... */ var taskList = task[ frame ] /* ...   -   */ for(var i=0; i<taskList.length; i++ ){ /*     -    - run... */ var taskItem; if( taskItem = taskList[i] ) taskItem.run(); /* ...     */ } } /* highlighting */ this_.setActiveFrameElement( frame ); /*   */ currentTime+=this_.delay; /*      */ frame++; if( this_.stopFrame && frame>this_.stopFrame ) { /*  stopFrame       ... */ if( this_.loop ) this_.setToFrame( 1 ); /*    - ,    ,   ,  , */ else this_.stop(); /*   ! */ } }, this.delay ); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてがデザイナーで終わりました。

一般的に、私はすべてが明確だと思います：あなたは開始方法が必要ですか？ パブリックスタートメソッドを作成しています！ どこで...

 this.start = function(){ if( busy ) return; /*    ,  ! */ /*   ,     */ if( window.console ) console.log ('start: .currentTime='+currentTime+'; frame='+frame); busy = true; /*  ,   */ timer.call( this ); /*    */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タイマー機能自体について詳しくコメントしました。 全体のアイデアは簡単です。

 function timer(){ var this_ = this; this.intervalId = setInterval(function() { /*    ,  this_   this! */ }, this.delay ); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、オブジェクトのコンテキストへのリンクを変数に保存します。なぜなら、 setIntervalで呼び出された関数内では、コンテキストは失われ、変数はクロージャー、つまりローカルスコープに残ります。 おそらく理解するために、クロージャーについて繰り返す（または調べる）必要があり、後で説明します...次に、オブジェクトにintervalIdプロパティを割り当てます。これはsetIntervalメソッドによって返されます。この識別子により、一時停止または停止時にsetIntervalを停止できます。



タスクプロパティには別の分析が必要です。これは、何らかのフォームでタスクを実行するために保存するためです。 その構造は次のとおりです。

 { 1:[ { run: function(){} } ], 5:[ {},{},{} /*...*/ ], /*...*/ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクトはオブジェクトの配列です。 ああ、言わない方がいいです。さもないと混乱してしまいます...

ただし、すべてが単純です。目的のフレーム番号の下のタスクオブジェクトには、runプロパティを持つタスクオブジェクトの配列が含まれています。 このプロパティには、目的のフレームが呼び出されたときに呼び出される関数を割り当てる必要があります。 必要に応じて、各タスクオブジェクト、別のプロパティを追加してから、彼とオブジェクトを追加できます。



また、必要に応じて、プッシュ、シフト解除、スプライス配列の標準的な方法を使用して、新しいタスクオブジェクトを配列に追加できます。

もちろん、タスクオブジェクト自体には、目的のフレームの番号によってプロパティを割り当てることができます！



したがって、タスクに入力し、setTaskメソッドを使用してクラスを割り当てて、何をいつ実行するかを決定します。 これはどのように使用できますか？ サイトまたはオフラインクライアントでさまざまな動的シナリオを実行し、アニメーションを作成し、時間に関連する「ライブ」チュートリアルまたはテストを作成し、重要なイベントを思い出させます（やかんが沸騰します！）。 または、ページの隅に時計を表示するだけです！



さらに、タイマーと視覚化を制御するための一種の小さなAPIである最も単純なインターフェイスを既に整理しており、今ではそれを使用して、プレーヤーのようなコントロールパネルを構築しています！ htmlページにお気に入りのコードを挿入します。

 <button onclick="timer.rewind(-50);">rewind -50</button> <button onclick="timer.start();">start</button> <button onclick="timer.pause();">pause</button> <button onclick="timer.stop();">stop</button> <button onclick="timer.rewind(+50);">rewind +50</button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

onclickイベントでは、タイマーオブジェクトのメソッドでボタンがハングします。 もちろん、どのオブジェクトを呼び出す前に、作成することを忘れないでください。 覚えてる？ -コンストラクター関数を使用：

 var timer = new Timer();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、今ではスクリプトを作成すること、それを管理する方法、それ以外の場合、何のために戦っていたのは悪くないでしょう。

単純なアニメーションを作成してみましょう。ページの周りで画像を移動します。まあ、アニメーションの世界の一種の「ハロー世界」です。 写真を移動します

 <img id="ball" src="http://www.smayli.ru/data/smiles/transporta-854.gif" >
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タイマーのタスクは、私たちが好きなアクションをトリガーすることですが、彼自身はこのアクションに責任を負いません。 したがって、正確に何をすべきかがタスクであり、IDとその2つの座標によって要素自体を転送する要素を移動するための単純な関数を記述することで、これを解決します。

 function moveElem( elem, top, left ){ elem.style.cssText = 'position:relative;top:'+top+'px;left:'+left+'px'; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

だから、今、この関数はタスクオブジェクトの必要なフレームの数の下の配列でタスクオブジェクトの実行プロパティに割り当てる必要があります、考えに注意してください？そこで、スクリプトオブジェクトを作成し、その最初のフレームを配列として定義します。このフレームには、ピクチャエレメントの初期位置を配置します。

 var frames = {}; /*   */ frames[1]=[]; frames[1].push( { run: function(){ moveElem( ball, 600, 600 ); } } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

run：moveElem（ball、600、600）を書けないのはなぜですか？構文が...

moveElem（）;であるため、これは間違っています。

...は関数呼び出しを意味しますが、ここで呼び出す必要はありませんが、本体にrun関数プロパティを配置する必要があります。これにより呼び出しが行われます。さもなければ、moveElem（）の結果を実行します-何も返さないため、未定義で、なぜ画像を無駄にしたのでしょうか？



そして出来上がり！最初のフレームに、ページの特定の低い位置に画像（バルーン）を配置するアクションを追加しました。さて、上昇を開始するには、この状態をフレームごとに変更する必要があります。座標を上、下、左に減らします-風に合わせて調整します。:)必要なフレームを埋めるには、ループを使用します。必要に応じて、タイマークラスの独自のメソッドを記述することができます-フレームとアクションを追加し、アクションの変更パラメーターをフレームごとに分散します...一方、たとえば、2番目から600番目のサイクルまでフレームを埋めます。

 /*  */ for(var i=2; i<601; i++) frames[i] = [ { run: function(i){ return function(){ moveElem( ball, 600-i, 600-i ); } }(i) } ];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、クロージャーの使用にも注意を払う必要があります。実際には、動的iを転送するために、ここでは適切な場所で呼び出される関数式でラッピングを使用しています。

 function(i){ /*    i    */ }(i) ;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

使用したばかりの場合：

 run: function(){ moveElem( ball, 600-i, 600-i ); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、moveElem（）を呼び出すと、グローバルスコープから取得されます。forループで宣言して実行したもの（var i = 2; i <601; i ++）、つまり 「ワークアウト」変数iは600になりますが、ダイナミックiは呼び出されません。ダイナミックiは徐々に増加し、離陸ボールの座標を変更します。

したがって、JavaScriptでCLOSEを使用します。これは、スコープを定義します。機能を実行するとき

 function(i){ /*    i    */ }(i) ;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

...その内部では、独自の変数iがこの関数自体の引数として作成され、その場での呼び出し（忘れた場合は繰り返し）が関数の本体を実行し、関数が戻ります。そしてまた：

じゃない

 return moveElem( ball, 600-i, 600-i );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

でも

 return function(){ moveElem( ball, 600-i, 600-i ); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

前者の場合、関数呼び出しは返されませんが、すぐに実行されるmoveElem（ball、600-i、600-i）の呼び出しの結果が返されるためです！



そして今、スクリプトがあります。これで、割り当てて実行できます。

 var timer = new Timer( ); timer.setTask( frames ); timer.start(); /*   start */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一般に、フレームごとの制御は、興味深い複雑なシナリオを作成するための広範な可能性を提供します。denis-or-love.narod.ru/portf/timer

デモページで、 Adobe FlashのTimeLineのようなタイムラプスラインの例を実装しました:)-drawFrameLineボタン。



ページ上の要素の数が多いと、位置を再描画するときにブラウザの速度が大幅に低下する可能性があることに注意してください。

必要に応じて、拡張可能な機能やその他の機能を備えたスクリプト作成用のインターフェイス全体を作成できます。ここで、彼らが言うように、誰がそんなに







大事なのか... そして今、遺産に行こう！

ベースのTimerクラスを作成したら、より高度なTimerPlayerクラスを作成して、それを拡張します。進歩の例を単純な例に制限しましょう。親のスキルを取り入れた子クラスは、タイマーのようなコントロールパネルをプレーヤーのように作成できます。これを行うには、次の3つのことを行います。

1. 親コンストラクターを呼び出す
2. 新しいメソッドを追加する
3. 拡張機能を介して継承を渡す

 //  function TimerPlayer( options ) { //    TimerPlayer.superclass.constructor.apply(this, arguments); //   this.drawPanel = function( panelId, objName ) { var objName = objName || 'timer'; var template ='<button onclick="'+objName+'.rewind(-50);">rewind -50</button>'+ '<button onclick="'+objName+'.start();">start</button>'+ '<button onclick="'+objName+'.pause();">pause</button>'+ '<button onclick="'+objName+'.stop();">stop</button>'+ '<button onclick="'+objName+'.rewind(+50);">rewind +50</button>'; document.getElementById( panelId ).innerHTML = template; } } // extend extend(TimerPlayer, Timer);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここにはプロトタイプの継承はありませんが、将来のためにチェーンを構築し（親にプロトタイプのプロパティを追加したい場合は...）、スーパークラスとコンストラクターを記述するために拡張する必要があります。新しいdrawPanelメソッドは、ボタンを配置する要素のid文字列を受け入れます。文字列は、HTMLテンプレートに置換されるオブジェクトの名前です。

 //   var timerPlayer = new TimerPlayer(); timerPlayer.setTask( frames2 ); timerPlayer.drawPanel( 'controlPanel', 'timerPlayer' );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

終了したか、Timerクラスとその子孫を開始しただけです。この記事を書くにあたって、患者のアドバイスと支援に専念して

いただきたいと思います。再会してプログラミングを楽しむまで。