乐趣区

关于前端:设计模式笔记

jiezi

单例模式

定义

确保一个类仅有一个实例，并提供一个拜访它的全局拜访点。（屡次实例化类也只创立一个实例对象）

实现 

// 单例构造函数
function CreateSingleton (name) {
    this.name = name;
    this.getName();};

// 获取实例的名字
CreateSingleton.prototype.getName = function() {console.log(this.name)
};
// 单例对象
var Singleton = (function(){
    var instance;
    return function (name) {if(!instance) {instance = new CreateSingleton(name);
        }
        return instance;
    }
})();

// 创立实例对象 1
var a = new Singleton('a');
// 创立实例对象 2
var b = new Singleton('b');

console.log(a===b);

场景

模态框

策略模式

定义

一些列算法，把他们封装起来，并且能够互相替换。(就是把看似毫无分割的代码提取封装、复用，使之更容易被了解和拓展)

实现

1. 定义方法（表单校验的办法）

    const strategies = {
      // 非空
      noEmpty: function(value, errMsg){if(value === ''){return errMsg}
      },
      // 最小长度
      minLength: function(value, length, errMsg){if(!value || value.length < length){return errMsg}
      },
      // 最大长度
      maxLength: function(value, length, errMsg){if(value.length > length){return errMsg}
      }
    }

