Polski frontend

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(); l.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.