JavaScript 开发人员的基本设计模式：提高您的编码掌握程度

<code class="javascript">class Singleton {
    constructor() {
        if (Singleton.instance) {
            return Singleton.instance;
        }
        Singleton.instance = this;
        this.data = {};
    }
    setData(key, value) {
        this.data[key] = value;
    }
    getData(key) {
        return this.data[key];
    }
}

// 使用示例
const instance1 = new Singleton();
instance1.setData("theme", "dark");
const instance2 = new Singleton();
console.log(instance2.getData("theme")); // 输出: dark</code>

<code class="javascript">class Car {
  constructor(model) {
    this.type = "car";
    this.model = model;
  }
}

class Bike {
  constructor(model) {
    this.type = "bike";
    this.model = model;
  }
}

class VehicleFactory {
  static createVehicle(type, model) {
    if (type === "car") return new Car(model);
    if (type === "bike") return new Bike(model);
    throw new Error("未知车辆类型");
  }
}

// 使用示例
const tesla = VehicleFactory.createVehicle("car", "tesla");
console.log(tesla); // 输出: Car { type: 'car', model: 'tesla' }</code>

<code class="javascript">class Subject {
    constructor() {
        this.observers = [];
    }
    subscribe(observer) {
        this.observers.push(observer);
    }
    notify(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}
class Observer {
    constructor(name) {
        this.name = name;
    }
    update(data) {
        console.log(`${this.name} 收到：${data}`);
    }
}

// 使用示例
const newsChannel = new Subject();
const subscriber1 = new Observer("Alice");
const subscriber2 = new Observer("Bob");
newsChannel.subscribe(subscriber1);
newsChannel.subscribe(subscriber2);
newsChannel.notify("突发新闻！");</code>

<code class="javascript">function withTimestamp(func) {
    return function(message) {
        func(`[${new Date().toISOString()}] ${message}`);
    };
}

// 使用示例
const log = console.log;
const logWithTimestamp = withTimestamp(log);
logWithTimestamp("Hello, world!"); // 输出: [2024-12-14T12:00:00.000Z] Hello, world!</code>

<code class="javascript">class PaymentStrategy {
    pay(amount) {
        throw new Error("pay() 方法必须实现。");
    }
}
class CreditCardPayment extends PaymentStrategy {
    pay(amount) {
        console.log(`已使用信用卡支付 $${amount}。`);
    }
}
class PayPalPayment extends PaymentStrategy {
    pay(amount) {
        console.log(`已使用PayPal支付 $${amount}。`);
    }
}

// 使用示例
const paymentMethod = new PayPalPayment();
paymentMethod.pay(100); // 输出: 已使用PayPal支付 $100。</code>

<code class="javascript">const vehiclePrototype = {
    start() {
        console.log(`${this.model} 正在启动。`);
    },
};

function createVehicle(model) {
    const vehicle = Object.create(vehiclePrototype);
    vehicle.model = model;
    return vehicle;
}

// 使用示例
const car = createVehicle("Toyota");
car.start(); // 输出: Toyota 正在启动。</code>

<code class="javascript">class Light {
    on() {
        console.log("灯已打开");
    }
    off() {
        console.log("灯已关闭");
    }
}
class LightOnCommand {
    constructor(light) {
        this.light = light;
    }
    execute() {
        this.light.on();
    }
}

// 使用示例
const light = new Light();
const lightOnCommand = new LightOnCommand(light);
lightOnCommand.execute(); // 输出: 灯已打开</code>