2. 设置校验器 

    // 创立验证器
    var Validator = function(strategies){
      this.strategies = strategies
      this.cache = [] // 存储校验规定}
    // 增加校验规定
    Validator.prototype.add = function(dom, rules){
      rules.forEach(item => {this.cache.push(() => {
          let value = dom.value
          let arr = item.rule.split(':')
          let name = arr.shift()
          let params = [value, ...arr, item.errMsg]
          // apply 保障上下文统一
          return this.strategies[name].apply(dom, params)
        })
      })
    }
    // 校验后果
    Validator.prototype.validate = function(dom, rules, errMsg){
      // 遍历 cache 外面的校验函数
      for(let i = 0, validateFun; validateFun = this.cache[i++];){const message = validateFun()
        // 返回报错信息，终止验证并抛出异样
        if(message) return message
      }
    }

3. 进行校验 

 // 校验函数
    function validate(){
      // 实例验证器
      const validator = new Validator(strategies)
      // 增加验证规定
      validator.add(form.username, [
        {
          rule: 'noEmpty',
          errMsg: '用户名不能为空!'
        },
        {
          rule: 'minLength:3',
          errMsg: '用户名长度大于 3!'
        }
      ])
      validator.add(form.password, [
        {
          rule: 'minLength:6',
          errMsg: '明码长度大于 6!'
        },
        {
          rule: 'maxLength:10',
          errMsg: '明码最大长度为 10!'
        }
      ])
      // 进行校验，并返回后果
      return validator.validate()}

应用场景

表单校验，多层 if-else，switch 判断

代理模式

定义

为其余对象提供一种代理以管制对这个对象的拜访（拦挡，中间层，防止间接批改原对象）

缓存代理实现 

const getCacheProxy = (fn, cache = new Map()) => {
  return new Proxy(fn, {apply(target, context, args) {const argsString = args.join(' ');
      if (cache.has(argsString)) {// 如果有缓存, 间接返回缓存数据        console.log(` 输入 ${args} 的缓存后果: ${cache.get(argsString)}`);
        
        return cache.get(argsString);
      }
      const result = fn(...args);
      cache.set(argsString, result);

      return result;
    }
  })
}

调用 

const getFibProxy = getCacheProxy(getFib);
getFibProxy(40);

场景

设置公有属性，网络拜访须要设置拦挡时，缓存等。

公布订阅

定义

一种对象间一对多的依赖关系，当一个对象的状态发送扭转时，所有依赖于它的对象都将失去状态扭转的告诉。（一对多）

实现思路

  • 在该对象上创立一个缓存列表（调度核心 Event Channel）
  • on 办法用来把函数增加到缓存列表中（订阅者注册事件到调度核心）
  • emit 办法取到 argument 里第一个当作 event，依据 event 值去执行对应缓存列表中的函数（发布者公布事件到调度核心，调度核心解决代码）
  • off 办法能够依据 event 值勾销订阅（勾销订阅）
  • once 办法只监听一次，调用结束后删除缓存函数（订阅一次）

代码实现 

class EventEmitter {constructor() {
        // 缓存列表
        this.listener = {}}

    // 订阅
    on(eventName, fn) {
        // 如果对象中没有对应的 event 值，也就是说明没有订阅过，就给 event 创立个缓存列表
        // 如有对象中有相应的 event 值，把 fn 增加到对应 event 的缓存列表里
        if(!this.listener[eventName]){this.listener[eventName] = [];}
        this.listener[eventName].push(fn);
    }

    // 勾销订阅
    off(eventName, fn) {let callbacks = this.listener[eventName];
        // 缓存列表中没有对应的 fn，返回 false
        if(!callbacks){return false;}
        if(!fn){
            // 如果未传入 fn，则将缓存列表中对应的 fn 都清空
            callbacks && (callbacks.length = 0);
        } else {
            let cb;
            // 遍历所对应的 fn，判断和那个 fn 雷同，雷同则删除
            for (let i = 0, cbLen = callbacks.length; i < cbLen; i++) {cb = callbacks[i];
                if (cb == fn || cb.fn == fn) {callbacks.splice(i, 1);
                    break
                }
            }
        }
    }

    // 监听一次
    once(eventName, fn) {
        // 先绑定，运行时删除对应的值
        let on = () => {this.off(eventName, on);
            fn.apply(this, arguments);
        }

        on.fn = fn;
        this.on(eventName, on);

    }

    // 公布
    emit(eventName, data) {const callbacks = this.listener[eventName];
        if(callbacks) {callbacks.forEach((c) => {c(data);
            })
        }
    }
}

let a = new EventEmitter();
function aa(x) {console.log(x);
}
a.on("kak", aa)
a.on("kak", (data) => {console.log("1", data);
})


a.emit('kak', 'hahahah');
a.off('kak',aa);
a.emit('kak', 'hahahah');

场景

权限状态，一对多的场景。

中介者模式

定义

用一个中介对象来封装一系列的对象交互。中介者使各对象不须要显式地互相援用，从而使其耦合涣散，而且能够独立地扭转它们之间的交互。（是对象与对象之间）

实现 

  // 创立中介者
  var Mediator = function() {var _msg = {}
    return {register: function(type, action) {if (!_msg[type]) _msg[type] = []
        _msg[type].push(action)
      },
      send: function(type) {if(_msg[type]) {for (var i = 0; i < _msg[type].length; i++) {_msg[type][i] && _msg[type][i]()}
        }
      }
    }
  }()

  Mediator.register('demo', function () {console.log('first')
  })
  Mediator.register('demo', function () {console.log('second')
  })
  Mediator.send('demo')

场景

商品抉择不同色彩，尺码（等不同维度）时显示库存

组合模式

定义

又叫“局部整体”模式，将对象组合成树形构造，以示意“局部 - 整体”的层次结构。通过对象的多态性体现，使得用户对单个对象和组合对象的应用具备一致性。（文件拜访目录，tree 构造）。对外裸露对立接口，拜访顶层对象时会自上而下遍历子对象。

实现 

// 树对象 - 文件目录
class CFolder {constructor(name) {
        this.name = name;
        this.files = [];}

    add(file) {this.files.push(file);
    }

    scan() {for (let file of this.files) {file.scan();
        }
    }
}

// 叶对象 - 文件
class CFile {constructor(name) {this.name = name;}

    add(file) {throw new Error('文件上面不能再增加文件');
    }

    scan() {console.log(` 开始扫描文件：${this.name}`);
    }
}

let mediaFolder = new CFolder('娱乐');
let movieFolder = new CFolder('电影');
let musicFolder = new CFolder('音乐');

let file1 = new CFile('钢铁侠.mp4');
let file2 = new CFile('再谈记忆.mp3');
movieFolder.add(file1);
musicFolder.add(file2);
mediaFolder.add(movieFolder);
mediaFolder.add(musicFolder);
mediaFolder.scan();


/* 输入:
开始扫描文件：钢铁侠.mp4
开始扫描文件：再谈记忆.mp3
*/

场景

树形构造查找（地区级联显示

责任链模式

定义

使多个对象都有机会解决申请，从而防止了申请的发送者与多个接收者间接的耦合关系，将这些接收者连接成一条链，顺着这条链传递该申请，直到找到能解决该申请的对象。

实现 

function order500 (orderType, pay, stock) {if (orderType === 1 && pay === true) {console.log('500 元定金预购，失去 100 元优惠券')
  } else {return 'nextSuccessor'}
}

function order200 (orderType, pay, stock) {if (orderType === 2 && pay === true) {console.log('200 元定金预购，失去 50 元优惠券')
  } else {return 'nextSuccessor'}
}

function orderNormal (orderType, pay, stock) {if (stock > 0) {console.log('普通用户购买，无优惠券')
  } else {console.log('手机库存有余')
  }
}

应用 AOP 创立职责链 

Function.prototype.after = function (fn) {
  const self = this
  return function () {const res = self.apply(this, arguments)
    if (res === 'nextSuccessor') {return fn.apply(this, arguments)
    }
    return res
  }
}

const order = order500.after(order200).after(orderNormal)
order(1, true, 500)   // 500 元定金预购，失去 100 元优惠券
order(2, true, 500)   // 200 元定金预购，失去 50 元优惠券
order(3, true, 500)   // 普通用户购买，无优惠券
order(1, false, 0)    // 手机库存有余

应用场景

商品促销不同顾客优惠力度不同的购买

退出移动版