常用设计模式

前端设计模式

发布订阅模式

class EventEmiter {
  constructor() {
    this.instance = undefined;
    this._events = {};
  };
  static getInstance() {
    if(!this.instance) {
      this.instance = new EventEmiter();
    }
    return this.instance;
  }
  on(name, callback) {
    if(this._events[name]) {
      this._events[name].push(callback);
      return ;
    }
    this._events[name] = [callback];
  };
  emit(name, ...reset) {
    if(!this._events[name]) {
      return ;
    }
    this._events[name].forEach(item => {
      item.apply(this, reset);
    })
  };
  removeListener(name, callback) {
    this._events[name] = this._events[name].filter(item => item !== callback);
  };
  once(name, callback) {
    let that = this;
    function one() {
      callback.apply(this, arguments);
      that.removeListener(name, one);
    }
    that.on(name, one);
  }
}
let test = EventEmiter.getInstance();
console.log(test);
// let Man = EventEmiter.getInstance();
class Man extends EventEmiter {
  constructor() {
    this.el = 'child';
  }
}

let man = Man.getInstance();
console.log('54', man);
man.on('eat', e => {
  console.log(e);
})

man.emit('eat', '早饭');

man.once('after', e => {
  console.log(e);
});

man.emit('after', '蚂蚱');
man.emit('after', '蜂蜜');

策略模式

/**
 * @description 策略模式 与实践
 * @since 2019-10-16
 * @author chaizhiyang
 */
const strategys = {
  isNotEmpty: (value, errorMsg) => {
    if (value === '') {
      return errorMsg;
    }
  },
  minLength: (value, length, errorMsg) => {
    if (value.length < length) {
      return errorMsg;
    }
  },
  maxLength: (value, length, errorMsg) => {
    if (value.length > length) {
      return errorMsg;
    }
  },
  isEqual: (value, value2, errorMsg) => {
    if (value !== value2) {
      return errorMsg;
    }
  },
  mobileFormat: (value, errorMsg) => {
    if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
      return errorMsg;
    }
  },
}
class Validator {
  constructor() {
    this.cache = [];
    this.instance = undefined;
  }
  add(dom, rule , errorMsg) {
    let str = rule.split(':');
    this.cache.push(function() {
      let strate = str.shift();
      str.unshift(dom);
      str.push(errorMsg);
      return strategys[strate].apply(dom, str);
    })
  };
  start() {
    for (var i = 0, validatorFunc; (validatorFunc = this.cache[i++]); ) {
      var msg = validatorFunc();
      if (msg) {
        return msg;
      }
    }
  }
}

let validate = new Validator();

validate.add('123', 'minLength:4','最小程度为4个字符，请重新输入');

let result = validate.start();

console.log('68', result);

单例模式

/**
 * @description 发布订阅模式
 * @since 2019-10-07
 * @author gouweicao
 */

class EventEmiter {
  constructor() {
    this.instance = undefined;
    this._events = [];
  }
  getInstance() {
    if(!this.instance) {
      this.instance = new EventEmiter();
    }
    return this.instance;
  };
  on(name,callback) {
    if(!this._events[name]) {
      this._events[name].push(callback);
    }
    this._events[name] = callback;
  };
  emit(name,...reset) {
    if(!this._events[name]) {
      return false;
    }
    this._events[name].forEach(item => {
      item.apply(this, reset);
    })
  };
}

其中getInstance导出单例模式保证该类实例化对象的唯一性