JS设计模式

什么是模式？

• 已验证的解决方案
• 容易被复用
• 富有表达力

什么是设计模式？

设计模式是解决软件设计常见问题的可复用方案

什么是反模式？

反模式是一种针对某个特定问题的不良解决方案，该方案会导致槽糕的情况发生

• 定义大量污染全局的变量
• 修改Object类的原型
• 使用document，write创建页面
• 硬编码，写死功能等

单例模式？

• 确保一个类只能有一个实例
• 节约资源，控制入口
• 拓展困难，不可职责过重

//皇帝单例模式
var kingSingLeton = (function()
{
    //皇帝实例
    var instance;

    //初始化皇帝
    function init() {
        //返回实例对象
        return {
            command: function () {
                console.log('I`M King');
            }
        }
    }

    return {
        getInstance: function () { //获取皇帝实例
            if (!instance) {//如果皇帝不存在
                instance = init(); //创建一个皇帝
            }

            //皇帝存在返回皇帝
            return instance;
        }
    }
}());

//某日大臣A请示皇帝
var mayKingA = kingSingLeton.getInstance();
//皇帝发动号令
mayKingA.command();

//某日大臣B请示皇帝
var myKingB = kingSingLeton.getInstance();
//皇帝发动号令
myKingB.command();

适配器模式？

• 不影响现在实现方式，兼容调用旧接口的代码 简单、提高复用性 过多使用导致系统层级复杂

//旧的圆孔耳机
function useOldEarphone() {
    //播放音乐
    console.log('playMusic');
}

//适配器
function adapter() {
    //适配操作
    console.log('这里我需要做一些适配');

    return useOldEarphone();
}

//旧的手机使用圆孔的耳机
var IP6 = useOldEarphone();

//新的IP7可用适配器来兼容使用
var IP7 = adapter();

装饰器模式？

• 在不修改类原来的接口下，动态地为对象添加功能
• 扩展对象更灵活，可组合
• 增加复杂性

//豆浆类
function BeanMilk() {
    this.price = 1;
}

//加个鸡蛋
function addEgg(milk) {
    milk.egg = '加了鸡蛋';
    milk.price += 1;
}

//加白糖
function addSugar(milk) {
    milk.sugar = '加了白糖';
    milk.price +=0.5;
}

//加蜂蜜
function addHoney(milk) {
    milk.honey = '加了蜂蜜';
    milk.price +=1.5;
}

//一杯豆浆，需要加鸡蛋和白糖
var beadMilk1 = new BeanMilk();
addEgg(beadMilk1);//加鸡蛋
addSugar(beadMilk1);//加白糖


//一杯豆浆，需要加鸡蛋和蜂蜜
var beadMilk2 = new BeanMilk();
addEgg(beadMilk1);//加鸡蛋
addHoney(beadMilk1);//加蜂蜜

观察者模式(发布者-订阅者模式)？

• 更加解耦
• 支持广播通信
• 大量观察者，广播有性能问题

//观察者
function Observer() {

    //更新操作
    this.update = function (context) {
        console.log('主播上线了！',context);
    }
}

//发布者
function Subject() {

    //发布目标
    this.observers = [ ];
}

//增加观察者
Subject.prototype.addObserver = function (observer) {
  this.observers.push(observer);
};

//去除观察者
Subject.prototype.removeObserver = function (observer) {
    var index = this.observers.indexOf(observer);
    this.observers.slice(index,1);
};

//通知观察者
Subject.prototype.notify = function (context) {
    var observerLength = this.observers.length;

    for(var i = 0;i<observerLength;i++){
        this.observers[i].update(context);//更新内容
    }
}

//建立订阅者小新
var littleXin = new Observer('小新');
//建立订阅者大新
var bigXin = new Observer('大新');

//建立主播D
var ladyD = new Subject('主播D');
//增加观察者大新、小新
ladyD.addObserver(bigXin);
ladyD.addObserver(littleXin);
//广播消息
ladyD.notify('我是主播D，我来开直播了');