Element canvas i klasy w JS - the old way

Data: 2017-06-21, autor: Michał Misztal

W poprzednim wpisie opisałem jak wygląda deklaracja klas w JS6. Jako, że jest to dość nowa funkcjonalność to nie wszystkie przeglądarki je obsługują. Więcej na temat implementacji można przeczytać tutaj.

Dziś natomiast poprawiłem trochę ten skrypt żeby działał również na starszych przeglądarkach.



$(function(){

  function constructor(id,wymiary){
    this.id=id;
    this.wymiary=wymiary;
    this.object=document.getElementById(this.id);
    this.object.width=window.innerWidth;
    this.c=this.object.getContext("2d");
  }
  
  function refresh(){
    this.object.width=window.innerWidth;
    this.c.beginPath();

    for(var i=0;i<this.wymiary.length+1;i++){
        if(i==0){
            this.c.moveTo(this.wymiary[0][0],this.wymiary[0][1]);
        }else if(i==this.wymiary.length){
            this.c.lineTo(this.wymiary[0][0],this.wymiary[0][1]);
        }else{
            this.c.lineTo(this.wymiary[i][0],this.wymiary[i][1]);
        }
    }

    this.c.strokeStyle="white";
    this.c.fillStyle="white";
    this.c.closePath();
    this.c.stroke();
    this.c.fill();
  }
  
  function returnWidth(){
      return this.object.width;
  }
  
  var c1={
      constructor:constructor,
      refresh:refresh,
      returnWidth:returnWidth
  }
  
  function utworzObiekty(){
    c1.constructor("canv_top",[[0,50],[window.innerWidth,50],[window.innerWidth,0]]);
    c1.refresh();
  }
  
  utworzObiekty();
  
  window.onresize=function(){
      utworzObiekty();
  }
});


Tutaj natomiast jest taki myk, że konstruktor nie wykonuje się z automatu więc trzeba go wykonać ręcznie. Do tego jest drobny problem z tym w jaki sposób jest wykonywany taki kod. Zatem czasem zamiast liczby czy obiektu zobaczycie "undefined" gdy będziecie chcieć zmienić jakąś cechę - podobnież JS tworzy wtedy zmienną tymczasową do której przypisuje nową wartość a cechę niszczy. Do tego nowszy kod na pierwszy rzut oka wykonuje się szybciej.

Skomentuj lub zgłoś błąd

© Michał Misztal 2018

Czytasz właśnie

Element canvas i klasy w JS - the old way
Autor: Michał Misztal
Data: 2017-06-21

Tagi

Podobne wpisy