Wzorce JS - czy singleton odpowiedni?

0

Witam.
Pytanko odnośnie użycia singletona - lub nie - w małej 'apce'.

Zrobiłem sobie apke, która śledzi ruchy myszą jakie wykonuje użytkownik, i rysuje heatmape w canvas. Kod mam już napisany ale teraz próbuję go zoptymalizować, uczę się wzorców(powinienem pewnie zrobić to wcześniej). W tej chwili mam konstruktor Heatmap, który ma wszystkie pola i metody. Na końcu tworzę sobie obiekt heatmap za pomocą tego konstruktora.

//heatmap object constructor
function Heatmap() {
    this.pageIdentity = location.pathname;//unikalna zmienna tworzona dla kazdej podstrony
    //pola konstruktora i zmienne

    this.getColor = (hex, opacity) => {
        //funkcja zamieniająca hex na rgba
    };

    this.getMouseXY = (e) => { 
      // pobiera wspolrzedne myszy i zapisuje kazdy ruch w tablicy
    };

    this.getJSONandDrawHeatmap = () => {
      //tworzy nowa tablice na podstawie danych z pliku json i rysuje heatmape z uzyciem canvas
    }

    this.getFromJSON = () => {
      //pobiera tablice z punktami z pliku JSON
    };

    window.onload = this.getFromJSON();//po załadowaiu strony pobiera punkty z JSON

    this.saveToJSON = () => {
      //zapisuje punkty zebrane do tablicy points do pliku JSON
    };

    this.startAJAXSending = () => {
      //ustawia interval wysyłania punktów do pliku JSON
    };

    /* EVENTS HANDLERS */
    this.startBtn.addEventListener('click', () => {
      //...
    });
    this.stopBtn.addEventListener('click', () => {
      //...
    });
    this.heatmapBtn.addEventListener('click', this.getJSONandDrawHeatmap);
    this.hideHeatmapBtn.addEventListener('click', () => {
      //...
    });
    this.slider.addEventListener('change', (e) => {
      //...
    });
    document.addEventListener('mousemove', this.getMouseXY);
}

/* obiekt z elementem canvas */
function CanvasHM() {
    if (canvas.getContext) {
        this.c = canvas.getContext('2d');
        this.canvas = document.getElementById('canvas');
        this.canvas.style.filter = 'blur(2.5px)'; //rozmywa warstwe canvas
        this.docHeight = document.body.clientHeight;
        this.docWidth = document.body.clientWidth;
        this.canvas.height = this.docHeight;
        this.canvas.width = this.docWidth;
    }
}

//dziedziczenie
Heatmap.prototype = new CanvasHM();
Heatmap.prototype.constructor = Heatmap;

//obiekt punkt 
function Point(x, y) {
    this.x = x;
    this.y = y;
}

let heatmap = new Heatmap();

document.addEventListener('keypress', (e) => { //
  //roboczo wybranym przyciskiem włączam sobie interfejs apki
});

Wszystko jasno(mam nadzieje) opisałem/przedstawiłem, nie chciałem wrzucać kodu bo ktoś mógłby się przestraszyć :D a w tej chwili chodzi mi tylko o wzorzec.

Wszystko działa, chciałbym jednak przerobić strukturę na singleton. Heatmapa będzie 'rysowana' osobna dla każdej podstrony, więc dla każdej podstrony będę tworzył sobie nową instancję/obiekt, i przetrzymywał tam własne odmienne dane. Pytanie czy w tej sytuacji spełni rolę singleton? Wydaje mi sięz że nie, bo potrzebna więcej niż jedna instancja. Więc czy lepiej tworzyć dla każdej podstrony osobny plik JSON(w którym będzie 'tablica' zebranych punktów x y myszy) i użyć wtedy singletona?

Ps. Przyjmę każdą radę, konstruktywną krytykę :D

1

Użyj OLOO albo klas ES6 (skoro i tak już w nim piszesz).

1 użytkowników online, w tym zalogowanych: 0, gości: 1