前端设计模式

Posted 2020-12-15 supersmile

　　本文将对常用的前端设计模式进行简单介绍，不同语言可能有所区别。设计模式主要针对特定的问题而采取某种特定的技术或者方法来达到目的。

　　前端常用的设计模式有以下：

　　1.单例模式；

　　2.工厂模式；

　　3.策略模式；

　　4.代理模式；

　　5.观察者模式；

　　6.模块模式；

　　7.命令模式；

一、单例模式

　　这种设计模式的思想是确保一个类只有唯一实例，一般用于全局缓存，比如全局window，唯一登录浮窗等；

var Single = function(name,age) {
    this.name = name;
    this.age = age;
    this.instance = null;
}
Single.getInstance = function(name,age) {
    if(!this.instance) {
        this.instance = new Singleton(name,age);
    }
    return this.instance;
}

二、工厂模式

　　工厂模式是创建对象的常用设计模式，为了不暴露创建对象的具体逻辑，将逻辑封装在一个函数中，这个函数就称为一个工厂。本质上是一个负责生产对象实例的工厂。工厂模式分为简单工厂，工厂方法和抽象工厂。

简单工厂：

let UserFactory = function (role) {
  function SuperAdmin() {
    this.name = "超级管理员",
    this.viewPage = [‘首页‘, ‘通讯录‘, ‘发现页‘, ‘应用数据‘, ‘权限管理‘]
  }
  function Admin() {
    this.name = "管理员",
    this.viewPage = [‘首页‘, ‘通讯录‘, ‘发现页‘, ‘应用数据‘]
  }
  function NormalUser() {
    this.name = ‘普通用户‘,
    this.viewPage = [‘首页‘, ‘通讯录‘, ‘发现页‘]
  }

  switch (role) {
    case ‘superAdmin‘:
      return new SuperAdmin();
      break;
    case ‘admin‘:
      return new Admin();
      break;
    case ‘user‘:
      return new NormalUser();
      break;
    default:
      throw new Error(‘参数错误, 可选参数:superAdmin、admin、user‘);
  }
}

三、策略模式

　　策略模式的本意将算法的使用与算法的实现分离开来，避免多重判断调用哪些算法。

// 对于vip客户
function vipPrice() {
    this.discount = 0.5;
}
 
vipPrice.prototype.getPrice = function(price) {
　　return price * this.discount;
}
// 对于老客户
function oldPrice() {
    this.discount = 0.3;
}
 
oldPrice.prototype.getPrice = function(price) {
    return price * this.discount;
}
// 对于普通客户
function Price() {
    this.discount = 1;
}
 
Price.prototype.getPrice = function(price) {
    return price ;
}

// 上下文，对于客户端的使用
function Context() {
    this.name = ‘‘;
    this.strategy = null;
    this.price = 0;
}
 
Context.prototype.set = function(name, strategy, price) {
    this.name = name;
    this.strategy = strategy;
    this.price = price;
}
Context.prototype.getResult = function() {
    console.log(this.name + ‘ 的结账价为: ‘ + this.strategy.getPrice(this.price));
}

var context = new Context();
var vip = new vipPrice();
context.set (‘vip客户‘, vip, 200);
context.getResult();   // vip客户 的结账价为: 100

var old = new oldPrice();
context.set (‘老客户‘, old, 200);
context.getResult();  // 老客户 的结账价为: 60

var Price = new Price();
context.set (‘普通客户‘, Price, 200);
context.getResult();  // 普通客户 的结账价为: 200

四、代理模式

　　代理模式主要是为其他对象提供一种代理以控制对这个对象的访问，主要解决在直接访问对象时带来的问题，比如说：要访问的对象在远程的机器上，在面向对象系统中，有些对象由于某些原因(比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问)，直接访问会给使用者或者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。

五、观察者模式

　　也叫发布订阅模式，在这种模式中，一个订阅者订阅发布者，当一个特定的事件发生的时候，发布者会通知（调用）所有的订阅者

var EventCenter = (function(){
    var events = {};
    function on(event, handler){
        events[event] = events[event] || [];
        events[event].push({
            handler: handler
        });
    }

    function fire(event, args){
        if (!events[event]) {return}
        for (var i = 0; i < events[event].length; i++) {
            events[event][i].handler(args);
        }
    }

    function off(event){
        delete events[event];
    }

    return {
        on: on,
        fire: fire,
        off: off
    }
})();

EventCenter.on(‘event‘, function(data){
console.log(‘event received...‘);
});
EventCenter.fire(‘event‘);

六、模块模式；

　　模块模式可以指定类想暴露的属性和方法，并且不会污染全局。采用闭包的形式。

var Person = (function() {
    var name = ‘xxx‘
    function sayName() {
        console.log(name)
    }
    return{
        name: name,
        sayName: sayName
    }
})()

七、命令模式；

　　用来对方法调用进行参数化处理和传送，经过这样处理过的方法调用可以在任何需要的时候执行。

　　有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时希望用一种松耦合的方式来设计软件，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

　　实现：将函数的调用、请求和操作封装成一个单一的对象。

var setCommand = function(button,func) {
    button.onclick = function(){
        func();
    }
 }; 
 var MenuBar = {
    refersh: function(){
        alert("刷新菜单界面");
    }
 };
 var SubMenu = {
    add: function(){
        alert("增加菜单");
    }
 };
 // 刷新菜单
 var RefreshMenuBarCommand = function(receiver) {
    return function(){
        receiver.refersh();    
    };
 };
 // 增加菜单
 var AddSubMenuCommand = function(receiver) {
    return function(){
        receiver.add();    
    };
 };
 var refershMenuBarCommand = RefreshMenuBarCommand(MenuBar);
 // 增加菜单
 var addSubMenuCommand = AddSubMenuCommand(SubMenu);
 setCommand(b1,refershMenuBarCommand);

 setCommand(b2,addSubMenuCommand);

本文参考：前端常用设计模式 ，作者：_张宇小丸子

                  前端常用设计模式，作者： 司马老朋