Vue和JavaScript中常用的设计模式

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 中有着广泛的应用，能够帮助开发人员更好地组织代码结构、降低耦合度以及提高代码复用性。对于不同的场景和需求，选择合适的设计模式能够让代码更加健壮和可维护。