1. 观察者模式（Observer Pattern）
Vue 中的应用：Vue.js 中的响应式系统就是基于观察者模式实现的。当数据变化时，所有依赖于该数据的地方都会得到通知并进行相应的更新。
1
2
3
4
5
6
7
8
9
10
11
12// Vue中的观察者模式示例
const vm = new Vue({
data: {
message: "Hello",
},
});
vm.$watch("message", function (newVal, oldVal) {
console.log(`message从${oldVal}变为${newVal}`);
});
vm.message = "Hello, Vue";
2. 发布-订阅模式（Pub/Sub Pattern）
Vue 中的应用：Vue.js 的事件机制使用了发布-订阅模式。组件可以通过
$emit来发布事件，而通过$on来订阅事件。1
2
3
4
5
6
7
8
9
10// Vue中的发布-订阅模式示例
const eventBus = new Vue();
// 订阅事件
eventBus.$on("sayHello", function () {
console.log("Hello from eventBus");
});
// 发布事件
eventBus.$emit("sayHello");
3. 单例模式（Singleton Pattern）
JavaScript 中的应用：单例模式确保类只有一个实例，并提供一个全局访问点。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24// JavaScript中的单例模式示例
const Singleton = (function () {
let instance;
function createInstance() {
return {
name: "I am a singleton object",
};
}
return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
},
};
})();
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // 输出 true
4. 工厂模式（Factory Pattern）
JavaScript 中的应用：工厂模式用于创建对象，隐藏具体的创建逻辑，并提供统一的接口。
1
2
3
4
5
6
7
8
9
10
11
12
13// JavaScript中的工厂模式示例
function Car(options) {
this.brand = options.brand || "Unknown Brand";
this.model = options.model || "Unknown Model";
}
function CarFactory() {}
CarFactory.prototype.createCar = function (options) {
return new Car(options);
};
const factory = new CarFactory();
const myCar = factory.createCar({ brand: "Toyota", model: "Camry" });
设计模式在 Vue 和 JavaScript 中有着广泛的应用，能够帮助开发人员更好地组织代码结构、降低耦合度以及提高代码复用性。对于不同的场景和需求，选择合适的设计模式能够让代码更加健壮和可维护。