Jakość kodu Java Script

Question

Dzień dobry, 

proszę o ocenę jakości kodu oraz czy spełnia on standard czytelności dla innego programisty. Działanie programu polega na stworzeniu tracklisty, która wyświetla aktualnie odtwarzany utwór w zależności od czasu odtwarzacza na stronie. Nazwy utworów oraz miejsce w którym się on zaczyna jest umieszczony w pliku JSON. 

class Tracklist{
     constructor(className){
     
      this.tracklistSelector= document.querySelector("."+className) ;
      this.audio=document.getElementById("audio");
      this.songs=null;
      this.actualTime=null;
      this.span=document.createElement("span");
      this.tracklistGenerator();
      this.fileGET();
      this.timeUpdate();    
       
    };
    
    fileGET(){
        let request = new XMLHttpRequest();
             request.open('GET', 'tracklist.json');
             request.onload = function () {
             const data = JSON.parse(request.response);
             this.songs=data.songs;
             
                    

        }.bind(this)
        request.send();  
    }
   
    timeUpdate(){
                                    
     this.audio.addEventListener("timeupdate",function(){
        
        this.actualTime= this.audio.currentTime;
          this.songsCounter(this.songs);
     }.bind(this));
    }
    
    songsCounter(tracks){
            
        
            for(let i=0;i<tracks.length;i++){
                
                
                   if((parseInt(this.actualTime)==tracks[i].time) || ((parseInt(this.actualTime)>tracks[i].time) && (tracks[i+1]!=undefined)&&(parseInt(this.actualTime)<tracks[i+1].time) || (parseInt(this.actualTime)>tracks[tracks.length-1].time ))){
                       
                       if(tracks[i].name!=this.span.innerHTML){
                       this.span.innerHTML=tracks[i].name;
                       }
                      
                   
                   }
            }
        
    }
    tracklistGenerator(){
        
        this.span.classList.add("trackname");
        this.tracklistSelector.appendChild(this.span);
    } 

}

ob=new Tracklist("tracklist");

 

Answer 1

• Czemu do konstruktora można podać klasę elementu? O wiele wygodniej byłoby podać cały selektor albo bezpośrednio element.
• Czemu z kolei element #audio ma na sztywno ustawione [id]?
• fileGET (które powinno się nazywać getFile; funkcje nazywa się "czasownikowo", czyli zróbCoś – pobierzPlik itd.) jest funkcją asynchroniczną, ale cała reszta kodu udaje, że nie. Ta metoda powinna zwracać Promise.
• span absolutnie nic nie mówi i nie wiadomo, do czego służy ten element.
• Linijkę 43 warto przenieść do pomocniczej funkcji i rozbić ten warunek.

Comments

Rozumiem, dzięki za pomoc.

Answer 2

tracklist -> trackList

metoda fileGET -> getFile()

timeUpdate -> updateTime()

linia 43 do poprawy

brakuje dobrego formatowania, z jakiego IDE korzystasz?

Comments

Brackets, dzięki za poprawki.

---

zainteresuj się jakimś formaterrem kodu do tego IDE. Tutaj podsyłam pierwszy lepszy - https://github.com/brackets-beautify/brackets-beautify