Przejdź do treści PWA

Diagram klas w UML (przykłady w JavaScript)

Aby opisać projekt obiektowy, wykorzystujący klasy warto, jest wykorzystać Diagram Klas. Dzięki takiemu schematowi jesteśmy w stanie przedstawić relacje między klasami.

Diagram Klas został opracowany za pomocą OMT — Object Modeling Technique w 1991 roku przez James Rumbaugh, który to w 1994 roku przeszedł z General Electric Research and Development Center to firmy Rational Software, gdzie razem z Ivar Jacobson oraz Grady Booch udoskonalili OMT i stworzyli UML - Unified Modeling Language.

Różnice między OMT a UML w formie tabelarycznej: http://www.differencebetween.info/difference-between-uml-and-omt

Klasa

W notacji OMT, a tym samym UML, jest to prostokąt składający się z kilku sekcji.

Rysunek w ASCII art:

+---------------------+
| Computer            | Nazwa klasy
+---------------------+
| -startTime: number  | Atrybuty
+---------------------+
| +powerOn(): boolean | Operacje
+---------------------+

Przykład w kodzie JavaScript:

class Computer {
    // Prywatna właściwość
    #startTime = 0;

    // Publiczna metoda
    powerOn() {
        this.#startTime = Date.now();
        // ...
    }
}

// Sprawdźmy to!
const c = new Computer();
c.powerOn();
console.log(c instanceof Computer); // true

Relacje

1. Association

PL: Asocjacja

Luźna relacja między klasą A (Computer) oraz klasą B (Developer)

Więcej: https://www.uml-diagrams.org/association.html

  • Rysunek w ASCII art:

      +-----------+     +----------+
      | Developer |-—-->| Computer |
      +-----------+     +----------+
    

    (ciągła linia ze strzałką)

  • Przykład w kodzie JavaScript:

      class Computer {
          // ...
      }
      class Developer {
          workOn(c /* Computer */) {
              // ...
          }
      }
    
      // Sprawdźmy to!
      const c = new Computer();
      const d = new Developer();
      d.workOn(c);
    

2. Inheritance / Generalization (is-a)

PL: Generalizacja, Dziedziczenie

Klasa B (Laptop) jest potomkiem klasy A (Computer).

Klasa B (Laptop) będąca dzieckiem, dziedziczy cechy rodzica klasy A (Computer).

Więcej: https://www.uml-diagrams.org/generalization.html

  • Rysunek w ASCII art:

      +--------+      +----------+
      | Laptop |-—--|>| Computer |
      +--------+      +----------+
    

    (ciągła linia z pustym trójkątem)

  • Przykład w kodzie JavaScript:

      class Computer {
          powerOn() {
              // ...
          }
      }
      class Laptop extends Computer {}
    
      // Sprawdźmy to!
      const l = new Laptop();
      l.powerOn();
      console.log(l instanceof Computer); // true
    

3. Realization / Implementation

PL: Realizacja / Implementacja

Relacja między interfejsem (Product) a klasą (Computer).

Więcej: https://www.uml-diagrams.org/realization.html

  • Rysunek w ASCII art:

      +----------+           +------------------+
      | Computer | - — - - |>| ProductInterface |
      +----------+           +------------------+
    

    (przerywana linia z pustym trójkątem)

  • Przykład w kodzie TypeScript:

      interface Product {
          getPrice(): number;
      };
    
      class Computer implements Product {
          getPrice() {
              return 99.95;
          }
      }
    
      // Sprawdźmy to!
      const c = new Computer();
      c.getPrice(); // 99.95
      // ...
    

    Powyższy snippet w Stackblitz, gotowy do modyfikacji: https://stackblitz.com/edit/uml-class-diagram-realization

4. Dependency

PL: Zależność

Metoda klasy B (Computer) oczekuje obiektu klasy A (Owner).

Więcej: https://www.uml-diagrams.org/dependency.html

  • Rysunek w ASCII art:

      +---------+       +----------+
      | Sticker | - - > | Computer |
      +---------+       +----------+
    

    (przerywana linia ze strzałką)

  • Przykład w kodzie JavaScript:

      class Sticker {
          stick(t /* Computer */) {
              // ...
          }
      }
    
      class Computer {
          // ...
      }
    
      // Sprawdźmy to!
      const c = new Computer();
      const s = new Sticker();
      s.stick(c);
    

5. Aggregation (part-of, has-a)

PL: Agregacja

Klasa B (CPU) jest częścią klasy A (Computer).

Obiekt klasy A (Computer) ma dostęp do publicznych składowych klasy B (CPU).

Więcej: https://www.uml-diagrams.org/aggregation.html

  • Rysunek w ASCII art:

      +----------+     +-----+
      | Computer |<>---| CPU |
      +----------+     +-----+
    

    (ciągła linia z pustym rombem)

  • Przykład w kodzie JavaScript:

      class CPU {}
      class HardDrive {}
    
      class Computer {
          constructor(cpu, hardDrive) {
              this.cpu = cpu;
              this.hardDrive = hardDrive;
          }
      }
    
      // Sprawdźmy to!
      const c = new Computer(new CPU(), new HardDrive('500GB'));
    

6. Composition

PL: Kompozycja

Specjalny rodzaj agregacji.

Obiekty klasy B żyją i umierają wraz z obiektami klasy A.

Klasa B nie może istnieć samodzielnie.

Więcej: https://www.uml-diagrams.org/composition.html

  • Rysunek w ASCII art:

      +----------+      +-----+
      | Computer |<x>---| CPU |
      +----------+      +-----+
    

    (ciągła linia z wypełnionym rombem)

  • Przykład w kodzie JavaScript:

      class CPU {}
      class HardDrive {}
    
      class Computer {
          constructor() {
              this.cpu = new CPU();
              this.hardDrive = new HardDrive('500GB');
          }
      }
    
      // Sprawdźmy to!
      const c = new Computer();
    

Przykład

Poniżej realizacja Diagramu Klas. Diagram stworzony podczas studiów.

Diagram Klas mojego autorstwa. Temat — Zamek. 2010 rok.

tl;dr

Wszystkie relacje w jednym miejscu.