Ohjelmointitekniikka (JavaScript): suunnittelumalleja

Helsingin yliopisto / tietojenkäsittelytieteen osasto / Ohjelmointitekniikka (JavaScript) / © Arto Wikla 2018

10 Suunnittelumalleja

Muutettu viimeksi 26.11.2018 / Sivu luotu 2.12.2013

Kurssin tavoitteena on ollut JavaScriptin sisäisen toiminnan ymmärtäminen, kielen "pelimoottorin" logiikan hahmottaminen. JavaScript-ohjelman suoritusaikainen dynaamisuus – kaikkea voi vauhdissa muuttaa – on johtanut siihen, että on mahdollista kehittää hyvin erilaisia ohjelmointityylejä ja -tapoja. Ja onhan niitä kehiteltykin!

JavaScript-ohjelman suoritus kuitenkin aina lopulta palautuu dynaamisesti muokattavaan assosiaatiolistojen verkkoon. Erilaisten ohjelmointityylien ja -tekniikoiden ymmärtämisen edellytys on tuon verkon rakenteen ymmärtäminen. Siihen perustuen on mahdoillista kehitellä myös kokonaan uusia tyylejä ja ehkäpä vieläkin parempia rakenneratkaisuja.

Tässä luvussa kurkistellaan esimerkinomaisesti joihinkin verkosta löytyviin JavaScript-ohjelmoinnin rakennehahmoihin suunnittelumalleihin ("design pattern").

Seuraavat tekniikat perustuvat JavaScript "gurun", Douglas Crockfordin esimerkkeihin konstruktorifunktion käytöstä.

Kuten jo on opittu julkisia omia kenttiä ja metodeita syntyy sijoittamalla niitä this-olioon. Myös prototyyppiin lisätyt kentät ja metodit ovat julkisia. Ne tunnetusti jaetaan kysyttäessä ja korvataan sijoitettaessa. Ohjelmoidaan ensin tuttuun tapaan:

function Otus(nimi) {  // Tämä on se tuttu ja tapa!
  this.nimi=nimi
  this.laji="kissa"
}
Otus.prototype.kuka= function() {write(this.nimi+" "+this.laji)}

var x = new Otus("Missu")
x.kuka()                 // Missu kissa
var y = new Otus("Murre")
y.kuka()                 // Murre kissa
y.laji = "koira"
y.kuka()                 // Murre koira
y.kuka = function() {write("Hau, hau!")}
y.kuka()                 // Hau, hau!
x.kuka()                 // Missu kissa

Itse konstruktorifunktioon ohjelmoiduista paikallisista muuttujista, funktioista ja muodollisista parametreista syntyy yksityisiä kenttiä kostruktorifunktion sulkeumaan. Laajennetaan edellistä esimerkkiä siten, että otuskohtaisten kyselyiden määrä rajoitetaan kolmeen:

function Otus(nimi) {
  this.nimi=nimi
  this.laji="kissa"

  // yksityinen kenttä ja yksityinen funktio:
  var lkm=3
  function viela() {lkm -= 1; return lkm>=0}

  // talletetaan luontihetken this yksityiseen kenttään that:
  var that = this 

  // jukinen funktio:
  this.kuka = function() 
   {if (viela())
     write(that.nimi+" "+that.laji)
   else 
    write("Kaikki "+that.nimi+"-kysymykset käytetty!")
  }
}

var x = new Otus("Missu")
var y = new Otus("Murre")
y.laji = "koira"

x.kuka()  // Missu kissa
x.kuka()  // Missu kissa
x.kuka()  // Missu kissa
y.kuka()  // Murre koira
x.kuka()  // Kaikki Missu-kysymykset käytetty!
y.kuka()  // Murre koira
x.kuka()  // Kaikki Missu-kysymykset käytetty!
y.kuka()  // Murre koira
y.kuka()  // Kaikki Murre-kysymykset käytetty!

