前端设计模式 —— 3. 原型模式与模版方法模式的异同

原型模式和模版方法模式光听名字很容易搞混，本文就来理一理他们之间的异同。通俗讲：原型模式是把现有的拿过来改一改作为自己的，模版方法是父类中只定义名字，具体实现放到子类中。

原型模式

原型模式的核心在于对象的复制。在JavaScript这种基于原型的语言中，每一个对象都是通过复制另一个对象（即原型）来创建的。原型对象本身是通过某个构造函数创建的，而所有通过这个构造函数创建的对象都共享同一个原型。

在前端开发中，原型模式可以被广泛应用，特别是在处理复杂对象或需要频繁创建相似对象的场景下。下面将介绍几个在前端开发中常见的原型模式的应用案例。

案例一：原型继承

在JavaScript中，原型继承是一种常见的继承方式。通过将一个对象设置为另一个对象的原型，我们可以实现对象之间的继承关系。这种方式可以帮助我们实现代码的重用和扩展。

// 父类
function Animal(name) {
    this.name = name;
}

// 子类
function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 创建对象
var dog1 = new Dog('Buddy', 'Labrador');
var dog2 = new Dog('Max', 'German Shepherd');

在这个例子中，我们通过将Animal.prototype设置为Dog的原型，实现了Dog类对Animal类的继承。这样，Dog类的实例就可以访问Animal类的属性和方法。

案例二：对象克隆

在某些情况下，我们可能需要创建一个与现有对象相似的新对象，但又不想直接修改原始对象。这时，原型模式可以帮助我们实现对象的克隆。

// 原型对象
var prototype = {
    name: '',
    greet: function() {
        return 'Hello, my name is ' + this.name;
    }
};

// 创建对象
var obj1 = Object.create(prototype);
obj1.name = 'Alice';

// 克隆对象
var obj2 = Object.create(prototype);
obj2.name = 'Bob';

console.log(obj1.greet()); // 输出：Hello, my name is Alice
console.log(obj2.greet()); // 输出：Hello, my name is Bob

在这个例子中，我们首先创建了一个原型对象prototype，然后通过Object.create()方法基于该原型对象创建了两个新对象obj1和obj2。通过设置不同的属性值，我们实现了对原型对象的克隆，从而创建了两个相似但独立的对象。

通过原型模式，我们可以实现对象的继承和克隆，从而提高代码的重用性和可维护性，同时也可以实现高效的对象创建和管理。

模板方法模式

模板方法模式的核心思想

模板方法模式的核心思想是定义一个算法的骨架，将具体步骤延迟到子类中实现。这种方法可以帮助我们在不改变算法结构的情况下，修改算法中的某些步骤，从而实现算法的定制和扩展。

在前端开发中，模板方法模式可以被广泛应用，特别是在处理相似但具有不同实现的任务时。下面将介绍几个在前端开发中常见的模板方法模式的应用案例。

案例一：组件生命周期钩子

在现代前端框架中，组件生命周期钩子是一种常见的模板方法模式的应用。框架会定义一组生命周期钩子函数，开发者可以通过覆写这些钩子函数来实现自定义逻辑。

// Vue组件生命周期钩子
export default {
    data() {
        return {
            // 数据...
        };
    },
    created() {
        // 组件创建时的逻辑...
    },
    mounted() {
        // 组件挂载时的逻辑...
    },
    // 其他生命周期钩子...
};

在这个例子中，Vue组件定义了一组生命周期钩子函数，例如created和mounted等。开发者可以通过覆写这些钩子函数来实现自定义的组件逻辑，从而定制组件的行为。

案例二：异步请求封装

在前端开发中，异步请求是一种常见的任务。通过封装异步请求逻辑，我们可以实现统一的错误处理、请求拦截等功能，从而简化代码并提高可维护性。

// 异步请求封装
function request(url, options) {
    // 发起请求前的逻辑...
    
    return fetch(url, options)
        .then(response => {
            // 处理响应数据...
        })
        .catch(error => {
            // 处理错误...
        });
}

在这个例子中，request函数定义了一个异步请求的封装，其中包含了发起请求前的逻辑、处理响应数据的逻辑以及处理错误的逻辑。开发者可以通过覆写这些步骤来实现定制化的请求逻辑。

总的来说，模板方法模式是一种非常实用的设计模式，在前端开发中有着广泛的应用。通过模板方法模式，我们可以定义算法的骨架，将具体步骤延迟到子类中实现，从而实现算法的定制和扩展。

总结

原型模式是复制一下，改一改；模版方法模式则是父级搭框架，孩子们在框架内各自发挥。