所谓ES6的常用应用

  • const/let
  • 箭头函数
  • Promise
  • async await
  • 解构/扩展运算符
  • Object assgin
  • class static
  • 数组遍历api
  • Reflect
  1. Reflect.defineProperty(Vue.prototype, this.name, {
  2.   value: this,
  3.   writable: false,
  4.   enumerable: false,
  5.   configurable: false
  6. });

包装模式

装饰模式和适配器模式都是 包装模式 (Wrapper Pattern)，它们都是通过封装其他对象达到设计的目的的，但是它们的形态有很大区别。

  • 适配器模式我们使用的场景比较多，比如连接不同数据库的情况，你需要包装现有的模块接口，从而使之适配数据库 —— 好比你手机使用转接口来适配插座那样；

image.png

装饰类

  1. // 装饰类
  2. @annotation
  3. class MyClass { }
  5. function annotation(target) {
  6.    target.annotated = true;
  7. }
  9. 装饰方法或属性

https://github.com/mqyqingfeng/Blog/issues/109

装饰方法

装饰方法本质上还是使用 Object.defineProperty() 来实现的。

Decorators 的本质是利用了 ES5 的 Object.defineProperty 属性，这三个参数其实是和 Object.defineProperty 参数一致的

以上我们都是用于修饰类方法，我们获取值的方式为：

const method = descriptor.value;

方法装饰器有3个参数

  • target
  • key 方法名称
  • desciptor 描述对象
  1. @gang('The Warriors', 'Coney Island')
  2. class Group1 {
  3.     constructor(){
  5.   }
  6. }
  9. @gang('The Riffs', 'Gramercy Park')
  10. class Group2 {
  11.     constructor(){
  13.   }
  14. }
  17. @gang('Turnbull ACs', 'Gunhill')
  18. class Group3 {
  19.     constructor(){
  21.   }
  22. }
  25. function gang(name, location) {
  26.  return function(target) {
  28.     target.locName = name;
  29.     target.location = location;
  31.   }
  33. }
  35. console.log('location=',Group1.location)
  36. console.log('location=',Group2.location)
  37. console.log('location=',Group3.location)

应用

装饰模式经典的应用是 AOP 编程，比如“日志系统”

log注释

  1. class Math {
  2.   @log
  3.   add(a, b) {
  4.     return a + b;
  5.   }
  6. }
  8. function log(target, name, descriptor) {
  9.   var oldValue = descriptor.value;
  11.   descriptor.value = function(...args) {
  12.     console.log(`Calling ${name} with`, args);
  13.     return oldValue.apply(this, args);
  14.   };
  16.   return descriptor;
  17. }
  19. const math = new Math();
  21. // Calling add with [2, 4]
  22. math.add(2, 4);

mixin

  1. const SingerMixin = {
  2.   sing(sound) {
  3.     alert(sound);
  4.   }
  5. };
  7. const FlyMixin = {
  8.   // All types of property descriptors are supported
  9.   get speed() {},
  10.   fly() {},
  11.   land() {}
  12. };
  14. @mixin(SingerMixin, FlyMixin)
  15. class Bird {
  16.   singMatingCall() {
  17.     this.sing('tweet tweet');
  18.   }
  19. }
  21. var bird = new Bird();
  22. bird.singMatingCall();
  23. // alerts "tweet tweet"
  25. function mixin(...mixins) {
  26.   return target => {
  27.     if (!mixins.length) {
  28.       throw new SyntaxError(`@mixin() class ${target.name} requires at least one mixin as an argument`);
  29.     }
  31.     for (let i = 0, l = mixins.length; i < l; i++) {
  32.       const descs = Object.getOwnPropertyDescriptors(mixins[i]);
  33.       const keys = Object.getOwnPropertyNames(descs);
  35.       for (let j = 0, k = keys.length; j < k; j++) {
  36.         const key = keys[j];
  38.         if (!target.prototype.hasOwnProperty(key)) {
  39.           Object.defineProperty(target.prototype, key, descs[key]);
  40.         }
  41.       }
  42.     }
  43.   };
  44. }

debonce

  1. function _debounce(func, wait, immediate) {
  2.         // return 一个function
  3.     // 缓存timeout定时器ID
  4.     var timeout = null; 
  6.       // wrapper function
  7.     // 闭包 return的fn 就被称为闭包。
  8.     return function () {
  9.           // 缓存this
  10.         var context = this;
  11.         var args = arguments;
  13.           //连续触发fn 如果 假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次
  14.         if (timeout) clearTimeout(timeout);
  15.         if (immediate) {
  16.             // 是否马上调用 
  17.               // 第一次按下 立即调用 
  18.             // 然后再wait之内连续按下，timeout有了，不会立即调用，会清除timeout定时器，直到wait之后，timeout = null
  19.             var callNow = !timeout;
  20.             timeout = setTimeout(function(){
  21.                 timeout = null;
  22.             }, wait)
  23.             if (callNow) func.apply(context, args)
  24.         }
  25.           // 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数
  26.         // 大于wait 函数才会被执行
  27.         else {
  28.             timeout = setTimeout(function(){
  29.                 func.apply(context, args)
  30.             }, wait);
  31.         }
  32.     }
  33. }
  35. function debounce(wait, immediate) {
  36.   return function handleDescriptor(target, key, descriptor) {
  37.     const callback = descriptor.value;
  39.     if (typeof callback !== 'function') {
  40.       throw new SyntaxError('Only functions can be debounced');
  41.     }
  43.     var fn = _debounce(callback, wait, immediate)
  45.     // 这样写什么意思？
  46.     // return 一个descriptor
  47.     return {
  48.       ...descriptor,
  49.       value() {
  50.         fn()
  51.       }
  52.     };
  53.   }
  54. }

钢铁侠的例子

  1. function decorateArmour(target, key, descriptor) {
  2.   // 装饰的是init方法，必须调用init
  3.   const method = descriptor.value;
  4.   let moreDef = 100;
  5.   let ret;
  6.   descriptor.value = (...args)=>{
  7.     args[0] += moreDef;
  8.     ret = method.apply(target, args);
  9.     return ret;
  10.   }
  11.   return descriptor;
  12. }
  14. class Man{
  15.   constructor(def = 2,atk = 3,hp = 3){
  16.     this.init(def,atk,hp);
  17.   }
  19.   @decorateArmour
  20.   init(def,atk,hp){
  21.     this.def = def; // 防御值
  22.     this.atk = atk;  // 攻击力
  23.     this.hp = hp;  // 血量
  24.   }
  25.   toString(){
  26.     return `防御力:${this.def},攻击力:${this.atk},血量:${this.hp}`;
  27.   }
  28. }
  30. var tony = new Man();
  32. console.log(`当前状态 ===> ${tony}`);
  33. // 输出：当前状态 ===> 防御力:102,攻击力:3,血量:3

playground

jsfiddle.net/wcrowe/o5owvteL/

参考

http://taobaofed.org/blog/2015/11/16/es7-decorator/