プレイヘッド

オーディオプレーヤーの例に関するJavaScriptでの宣言型プログラミングの経験



著者-ロスティスラフ・チェビキン。

Habr- den_lesnovのレイアウトと配置。

私は何かが間違っていると感じます

正しいことをすることで...

ライアン・テダー（OneRepublic）。 星を数える

デニスレスノフと私は自分のサイト用にオーディオプレーヤーを開発しました。 このサイトでは、曲のオーディオ録音をホストしており、ウェブページから直接再生することを夢見てきました。



プレーヤーは次のようになります。







仕組み- デモページで確認できます 。



最初の質問は、なぜ自分のプレーヤーをゼロから保護し、何百もの既製のソリューションを使用しなかった理由です。 答えは簡単です。このタスクに興味があったからです。



このプロジェクトでは、顧客、上司、金銭的な動機、または特定の期限はありませんでした。 私たちは週に1回、自宅で私たちの1人と会い、喜びのためにプログラムしました。 プレーヤーの最初の有効なバージョンは2晩で準備が整い、サイトに投稿されました。その後、約1年間、コードを神聖な形にしました。



ここでは、使用した主な技術ソリューションについて説明します。

技術コーシャ

-うわー、私たちは昨日始めたばかりで、すでに古いコードがあります...



プレーヤーは、Flashやその他のアンティークなしで、最新のクライアントテクノロジー（HTML5のオーディオオブジェクト）で動作します。 ただし、古いブラウザーのユーザーは苦労しません。ユーザーにとって、プレーヤーはMP3ファイルへの直接リンクのように動作します。 これは、特定のブラウザーモデルとバージョンをチェックせずに、機能の検出によってのみ達成されます。



jQueryやその他のライブラリは使用しませんでした。すべてのコードは純粋なJavaScriptで記述されています。 これはとても興味深いからです。



JavaScriptでは、「最小命令型、最大宣言型」アプローチを順守し、コードの重複、「全能」関数、複数層の条件とループ、およびその他のコードの臭いを防ぐことも求めました。



プレーヤーは水平方向に「ゴム」です。この幅が音の間に変化しても、コンテナーの幅全体に自動的に広がります。

HTML：より良い、より良い

モーセは人々にできない

タブレットはあなたを読みます

それらはおそらくエンコードされています

恋



プレーヤーに関連付けられているHTMLコードは、初期状態では、オーディオファイルへの通常の直接ハイパーリンクです。

<a href="/path/file.mp3" target="_blank" id="player" class="ready"> </a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、音楽を開始せずにファイルをディスクに保存したり、別のアプリケーションで開いたり、リンクをコピーしたりする場合などに便利です。



リンクをクリックすると、JavaScriptが環境でファイルを再生する準備ができているかどうかを確認します。 準備ができていない場合、リンクは通常どおり機能します。 JavaScriptがまったく起動しない場合も同じことが起こります。



最後に、再生が利用可能な場合、リンクのコンテンツは次のようになります。

 <a target="_blank" id="player" class=""> <track></track> <playhead draggable="true"></playhead> </a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プレーヤーのアクティブな状態では、HTMLコードは3つの要素のみで構成されます。ユーザーが操作できるインターフェイスの各コンポーネントに1つだけです。

• まだプレーヤー全体を表します。 ユーザーは、アイコンをクリックしてサウンドを開始または停止できます。 / 。 （アイコン用の個別のHTML要素はありません。aも参照します。）
• track-サウンドトラック。 クリックすると、特定の場所に再生を巻き戻すことができます。
• 再生ヘッド-「ピックアップヘッド」。 現在の再生位置が表示され、ドラッグできます。

急いでデザイン

-ここでは、コードを模倣する必要があります...

-正当化しないのは良いことです！



この設計は、実装に依存しない一連の基本機能としてプレーヤーを表すモデルに基づいていました。 最も普遍的なモデルを特定するために、システムがWebインターフェイスではなく、コンクリートブロックまたはリュートのある生きたミンストレルで構成されている場合はどうなるかを考えました。



この段階では、たとえば、音楽の開始と停止がプレーヤーの基本的な能力であり、「頭の左の値を変更する」が実装の詳細であると記録しました。 これにより、コード内の異なるレベルの抽象化が混ざらないようになりました。



モデルを改良するために、私たちは多くの図と表を描き、誤ってオリジナルのERモデリングを思いついたので、これについては後で説明します。



