✨ feat: 添加装饰者模式

Reaper622 · Reaper622 · commit cc19c95d3939 · 2019-10-14T21:05:02.000+08:00
diff --git a/Decorator/Decorator-babel.js b/Decorator/Decorator-babel.js
@@ -0,0 +1,83 @@
+"use strict";
+
+var _class;
+
+function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
+
+function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object.keys(descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc); if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object.defineProperty(target, property, desc); desc = null; } return desc; }
+
+function decorateSword(target, key, descriptor) {
+  // 首先获取到 init 方法
+  var initMethod = descriptor.value; // 宝剑添加攻击力 100 点
+
+  var moreAtk = 100;
+  var returnObj;
+
+  descriptor.value = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    args[0] += moreAtk;
+    returnObj = initMethod.apply(target, args);
+    return returnObj;
+  };
+}
+
+function decorateArmour(target, key, descriptor) {
+  // 首先获取到 init 方法
+  var initMethod = descriptor.value; // 护甲添加防御力 100 点
+
+  var moreDef = 100;
+  var returnObj;
+
+  descriptor.value = function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    args[1] += moreDef;
+    returnObj = initMethod.apply(target, args);
+    return returnObj;
+  };
+}
+
+var Warrior = (_class =
+/*#__PURE__*/
+function () {
+  function Warrior() {
+    var atk = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
+    var def = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
+    var hp = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
+    var mp = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 100;
+
+    _classCallCheck(this, Warrior);
+
+    this.init(atk, def, hp, mp);
+  }
+
+  _createClass(Warrior, [{
+    key: "init",
+    value: function init(atk, def, hp, mp) {
+      this.atk = atk;
+      this.def = def;
+      this.hp = hp;
+      this.mp = mp;
+    }
+  }, {
+    key: "toString",
+    value: function toString() {
+      return "\u653B\u51FB\u529B:".concat(this.atk, ", \u9632\u5FA1\u529B: ").concat(this.def, ", \u8840\u91CF: ").concat(this.hp, ", \u6CD5\u529B\u503C: ").concat(this.mp);
+    }
+  }]);
+
+  return Warrior;
+}(), (_applyDecoratedDescriptor(_class.prototype, "init", [decorateSword, decorateArmour], Object.getOwnPropertyDescriptor(_class.prototype, "init"), _class.prototype)), _class);
+var Reaper = new Warrior();
+console.log("\u52C7\u8005\u72B6\u6001 => ".concat(Reaper));
diff --git a/Decorator/Decorator.js b/Decorator/Decorator.js
@@ -0,0 +1,49 @@
+function decorateSword(target, key, descriptor) {
+    // 首先获取到 init 方法
+    const initMethod = descriptor.value
+    // 宝剑添加攻击力 100 点
+    let moreAtk = 100
+    let returnObj
+    descriptor.value = (...args) => {
+        args[0] += moreAtk
+        returnObj = initMethod.apply(target, args)
+        return returnObj
+    }
+}
+
+function decorateArmour(target, key, descriptor) {
+    // 首先获取到 init 方法
+    const initMethod = descriptor.value
+    // 护甲添加防御力 100 点
+    let moreDef = 100
+    let returnObj
+    descriptor.value = (...args) => {
+        args[1] += moreDef
+        returnObj = initMethod.apply(target, args)
+        return returnObj
+    }
+}
+
+
+class Warrior {
+    constructor(atk=50, def=50, hp=100, mp=100) {
+        this.init(atk,def,hp,mp)
+    }
+    @decorateSword
+    @decorateArmour
+    init(atk, def, hp, mp) {
+        this.atk = atk
+        this.def = def
+        this.hp = hp
+        this.mp = mp
+    }
+
+    toString() {
+        return `攻击力:${this.atk}, 防御力: ${this.def}, 血量: ${this.hp}, 法力值: ${this.mp}`
+    }
+}
+
+
+const Reaper = new Warrior()
+
+console.log(`勇者状态 => ${Reaper}`)
diff --git a/Decorator/Decorator.md b/Decorator/Decorator.md
@@ -0,0 +1,138 @@
+# 装饰者模式
+
+> 装饰者模式是在不改变对象自身的基础上，在程序运行期间给对象动态地添加方法。
+>
+> 本章节的示例需要 babel 支持修饰器模式
+
+装饰者模式非常贴合 JavaScript 动态语言的特性，因为我们可以轻易的改变某个对象，但同时，因为函数是`一等公民`，所以我们会避免直接改写某个函数，来保护代码的可维护性和可扩展性。
+
+其实就像我们拍照后添加的`滤镜`，不同的滤镜给照片赋予了不同的意境，这就是装饰者模式，通过滤镜装饰了照片，而并没有修改照片本身就给其添加了功能。
+
+下面来举一个例子：
+
+#### 初始实例
+
+加入此时你是以为勇者 但勇者当前只有初始数值
+
+```javascript
+class Warrior {
+    constructor(atk=50, def=50, hp=100, mp=100) {
+        this.init(atk,def,hp,mp)
+    }
+
+    init(atk, def, hp, mp) {
+        this.atk = atk
+        this.def = def
+        this.hp = hp
+        this.mp = mp
+    }
+
+    toString() {
+        return `攻击力:${this.atk}, 防御力: ${this.def}, 血量: ${this.hp}, 法力值: ${this.mp}`
+    }
+}
+
+
+const Reaper = new Warrior()
+
+console.log(`勇者状态 => ${Reaper}`) // 勇者状态 => 攻击力:50, 防御力: 50, 血量: 100, 法力值: 100
+```
+
+#### 装饰器的使用
+
+之后我们为勇者配备一把圣剑，创建一个 `decorateSword` 方法，注意这个方法是装饰在`init` 上的
+
+```javascript
+// 本质是使用了 Object.defineProperty 方法
+function decorateSword(target, key, descriptor) {
+    // 首先获取到 init 方法
+    const initMethod = descriptor.value
+    // 宝剑添加攻击力 100 点
+    let moreAtk = 100
+    let returnObj
+    descriptor.value = (...args) => {
+        args[0] += moreAtk
+        returnObj = initMethod.apply(target, args)
+        return returnObj
+    }
+}
+
+
+
+class Warrior {
+    constructor(atk=50, def=50, hp=100, mp=100) {
+        this.init(atk,def,hp,mp)
+    }
+    @decorateSword
+    init(atk, def, hp, mp) {
+        this.atk = atk
+        this.def = def
+        this.hp = hp
+        this.mp = mp
+    }
+
+    toString() {
+        return `攻击力:${this.atk}, 防御力: ${this.def}, 血量: ${this.hp}, 法力值: ${this.mp}`
+    }
+}
+
+
+const Reaper = new Warrior()
+
+console.log(`勇者状态 => ${Reaper}`) // 勇者状态 => 攻击力:150, 防御力: 50, 血量: 100, 法力值: 100
+```
+
+#### 装饰器的叠加
+
+现在，我们这位勇者的防御力还太低了，我们需要为勇者再增添一个护甲
+
+```typescript
+
+// 省略decorateSword
+
+function decorateArmour(target, key, descriptor) {
+    // 首先获取到 init 方法
+    const initMethod = descriptor.value
+    // 护甲添加防御力 100 点
+    let moreDef = 100
+    let returnObj
+    descriptor.value = (...args) => {
+        args[1] += moreDef
+        returnObj = initMethod.apply(target, args)
+        return returnObj
+    }
+}
+
+
+class Warrior {
+    constructor(atk=50, def=50, hp=100, mp=100) {
+        this.init(atk,def,hp,mp)
+    }
+    @decorateSword
+    @decorateArmour
+    init(atk, def, hp, mp) {
+        this.atk = atk
+        this.def = def
+        this.hp = hp
+        this.mp = mp
+    }
+
+    toString() {
+        return `攻击力:${this.atk}, 防御力: ${this.def}, 血量: ${this.hp}, 法力值: ${this.mp}`
+    }
+}
+
+
+const Reaper = new Warrior()
+
+console.log(`勇者状态 => ${Reaper}`) // 勇者状态 => 攻击力:150, 防御力: 150, 血量: 100, 法力值: 100
+```
+
+我们成功的让勇者升级了，他终于可以打败大魔王了（没准还是个史莱姆）
+
+### 总结：
+
+装饰者一般也用来实现 AOP （面向切面编程）利用AOP可以对业务逻辑的各个部分进行隔离，也可以隔离业务无关的功能比如日志上报、异常处理等，从而使得业务逻辑各部分之间的耦合度降低，提高业务无关的功能的复用性，也就提高了开发的效率。
+
+装饰者模式与代理模式类似，但代理模式的意图是不直接访问实体，为实体提供一个替代者，实体内定义了关键功能，而代理提供或拒绝对实体的访问，或者一些其他额外的事情。而装饰者模式的作用就是为对象动态地加入行为。
+