[2015(!)] On syytä kiinnittää huomio siihen, miten olion luontihetken this talletetaan yksityiseen muuttujaan, jolle on tapana antaa nimeksi that. (Nuolella ilmaistuissa uusissa funktioliteraaleissa on tässä tilanteessa turvallista käyttää myös this-viitettä.)
[2018(!)] Myös vanhemmassa funktioliteraalin kirjoittamisen tavassa (so. function-muodossa) this näkyy toimivan luontevalla tavalla, siis ilman tuota that-tekniikkaa! (En kuitenkaan uskalla luvata että se kaikkialla toimisi...)

Jaetun luokkamuuttujan kaltaisen käyttäytymisen voi ohjelmoida yksinkertaisimmillaan liittämällä konstruktorifunktion prototype-kentän osoittamaan olioon asettava aksessori, setteri:
- ```
function Olio(nimi) {
  this.nimi=nimi
}
Olio.prototype.postilaatikko=0
Olio.prototype.postita=function(a) {Olio.prototype.postilaatikko=a}

var x = new Olio("abc")
var y = new Olio("def")

x.postita("Moi! Mitä kuuluu?")
write(y.postilaatikko)  // Moi! Mitä kuuluu?
y.postita("Kiitos hyvää.")
write(x.postilaatikko)  // Kiitos hyvää.
```
- Tässä siis yksinkertaisesti vain päivitetään prototyyppiketjusta löytyvää julkista kenttää asettavalla aksessorilla. Mikään ei estä sijoittamista suoraan kenttään, mikä tunnetusti johtaa oman kentän luontiin:
```
x.postilaatikko = "EVVK!"
write(y.postilaatikko)          // Kiitos hyvää.
```
- Hienostuneempiakin tapoja löytyy. Yksi esimerkki seuraa pian.

Learning JavaScript Design Patterns (Volume 1.6.2, 2015) (Addy Osmani)

Osmanin kirja on saatavissa sekä painettuna että e-kirjana. Se on myös julkisena verkossa lisenssillä Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 unported license".
Teos on kattava, paljon viitattu ja ilmeisen korkeatasoinen selvitys useimpien yleisten suunnittelumallien JavaScript-toteutuksista.
Tarkastellaan hivenen muokattua esimerkkiä suunnittelumallista Module pattern:

Toteutetaan yksi nollattava laskuri (tätä ei voi monistaa):

var laskuri = (function () {

  var counter = 0;  // sulkeuman yksityinen muuttuja

  // funktio palauttaa arvonaan olion, jossa on kaksi aksessoria,
  // jotka käsittelevät sulkeumaan suljettua vapaata muuttujaa:

  return {
    incrementCounter: function () {
      return counter++;
    },
    resetCounter: function () {
      write( "Laskurin arvo ennen nollausta: " + counter );
      counter = 0;
    }
  };

})();   // HUOM: Funktio siis suoritetaan saman tien!

write(laskuri.incrementCounter()) // 0
write(laskuri.incrementCounter()) // 1
write(laskuri.incrementCounter()) // 2
laskuri.resetCounter();           // Laskurin arvo ennen nollausta: 3
write(laskuri.incrementCounter()) // 0
write(laskuri.incrementCounter()) // 1

Mutta, mutta, ..., julkiset aksessorikentät eivät kuitenkaan ole turvassa:

laskuri.incrementCounter = () => 666
write(laskuri.incrementCounter()) // 666
write(laskuri.incrementCounter()) // 666
write(laskuri.incrementCounter()) // 666
...

Vastaavalla tekniikalla voidaan esimerkiksi edellä nähty jaettu "luokkamuuttuja" toteuttaa tyylikkäämmin:

function Olio(nimi) {
  this.nimi=nimi
}
Olio.prototype.posti = 
     (function () {
        var postilaatikko=0
        return {
          laheta: function(a) {postilaatikko=a}, 
          lue:    function()  {return postilaatikko}
        }
     })()

var x = new Olio("abc")
var y = new Olio("def")

x.posti.laheta("Moi! Mitä kuuluu?")
write(y.posti.lue())  // Moi! Mitä kuuluu?
y.posti.laheta("Kiitos hyvää.")
write(x.posti.lue())  // Kiitos hyvää.

