Design Pattern Examples in JavaScript

Model and code examples of GoF Design Patterns for JavaScript.
This project is available for the following objectives:

• To understand GoF Design Pattern examples in JavaScript.
• To understand the mapping between UML model and JavaScript code.
• To try model-driven development (MDD) using Astah and m plus plug-in.

UML model example:

JavaScript code example:

// ˅
'use strict';

import { FileSystemElement } from './file-system-element.mjs';

// ˄

export class FileElement extends FileSystemElement {
    // ˅
    
    // ˄

    _name;

    _size;

    constructor(name, size) {
        // ˅
        super();
        this._name = name;
        this._size = size;
        // ˄
    }

    get name() {
        // ˅
        return this._name;
        // ˄
    }

    get size() {
        // ˅
        return this._size;
        // ˄
    }

    // Print this element with the "upperPath".
    print(upperPath) {
        // ˅
        console.log(`${upperPath}/${this.toString()}`);
        // ˄
    }

    // ˅
    
    // ˄
}

// ˅

// ˄

Installation

UML Modeling Tool

• Download the modeling tool Astah UML/Professional ver.10.0.0 or higher, and install.
• Download m plus plug-in ver.3.0.0-preview or higher, and add it to Astah.
  How to add plugins to Astah

JavaScript Development Environment

1. Install Visual Studio Code ver.1.46 or higher.
2. Install Live Server extensions for VS Code.
3. Install Chrome browser.
4. Install Node.js ver.12.17.0 or higher.

Usage

Code Generation from UML

1. Open the Astah file (model/DesignPatternExamplesInJavascript.asta).
2. Select model elements on the model browser of Astah.
3. Click the Generate Code button.
   
   The generated code has User Code Area. The User Code Area is the area enclosed by "˅" and "˄". Handwritten code written in the User Code Area remains after a re-generation. View code example.
   For detailed usage of the tools, please see Astah Manual and m plus plug-in tips.

Run

1. Open the workspace file (design-pattern-examples-in-javascript.code-workspace) in VS Code.

2. Select the Run icon in the Activity Bar on the side of VS Code.

3. Select the configuration named Launch Program using the Configuration drop-down in the Run view.

4. Click the Start Debugging button.
   

   Note: Before running patterns Command, Mediator, and State, you need to click to Go Live from the status bar to turn a server on. After running those patterns, click again to turn the server off.
   

For detailed usage of the tools, please see Astah Manual and M PLUS plug-in Tips.

References

• Gamma, E. et al. Design Patterns: Elements of Reusable Object-Oriented Software, Addison-Wesley, 1994
• Hiroshi Yuki. Learning Design Patterns in Java [In Japanese Language], Softbank publishing, 2004

License

This project is licensed under the Creative Commons Zero (CC0) license. The model and code are completely free to use.

Other Language Examples

C++, C#, Crystal, Go, Java, Kotlin, Python, Ruby, Scala, Swift, TypeScript