変数名、CSSクラス、およびその他のエンティティについては細心の注意を払ってきました。 適切な名前の選択に1〜2時間費やすこともできますが、その場合は恥ずかしいことではありません。 たとえば、最初はスライダーをスライダーまたはインジケーターのいずれかと呼びましたが、英語で「プレイヘッド」という古い用語があることがわかりました。これはまさに必要なものを意味します。 私たちは、プロジェクト全体の非公式な名前としてコミック翻訳「Play-head」を使い始めたことがとても嬉しかったです。

CSS：写真のないジオメトリ

-それはネイティブに見えますが、嫌なように見えます...



写真は使用しませんでした。 すべてのプレーヤーのジオメトリはCSSを使用して描画されます。 たとえば、ここにアイコンがあります ：

 #player::before { content: ''; float: left; margin-right: 6px; width: 0; height: 1px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 10px solid #999; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際には、アイコン / 要素aの擬似要素の前に::として実装されます。 この簡略化されたJavaScript：音楽を開始および停止するために、クリックはプレーヤー自体で処理され、特別な要素では処理されません。



同様に、バッファの塗りつぶしを表すために、個別の要素を導入するのではなく、トラックの背景画像として線形勾配関数を使用しました。 初期状態では、バッファーは空で、トラックは白で塗りつぶされています。

 track { background-image: linear-gradient(to right, #ddd 0%, #fff 0%); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

#dddの後の割合は、バッファの満杯に応じて増加し、トラックの一部が灰色に変わります。 バッファがいっぱいになると、トラック全体がグレー表示されます。

システム状態

-これは松葉杖ではなく、アダプターです！



システムは、次の3つの状態のいずれかになります。

• 準備完了-初期状態。
• SET-システムがプレーヤーのプレイ準備が整ったことを確認した後。
• GO-ユーザーがプレーヤーをアクティブにした後の動作ステータス。

状態を区別するには、システムが同じイベントに対して異なる反応をすることが重要です。 たとえば、SET状態のプレーヤーをクリックすると、インフラストラクチャ全体が拡張され、GO状態では音楽を開始または停止します。



状態は、コードをより宣言的に構築するのに役立ちました。 プログラムの最初のバージョンでは、互いにつながれたaddEventListener / removeEventListenerから息をすることはできませんでしたが、最終バージョンまでは、これは完全に停止しました。



stateCtrl特殊オブジェクトは、状態の監視に役立ちます。 たとえば、stateCtrl.is（ 'SET'）は、システムがSET状態にある場合にのみtrueを返します。

一箇所ですべての動作

-単体テストについてどう思いますか？

-ご存知のように、コズマ・プルトコフはこれについて格言を持っていました...しかし、私はどれを忘れました。 単体テストについて考えるのはそれだけです。



おそらくこの場所から最も衝動的に始まります。 すべてのシステムの動作は、1つの構造で記述されます。その全体を示します。

 var behavior = new Behavior({ window: { DOMContentLoaded: { READY: 'player.set' } }, html: { dragover: 'playhead.pull', drop: ['audio.land', 'stateCtrl.toggle'] }, audio: { timeupdate: { NO_DRAG: ['playhead.move', 'track.augment'] }, progress: 'track.augment', ended: ['audio.pause', 'player.toggle'] // 1 }, player: { click: { SET: ['audio.start', 'player.go', 'stateCtrl.nextActivityState'], GO: 'audio.toggle' // 2 } }, playhead: { dragstart: 'playhead.drag' }, track: { click: 'audio.rewind' } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

各オブジェクトにどのようなイベントを期待し、各イベントに応じてどのような状態で何をするかについて説明します。 たとえば、1行目は、終了したイベントがオーディオオブジェクトで（任意の状態で）発生すると、audio.pauseおよびplayer.toggle関数が呼び出されることを意味します。 2行目は、プレーヤーオブジェクト（これはプレーヤー自体-HTMLの要素）のクリックイベントによって、システムがGO状態にある場合、audio.toggle関数が呼び出されることを意味します。



実際、コードの残りの部分は、この純粋に宣言的な記述に「息を吹き込む」ことと、それを機能させることに専念しています。

同じでpreventDefault

-さて、2人のハンドラーが再生ヘッドをドラッグして引き裂き始めました...



一部のイベントに応じて、特定のアクションを実行するだけでなく、デフォルトの反応（リンクをクリックするなど）を防ぐ必要もあります。 これは、プレーヤーの「ビジネスロジック」ではなく、ブラウザーでのイベント処理の機能を指すため、これを前述の動作と混合しないことにしました。



preventDefaultを配置する場所については、別の構造で説明します。

 var modifiers = { preventDefault: ['html', 'track', 'html.dragenter', 'player.click.SET'] };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、preventDefaultがハンドラーに追加されることを意味します。

• htmlおよびtrackオブジェクトのすべてのイベント（動作にリストされています）、
• htmlオブジェクトdragenterイベント（このイベントは動作していません）、
• システムがSET状態にある場合にのみ、プレーヤークリックイベント。

実装全体も1つの場所にあります

-評価のために韻を言う！

-setInterval ...ああ、いや、それは悪い韻です...つまり、韻は良い、悪い考えです。



すべての機能の実装も、このスキームに従って構築された別の構造で説明されています。

 var impl = { Number: { toPercentString: function() { /* … */ } }, Array: { modify: function(handler) { /* … */ } }, String: { createListeners: function(behavior) { /* … */ }, getObject: function() { /* … */ }, modify: function(handler) { /* … */ }, }, HTMLElement: { move: function() { /* … */ }, // …  . . … }, // …  . . … };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この構造のキーは「クラス」の名前（より正確にはプロトタイプ）であり、値はこれらの「クラス」のインスタンスから呼び出される関数のリストです。 たとえば、move関数は、プロトタイプがHTMLElementであるプレイヘッドオブジェクトから呼び出されます。



現在のシステムでは、関数は対応するプロトタイプに直接接続されているため、コーシャコードが多少損なわれます。 将来的には、より正確な継承を確立します。



別の機能：implの関数名がgetで始まる場合、それは本格的なゲッターとして付加されます。 たとえば、getObject関数は、string.objectとして呼び出すことができるプロパティになります。

どうですか

-計画は次のとおりです。まず、クリーンでない関数を作成し、次にクリーンにします。 機能の洗濯！



スクリプトが起動すると、特別なブラックマジックがトリガーされます。これにより、この宣言がすべて消化され、最終的に音楽が鳴ります。

• 別のサイクルで実装実装のリストを調べ、各関数を対応するプロトタイプに押し込みます。 これは、特別に作成されたaddPropertiesメソッドを使用して行われます。このメソッドは、標準のObject.definePropertiesに依存しています。
  
  

   for(var typeName in impl) { window[typeName].addProperties(impl[typeName]); }
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

• 別の特別に記述されたmodifyメソッドは、ビヘイビアオブジェクト（「ビジネスロジック」が格納されている）を変更し、modifiersオブジェクトからpreventDefaultsを追加します。
  
  

   behavior.modify(modifiers);
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

• 最後に、3番目の特別なcreateListenersメソッドがウィンドウに適用され、変更された動作で説明されているウィンドウイベントハンドラーをフックします。
  
  

   'window'.createListeners(behavior);
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

これにより、DOMContentLoadedがウィンドウ上で直ちにトリガーされ、すべてが始まります。 残りのハンドラーは、適切なタイミングで個々の関数内にハングアップします。 たとえば、html、player、およびaudioオブジェクトのハンドラーは、ページのロード後に開始されるset関数内に作成され、go関数内のトラックおよび再生ヘッドのハンドラーは、プレーヤーがアクティブ化された後に開始されます。

 ['playhead', 'track'].createListeners(behavior);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、「addEventListener」という単語は、コード全体で1回だけ言及されます。

黒魔術についてもう少し

-私たちはこれを行く必要があります...



JavaScriptで宣言型スタイルでプログラミングしようとすると、必然的にコードに神秘的な呪文が生じるため、ブラックマジックについて言及しました。 たとえば、createListenersメソッドは、次のように定義されたポリモーフィックウォークメソッドを使用して、動作の内部を再帰的に走査します。

 for(var typeName in walkers) { // Object, Array, String window[typeName].addProperties({ walk: functools.partialLeft( function(name, params) { walkers[name].call(this, params); }, typeName ) }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、私たちは耳でPythonをドラッグしました。このコードが機能するように、partialLeftを呼び出してfunctoolsの「モジュール」に入れました。



次に、partialLeftはヘルパー関数配列を使用して、すべてを配列に変換します。 ブラックマジックとは何ですか？

このf話の教訓

「存在しないコードを再度リファクタリングしていますか？」



お気づきのように、このストーリーでは、Audioオブジェクトの操作や、メディアプレーヤーの他の特定の機能についてはほとんど何もありません。 これは、この分野では見事なものを作成しなかったからです。 私たちのプレーヤーは、他の数百のアナログとほぼ同じ音を出します。



しかし、宣言型アーキテクチャは、その中心にすべてのシステム動作を備えた動作オブジェクトがあり、このプレーヤーだけでなく他のプロジェクトでも使用することを約束しています。 たぶん、時間の経過とともに、これから図書館が成長し、他のすべてを不名誉にし、取って代わるでしょう。



それまでの間、デニスと私は既存のコードを磨き続け、プレイリストを追加してアルバム全体をサイトで聴けるようにします。