learning-jsdp/ch07/decorators_interface_3.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>MacBook Decorator Example</title>
  </head>
  <body>
    <h1>MacBook Decorator Example</h1>
    <button id="createMacBook">Create MacBook</button>
    <button id="decorateMacBook">Decorate MacBook</button>
    <div id="macBookOutput"></div>

    <script>
      // Interface constructor
      function Interface(name, methods) {
        if (arguments.length !== 2) {
          throw new Error('Interface constructor called with ' + arguments.length + ' arguments, but expected exactly 2.');
        }
        this.name = name;
        this.methods = [];
        for (let i = 0; i < methods.length; i++) {
          if (typeof methods[i] !== 'string') {
            throw new Error('Interface constructor expects method names to be passed in as strings.');
          }
          this.methods.push(methods[i]);
        }
      }

      // Ensure implementation of an interface
      Interface.ensureImplements = function (object, ...interfaces) {
        if (arguments.length < 2) {
          throw new Error('Function Interface.ensureImplements called with ' + arguments.length + ' arguments, but expected at least 2.');
        }

        for (let i = 0; i < interfaces.length; i++) {
          const interfaceInstance = interfaces[i];
          if (interfaceInstance.constructor !== Interface) {
            throw new Error('Function Interface.ensureImplements expects arguments two and above to be instances of Interface.');
          }

          for (let j = 0; j < interfaceInstance.methods.length; j++) {
            const method = interfaceInstance.methods[j];
            if (!object[method] || typeof object[method] !== 'function') {
              throw new Error('Function Interface.ensureImplements: object does not implement the ' + interfaceInstance.name + ' interface. Method ' + method + ' was not found.');
            }
          }
        }
      };

      // MacBook interface
      const MacBook = new Interface('MacBook', ['addCase', 'getPrice']);

      // MacBook Pro class
      class MacBookPro {
        addCase() {
          return 'Adding case to MacBook Pro';
        }

        getPrice() {
          return 900.0;
        }
      }

      // MacBook Decorator class
      class MacBookDecorator {
        constructor(macbook) {
          Interface.ensureImplements(macbook, MacBook);
          this.macbook = macbook;
        }

        addCase() {
          return this.macbook.addCase();
        }

        getPrice() {
          return this.macbook.getPrice();
        }
      }

      // Case Decorator class
      class CaseDecorator extends MacBookDecorator {
        constructor(macbook) {
          super(macbook);
        }

        addCase() {
          return `${super.addCase()}, and additional case`;
        }

        getPrice() {
          return super.getPrice() + 45.0;
        }
      }

      // Create MacBook button click event
      const createMacBookButton = document.getElementById('createMacBook');
      createMacBookButton.addEventListener('click', function () {
        const macBookPro = new MacBookPro();
        displayMacBook(macBookPro);
      });

      // Decorate MacBook button click event
      const decorateMacBookButton = document.getElementById('decorateMacBook');
      decorateMacBookButton.addEventListener('click', function () {
        const macBookPro = new MacBookPro();
        const decoratedMacBookPro = new CaseDecorator(macBookPro);
        displayMacBook(decoratedMacBookPro);
      });

      // Display MacBook details
      function displayMacBook(macBook) {
        const output = document.getElementById('macBookOutput');
        output.innerHTML = `
          <p><strong>Add Case:</strong> ${macBook.addCase()}</p>
          <p><strong>Price:</strong> $${macBook.getPrice()}</p>
        `;
      }
    </script>
  </body>
</html>