前端设计模式

简介：设计模式是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。

工厂模式

原理：工厂模式是用来创建对象的一种最常用的设计模式，不暴露创建对象的具体逻辑，而是将逻辑封装在一个函数中。

// 安全模式创建的工厂方法函数

//安全模式创建的工厂方法函数
let UserFactory = function(role) {
  if(this instanceof UserFactory) {
    var s = new this[role]();
    return s;
  } else {
    return new UserFactory(role);
  }
}

//工厂方法函数的原型中设置所有对象的构造函数
UserFactory.prototype = {
  SuperAdmin: function() {
    this.name = "超级管理员",
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理']
  },
  Admin: function() {
    this.name = "管理员",
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据']
  },
  NormalUser: function() {
    this.name = '普通用户',
    this.viewPage = ['首页', '通讯录', '发现页']
  }
}

//调用
let superAdmin = UserFactory('SuperAdmin');
let admin = UserFactory('Admin') 
let normalUser = UserFactory('NormalUser')

单例模式

定义：保证一个类只有一个实例，并且提供一个访问它的全局访问点。

需求：一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象、登录浮窗等。

实现：用一个变量标识当前是否已经为某个类创建过对象，如果是，则在下一次获取这个类的实例时，直接返回之前创建的对象。

var single = (function(){
    let instance;

    function getInstance(){
    // 如果该实例存在，则直接返回，否则就对其实例化
       if( instance=== undefined ){
           instance= new Construct();
        }
        return instance;
    }

    function Construct(){
        // ... 生成单例的构造函数的代码
    }

    return {
        getInstance : getInstance
    }
})();

代理模式

原理：为其他对象提供一种代理以控制对这个对象的访问，主要解决在直接访问对象时带来的问题。

(function(){
    // 目标对象，是真正被代理的对象
    function Subject(){}
    Subject.prototype.request = function(){};

    function Proxy(realSubject){
        this.realSubject = realSubject;
    }
    Proxy.prototype.request = function(){
        this.realSubject.request();
    };
}());

观察者模式

原理：定义对象间的一种一对多的依赖关系，当一个对象的状态发生该改变时，多有依赖于它的对象都将得到通知和更新，观察者模式提供了一个订阅模型，其中对象订阅事件并在发生时得到通知。

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...');
});

策略模式

原理：定义一些列的算法，把他们一个个封装起来，目的是将算法的使用与算法的实现分离开来，避免多重判断条件，更具有扩展性。

场景：适用于有多个判断分支的场景，如解决表单验证的问题。你可以创建一个validator对象，有一个validate()方法。这个方法被调用时不用区分具体的表单类型，它总是会返回同样的结果——一个没有通过验证的列表和错误信息

// 对于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 Person = (function() {
    var name = 'xxx'
    function sayName() {
        console.log(name)
    }
    return{
        name: name,
        sayName: sayName
    }
})()

构造函数模式

通过构造函数的形式定义类，通过new新增实例

混合模式

将构造函数的引用属性和方法放到其原型上，子类是父类原型的一个实例。