JS 結構型設計模式之語法優化 Module 與 Decorator 對於程式碼模組化之實踐

const moduleCounter = (function () {
  let count = 0;
  return {
    getValue: function () {
      return count;
    },
    increment: function () {
      return ++count;
    },
    reset: function () {
      console.log("reset:" + count);
      count = 0;
    },
  };
})();

moduleCounter.getValue();
moduleCounter.increment();
moduleCounter.reset();

// counter.js
let count = 0;

export function getValue() {
  return count;
}

export function increment() {
  return ++count;
}

export function reset() {
  console.log("reset:" + count);
  count = 0;
}

import { getValue, increment, reset } from "./counter.js";

console.log(getValue());

// 1. 定義基礎 Class 一台機車包含牌照及 CC 數
class Motorcycle {
  constructor(license, volume) {
    this.license = license;
    this.volume = volume;
  }
}

//  2. 定義 Sym 工廠並且定義 createMotor function
class MotorFactory {
  createMotor({ volume }) {
    if (volume <= 50) {
      return new Motorcycle("green", volume);
    }

    if (volume < 150) {
      return new Motorcycle("white", volume);
    }
  }
}

// 3. 定義 mixins
const motorComponentMixins = {
  makeHornSound() {
    console.log(`${this.license} ba ba`);
  },
};

Object.assign(Motorcycle.prototype, motorComponentMixins);

// 建立工廠物件
const motorFactory = new MotorFactory();

// 透過工廠物件生產機車
const motorGreenLicense = motorFactory.createMotor({ volume: 50 });
const motorWhiteLicense = motorFactory.createMotor({ volume: 125 });

console.log(motorGreenLicense);
console.log(motorWhiteLicense);

motorGreenLicense.makeHornSound();

let validator = {
  set: function (obj, prop, value) {
    if (prop === "age") {
      if (!Number.isInteger(value)) {
        throw new TypeError("The age is not an integer");
      }
      if (value > 200) {
        throw new RangeError("The age seems invalid");
      }
      if (value > 18) {
        console.log("Can ride motorcycle with license");
      }
    }

    // The default behavior to store the value
    obj[prop] = value;

    // Indicate success
    return true;
  },
};

let person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
person.age = "young"; // Throws an TypeError exception
person.age = 300; // Throws an RangeError exception

// 原有的機車
class Motorcycle {
  constructor() {
    this.price = 0;
    this.description = "Basic Motorcycle";
  }
  getPrice() {
    return this.price;
  }
  getDescription() {
    return this.description;
  }
}

// 改裝後的機車 (裝飾者)
class CustomizedMotorcycle {
  constructor(motorcycle) {
    this.motorcycle = motorcycle;
  }
  getPrice() {
    return this.motorcycle.getPrice() + 1000;
  }
  getDescription() {
    return this.motorcycle.getDescription() + " with Customized Parts";
  }
}

// 性能優化的機車 (裝飾者)
class HighPerformanceMotorcycle {
  constructor(motorcycle) {
    this.motorcycle = motorcycle;
  }
  getPrice() {
    return this.motorcycle.getPrice() + 2000;
  }
  getDescription() {
    return this.motorcycle.getDescription() + " with High Performance Parts";
  }
}

// 使用
let basicMotorcycle = new Motorcycle();
console.log(
  basicMotorcycle.getDescription() + " costs $" + basicMotorcycle.getPrice()
);

let customizedMotorcycle = new CustomizedMotorcycle(basicMotorcycle);
console.log(
  customizedMotorcycle.getDescription() +
    " costs $" +
    customizedMotorcycle.getPrice()
);

let highPerformanceMotorcycle = new HighPerformanceMotorcycle(
  customizedMotorcycle
);
console.log(
  highPerformanceMotorcycle.getDescription() +
    " costs $" +
    highPerformanceMotorcycle.getPrice()
);

import { Component } from "@angular/core";

@Component({
  selector: "hello-world",
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
  `,
})
export class HelloWorldComponent {
  // The code in this class drives the component's behavior.
}