4. Make a JavaScript Class Model
Prev Chapter 5. Implementing Constraint Validation in a Plain JS Web App Next

4. Make a JavaScript Class Model

Using the information design model shown in Figure 4.2 above as the starting point, we make a JavaScript class model by performing the following steps:

  1. Create a check operation for each (non-derived) property in order to have a central place for implementing all the constraints that have been defined for a property in the design model. For a standard identifier attribute, such as Book::isbn, two check operations are needed:

    1. A basic check operation, such as checkIsbn, for checking all basic constraints of the attribute, except the mandatory value and the uniqueness constraints.

    2. An extended check operation, such as checkIsbnAsId, for checking, in addition to the basic constraints, the mandatory value and uniqueness constraints that are required for a standard identifier attribute.

    The checkIsbnAsId operation is invoked on user input for the isbn form field in the create book form, and also in the setIsbn method, while the checkIsbn operation can be used for testing if a value satisfies the syntactic constraints defined for an ISBN.

  2. Create a setter operation for each (non-derived) single-valued property. In the setter, the corresponding check operation is invoked and the property is only set, if the check does not detect any constraint violation.

This leads to the JavaScript class model shown on the right-hand side of the mapping arrow in the following figure.

Figure 5.1. From an information design model to a JS class model

From an information design model to a JS class model
From an information design model to a JS class model
From an information design model to a JS class model

Essentially, the JS class model extends the design model by adding checks and setters for each property. The attached invariants have been dropped since they are taken care of in the checks. Property ranges have been turned into JavaScript datatypes (with a reminder to their real range in curly braces). Notice that the names of check functions are underlined, since this is the convention in UML for class-level (as opposed to instance-level) operations.

Prev Up Next
3. Using ES6 Modules Home 5. Set up the Folder Structure