learning-jsdp/ch07/decorators.html at main · addyosmani/learning-jsdp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Constructor Decoration Example</title>
  </head>
  <body>
    <h1>Constructor Decoration Example</h1>
    <button onclick="createVehicle()">Create Vehicle</button>
    <div id="vehicleOutput"></div>
    <hr />
    <button onclick="decorateVehicle()">Decorate Vehicle</button>
    <div id="decoratedOutput"></div>

    <script>
      // Vehicle class
      class Vehicle {
        constructor(vehicleType) {
          // Some sane defaults
          this.vehicleType = vehicleType || 'car';
          this.model = 'default';
          this.license = '00000-000';
        }
      }

      // Test instance for a basic vehicle
      const testInstance = new Vehicle('car');
      console.log(testInstance);

      // Let's create a new instance of vehicle to be decorated
      let truck;

      // Create Vehicle function
      function createVehicle() {
        truck = new Vehicle('truck');
        displayVehicle(truck);
      }

      // Decorate Vehicle function
      function decorateVehicle() {
        truck.setModel = function(modelName) {
          this.model = modelName;
        };

        truck.setColor = function(color) {
          this.color = color;
        };

        truck.setModel('CAT');
        truck.setColor('blue');

        displayDecoratedVehicle(truck);
      }

      // Display Vehicle details
      function displayVehicle(vehicle) {
        const output = document.getElementById('vehicleOutput');
        output.innerHTML = `
          <p><strong>Vehicle Type:</strong> ${vehicle.vehicleType}</p>
          <p><strong>Model:</strong> ${vehicle.model}</p>
          <p><strong>License:</strong> ${vehicle.license}</p>
        `;
      }

      // Display Decorated Vehicle details
      function displayDecoratedVehicle(vehicle) {
        const output = document.getElementById('decoratedOutput');
        output.innerHTML = `
          <p><strong>Vehicle Type:</strong> ${vehicle.vehicleType}</p>
          <p><strong>Model:</strong> ${vehicle.model}</p>
          <p><strong>License:</strong> ${vehicle.license}</p>
          <p><strong>Color:</strong> ${vehicle.color}</p>
        `;
      }
    </script>
  </body>
</html>