前端设计模式——装饰者模式

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

前端设计模式——装饰者模式

2023-03-10 10:10:10 来源：博客园

(资料图)

装饰者模式（Decorator Pattern）是一种结构型设计模式，它允许你在不改变对象自身的基础上，动态地给一个对象添加额外的功能。在前端中，装饰者模式经常被用于扩展或修改组件的行为或样式。

JavaScript 中的装饰者模式可以通过以下几种方式实现：

1. 通过扩展对象的属性或方法来实现装饰者模式

const obj = {  foo() {    console.log("foo");  }}// 定义一个装饰函数，用于扩展原始对象的方法function barDecorator(obj) {  obj.bar = function() {    console.log("bar");  }  return obj;}// 使用装饰函数来扩展原始对象const decoratedObj = barDecorator(obj);decoratedObj.foo(); // 输出 "foo"decoratedObj.bar(); // 输出 "bar"

在上面的示例中，我们首先定义了一个原始对象 `obj`，它包含一个方法 `foo`。然后，我们定义了一个装饰函数 `barDecorator`，它接收一个对象作为参数，用于为这个对象添加一个新的方法 `bar`。最后，我们使用 `barDecorator` 函数来扩展原始对象 `obj`，并得到了一个新的对象 `decoratedObj`，它包含了原始对象的方法 `foo` 和新的方法 `bar`。

2. 通过扩展对象的原型来实现装饰者模式

// 定义一个原始对象function Foo() {}// 在原型上定义一个方法Foo.prototype.foo = function() {  console.log("foo");}// 定义一个装饰函数，用于扩展原型的方法function barDecorator(clazz) {  clazz.prototype.bar = function() {    console.log("bar");  }}// 使用装饰函数来扩展原型barDecorator(Foo);// 创建一个新的对象，并使用扩展后的方法const obj = new Foo();obj.foo(); // 输出 "foo"obj.bar(); // 输出 "bar"

在上面的示例中，我们首先定义了一个原始对象 `Foo`，它是一个构造函数，用于创建一个对象。然后，我们在原型上定义了一个方法 `foo`。接着，我们定义了一个装饰函数 `barDecorator`，它接收一个构造函数作为参数，用于在原型上添加一个新的方法 `bar`。最后，我们使用 `barDecorator` 函数来扩展原始对象的原型，然后创建一个新的对象 `obj`，并使用扩展后的方法 `foo` 和 `bar`。

需要注意的是，装饰者模式可以嵌套使用，也就是说，我们可以通过多个装饰函数来依次为一个组件添加多个不同的功能。同时，装饰者模式也可以用于对已有的组件进行扩展，使得我们可以在不改变原有代码的情况下，给组件添加新的行为和样式。

关键词：