Javascript_30_01_02

こんにちは！

デレクです🙂

今日は最初の投稿のsequelについてお話しします!✨

01. Javascript Drum Kit

前の投稿とJavascript Drum Kitが何なのかわからなかったら…!
https://velog.io/@ghdtjrrl94/Javascript30
こちらを押してご確認ください😛
前の投稿でDerekインプリメンテーションコードを見た場合は、switch-case文でkeyCode条件をすべて区分しました.

function handleKeyDown(event){
    switch(event.keyCode){
        case 65:
            currentKeyCode = "65";
            playSound();
            break;
        case 83:
            currentKeyCode = "83";
            playSound();
            break;
        ...
        
        

このようにして、9つのkeyCodeに基づいて、毎日caseが作成される.
さらに、各ブランチにはcurrentKeyCodeの値があり、次のplaySound()の関数が実行されます.

function playSound(){
    // add "playing" class
    let targetKey = document.querySelector(`div[data-key = "${currentKeyCode}"]`);
    targetKey.classList.add("playing");

    // audio play
    let audioKey = document.querySelector(`audio[data-key = "${currentKeyCode}"]`);
    audioKey.play();

    // remove playing class 
    setTimeout(() => targetKey.classList.remove("playing"), 500);
    //targetKey.classList.remove("playing");
}

playingクラス(一時的に黄色に変化)を消去し,0.5秒後に非同期で動作するためのsetTimeout関数も設計した.
これらのすべての関数は実際には

window.addEventListener("keydown", handleKeyDown);

eventListenerから

Wes Bos実装コード

WesBosはhttps://javascript30.com/の講義を率いた人だ.
この方の講義コードを整理したいです.
とても...🐶達人みたい!勉強しなければならないことがたくさんあるので、記録したいです.😂

  function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }

  function playSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
    if (!audio) return;

    key.classList.add('playing');
    audio.currentTime = 0;
    audio.play();
  }

  const keys = Array.from(document.querySelectorAll('.key'));
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
  window.addEventListener('keydown', playSound);

コードの流れに従って、新しく接触した内容に基づいて整理します!

1. Adding playing class

function playSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
    if (!audio) return;

    key.classList.add('playing');
    audio.currentTime = 0;
    audio.play();
  }

window.addEventListener('keydown', playSound);

私のコードに少し似ていますが、 switch-caseと書かず、event.keyCodeに直接近づきました.

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);

backticを使用してeventに変換されたパラメータをkeyCodeに直接使用すれば、私のコードのようにswitch-caseを使用する必要はありません.😅audio.play()の前のaudio.currenTime = 0;に言及!
その文法がなければ、キーボードa, s, d, f, g, h, j, k, lのうちの1つを連続的に速く演奏すると、少し遅い音が聞こえます.
これは、sound.wavファイルの再生時間が長すぎて、最初から速く再生できず、再生時間が少し遅れているようだからです.
この問題を解決するために、私たちは毎回のオーディオファイル(sound.wav)をrewindの文法を初めて使用したと見なすことができます.

2. Deleting playing class

追加したplaying classをクリアすると、setTimeout関数を非同期で0.5秒後にクリアします.でもwes Bosのコードを見て、もっと高級な方法があることに気づきました…!

  function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }
  
  const keys = Array.from(document.querySelectorAll('.key'));
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));

まず、querySelectorAllによってクラス値keyのすべてのクラスが検索され、listとしてkeysに格納される.
生成するelementに対してaddEventListenerを1つずつ設ける、

keys.forEach(key => key.addEventListener('transitionend', removeTransition));

forEach構文により、eventListenerがそれぞれ設定されています.
個人的にはこの部分が一番効率的だと思います!
実際、最初のlist形式のkeysでは、このコードにエラーが発生します.

 const keys = Array.from(document.querySelectorAll('.key'));
 keys.addEventListener("click", handleClick);

2番目の文書 keys.addEventListener("click", handleClick);は、list形式のkeysにイベントを登録し、エラーを引き起こす.forEachで簡単にeventに登録するのは賢明ですね.😆
また、transitionendという見慣れないアクティビティも使用しています.
その定義はこうです!
変換が完了すると、変換イベントが発生します.
すなわち,今回のDrum kit項目では,playingクラスが追加されると,生成されたtransitionが終了する.removeTransition関数のフォーマットを実行します.removeTransitionの関数は次のとおりです.

  function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }

このように定義するのは簡単です!先に発生したイベントがtransformでなければ、何の行動も取らない.もしあれば、playing類removeである.
wes Bosの参照コードもレビューし,単純な構文でも非常に効率的に使用できることに驚嘆した.いつそんなことになるのか悩む…!😥
エラーや修正が必要な場合は、いつでもフィードバックしてください.
ありがとう!🤗