JavaScript: návrhové vzory

Každý programovací jazyk má nějaké doporučené vzory, návrhové vzory (design paterns) jak řešit daný problém. Má je i JavaScript. Tohle jsou některé z nich.

Modul

Zabaluje, zapouzdřuje, data a funkce do ‚modulu‘ a tak jej skrývá od ostatního kódu.

// Definuje modul s vlastnimi internimi daty a funkcemi
var mujModul = (function () {
    var dataModulu = 'nejaka data';
    function dejData() {
        return dataModulu;
    }
    function nastavData(novaData) {
        data = novaData;
    }
    return {
        dejData: dejData,
        nastavData: nastavData
    }
}();

// pouziti samotneho modulu
console.log(mujModul.dejData()); // vytiskne 'nejaka data'
mujModul.nastavData('hola');
console.log(mujModul.dejData()); // vytiskne 'hola' 

Constructor

Používá se v objektovém programování pro vytvoření objektu z definice třídy. Definicí třídy je v JavaScriptu funkce, která se volá a vytváři instanci.

// definice tridy, respektive konstruktoru
var Osoba = function (jmeno, prijmeni) {
    this.jmeno = jmeno;
    this.prijmeni = prijmeni;
}

// vytvoreni instance tridy
var pepa = new Osoba('pepa', 'novak');
var jirka = new Osoba('jiri', 'prochazka');

Prototype

Umožňuje definovat třídy a pak z nch vytvářet objekty. Prototype pak řeší něco jako metody třídy, které pak lze volat na vytvořených objektech.

var Osoba = function (jmeno, prijmeni) { // tohle je konstruktor třídy
    // privatni data kazde instance
    this.jmeno = jmeno;
    this.prijmeni = prijmeni;
}

// definice prototypu, pokud by byly kratke...
Osoba.prototype = {
    getName: function () {
        return this.jmeno;
    },
    setName: function (noveJmeno) {
        this.jmeno = noveJmeno;
    }
}

// definice metody tridy, pokud by byla implementace delsi...
Osoba.prototype.celeJmeno = function () {
    return this.jmeno + ' ' + this.prijmeni;
}

var ja = new Osoba('pepa', 'novak'); // vytvori instanci trudy
console.log(ja.celeJmeno()); // vytiskne 'pepa novak'

Observer

Observer je návrhový vzor, který vám umožňuje vytvořit vazbu mezi objektem, který emituje nějakou událost, změnu a objektem, který na toto reaguje, nebo je o tomto nějak informován.

var Sledovany = function () {
    this.sledujici = []; // pole objektu, kteri budou informovani timto objektem
    return {
        prihlasitOdber: function (sledujici) {
            this.sledujici.push(sleddujici); // prida sledujici objekt do pole sledujicich
        }
        odhlasitOdber: function (sledujici) {
            var index = this.sledujici.indexOf(sledujici);
            if (index > -1 ) {
                this.sledujici.slice(index, 1); // odebere sledujiciho z pole sledujicich
            } 
        }
        informujSledujiciho: function (sledujici) {
            var index = this.sledujici.indexOf(sledujici);
            if (index > -1) {
                sledujici[index].notify(index);
            }
        }
        informujVsechnySledujici: function () {
        // tohle je broadcast, ktery zajisti doruceni zpravy vsem, co se prihlasili k odberu
        for (var i=0; i < this.sledujcic.length; i++) {
            this.sledujici[i].notify(i);
        }
    }
};

// trida pro objekty, ktere budou sledovat (ziskavat zpravy)
var Sledujici = function() {
    return {
        notify: function (message) {
            console.log('Obdrzena zprava: ' + message);
        }
    }
};

// tenhle objekt bude emitovat zpravy
var objektZajmu = new Sledovany();

// sada objektu, ktere budou sledovat objektZajmu
var fizl1 = new Sledujici();
var fizl2 = new Sledujici();

// zaregistrovani sledovani fizlu
objektZajmu.prihlasitOdber(fizl1);
objektZajmu.prihlasitOdber(fizl2);

// odeslani informace sledovaneho objektu jednomu slidilovi
objektZajmu.informujSledujiciho(fizl1);

// hromadne obeslani vsech co se prihlasili k odberu
objektZajmu.informujVsechnySledujici();

Sledovany objekt si vytvori pole pro objekty, ktere chteji byt informovani a registrace odberatelu je pak do tohoto pole pridava. Kazdy registrovany objekt ma metodu notify, ktera zodpovida za zpracovani obdrzene zpravy. Sledovany objekt pak skrze tuto metodu rozesila danou zpravu.

Návrhové vzory…

Tohle byly jen některé návrhové vzory, které se v JavaScriptu hojně používají.
Zdroj