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