x.posti.laheta("EVVK!")
write(y.posti.lue())  // EVVK!

y.posti.laheta(123)
write(x.posti.lue())  // 123

Edellä laskuri toteutettiin ainutkertaisena modulina. Tyylistä voi muokata myös eräänlaisen "laskuritehtaan" seuraavaan tapaan. Tällaista rakennetta toisinaan kutsutaan "modulityypiksi":

function teeUusiLaskuri() {

  var counter = 0;  // sulkeuman yksityinen muuttuja

  // funktio palauttaa arvonaan olion, jossa on kaksi funktiota,
  // jotka käsittelevät sulkeuman yhteistä muuttujaa:

  return {
    incrementCounter: function () {
      return counter++;
    },
    resetCounter: function () {
      write( "Laskurin arvo ennen nollausta: " + counter );
      counter = 0;
    }
  };
}       // HUOM: Funktiota ei suoriteta vielä!

var x = teeUusiLaskuri()

write(x.incrementCounter()) // 0
write(x.incrementCounter()) // 1
write(x.incrementCounter()) // 2
x.resetCounter();           // Laskurin arvo ennen nollausta: 3

var y = teeUusiLaskuri()
write(y.incrementCounter()) // 0
write(y.incrementCounter()) // 1
write(y.incrementCounter()) // 2
write(y.incrementCounter()) // 3
write(y.incrementCounter()) // 4
y.resetCounter();           // Laskurin arvo ennen nollausta: 5
write(x.incrementCounter()) // 0
write(x.incrementCounter()) // 1

Tässä nähtiin vain pieniä makupaloja Osmanin vakuuttavasta teoksesta. Kannattaa tutustua tarkemmin! Vain ensimmäinen esimerkki on lähes suoraan Osmanilta. Kaksi jälkimmäistä kirjoitin Osmanin innoittamana. Jos niissä on vikaa, syy on yksin minun.

JavaScript Module Pattern: In-Depth (Ben Cherry)

Selkeä esitys anonyymien sulkeumien käytöstä suljettujen näkyvyysalueiden toteuttamisessa.

Anonyymi sulkeuma on nimetön funktioliteraali, joka suoritetaan heti määrittelyn yhteydessä:

(function () {
	// - muuttujien ja funktioiden määrittelyitä
	// - täältä näkee ulos, mutta ulkoa ei näy tänne
        // - tänne voidaan sulkea ympäristön vapaita muuttujia
}());

Anonyymi sulkeuma voi myös saman tien palauttaa arvonaan olion, jonka se luo. Toteutus pidetään piilossa. Vain julkinen käyttörajapinta näytetään:

var MODULE = (function () {

        // privaattiosuus:
        var privaatti = 1
        function privaattimetodi() {
            // ...
        }

        var my = {}       // tähän rakennetaan julkinen rajapinta  

        // julkinen rajapinta:
        my.julkinen = 456;
        my.privaatinArvo = function() {return privaatti}
        my.kasvataPrivaattia = function (x) {privaatti += x}

        return my;
}());

write(MODULE.julkinen)         // 456
write(MODULE.privaatinArvo())  // 1
MODULE.kasvataPrivaattia(22)   
write(MODULE.privaatinArvo())  // 23

Ben Cherry kertoo paljon muutakin kiinnostavaa. Kannattaa lukea.

Esimerkkejä muista JavaScript-design-pattern-sivustoista:
- JavaScript Design Patterns (dofactory)
- Understanding Design Patterns in JavaScript (Tilo Mitra)
- JavaScript Design Patterns (Nitin Singh)
- ...
- ...
- Ja lopuksi ihan vain huvin vuoksi: Kaikki JavaScript-ohjelmat voidaan kirjoittaa käyttämällä pelkästään merkkejä ()[]{}!+
  Sivu Brainfuck beware: JavaScript is after you! kertoo, miten se käy. En todellakaan aio perehtyä yksityiskohtiin... ;-)

by WebCounter
(2.12.2013)