设计模式

 

设计模式

    1.uml类图

        1.uml类图，直观的，与具体语言无关的图形，来表示类，类与类之间的关系。

        2.类及其相关描述

       

    2.单例模式

        

        关于某个类的对象，只能创建一个实例。

        案例-王者荣耀-暗影主宰

            function darkMaster(){
                if(!darkMaster._instance){//如果instance不存在
                    darkMaster._instance = {
                        count:30,
                        saySth:function(){
            
                        },
                        countDown:function(){
            
                        },
                        show:function(){
            
                        },
                        dead:function(){
                            this.countDown();
                        }
                    };
                }
                return darkMaster._instance;
            }

 

    3.工厂模式

        

            目的是大批量的生产某种对象，有一个create，用来创建对象，有一个工厂方法ConcreteCreator,这个方法会判断工厂想要创建什么样的产品，于是就生产出对应的产品，

                function Factory(){
 

                }
                Factory.create = function(type){
                    switch(type){
                        case 'BMW'://创建宝马的对象。
                        break;
                        case 'Audi'://创建奥迪
                        break;
                    }
                }

 

        案例：王者荣耀，生产兵

            function Normal(){//normal兵种
                console.log('Normal is created');
            }
            function GunCarrier(){//炮车兵种
                console.log('GunCarrier is created');
            }
            function Strong(){//加强兵兵种
                console.log('Strong is created');
            }
            function Factory(){
 

            }
            Factory.create = function(type){
                switch(type){
                    case 'Normal':
                    return new Normal();//创建一个普通兵种
                    case 'GunCarrier':
                    return new GunCarrier();//创建一个炮兵
                    case 'Strong':
                    return new Strong();//如果高地被击破，就创建一个强兵
                    default:
                    break;
                }
            }
 

            var s1 = Factory.create(Normal);//创建一个步兵
            for(var i = 0 ;i < 100; i++){
                Factory.create('GunCarrier');//创建100个炮车
            }

 

    4.策略模式

        当我们在项目中想实现某种需求，当这些需求的方式不同，可能导致的结果是一样的，可能中间的过程会不一样，比如说，我们想实现一个排序，虽然说排序的结果是一样的，但是中间过程，我们可能选择冒泡排序，或者快速排序，也许会导致排序在时间上或者空间上它的效率是不同的。

            它有一个基类Strategy,这是策略模式所要求的通用的接口，也就是算法接口，所有的它的策略都要实现相同的函数，然后具体的要有一个Context来实现这个策略，根据我们传进去的策略不同，那么我们都能实现某种效果，但是中间过程或者消耗是不一样的，

        

        案例：王者荣耀-如何获胜

            function Strategy(){
 

            }
            Strategy.prototype.tactics = function(){
                console.log('基础策略');//策略1
            }
            function StrategyA(){
 

            }
            function StrategyB(){
 

            }
            StrategyA.prototype = Object.create(Strategy.prototype);//继承了基类的原型。
            StrategyA.tactics = function(){
                console.log('骚扰敌人打野');
            }
            StrategyB.prototype = Object.create(Strategy.prototype);//继承了基类的原型。
            StrategyB.tactics = function(){
                console.log('猥琐发育，别浪');
            }
 

            function GoToVictory(stra){
                this.strategy = stra;//放入对象当中
            }
            GoToVictory.prototype.victory = function(){//victory方法
                this.strategy.tactics();
            }
            var a = new GoToVictory(new StrategyA());//传入策略。
            a.victory();

 

    5.适配器模式

        比如说我们现在有一个笔记本电脑，配了一个电源，无论在任何地方，插入110v的电源，或者220v电源，都是没有问题的，因为电源适配器已经适配了，又比如笔记本的显示器显示display port,电视接口是HDMI,那么这两个接口就需要适配，也可以理解为转接头模式，比如我们开发新系统时用了一个新接口，而我们的旧系统的接口和新接口是不兼容的，我们就可以增加一个中间的转换的类，兼容旧接口适配新接口。

        

        案例：王者荣耀与lol，关羽和人马

            function Sagittarius(){
 

            }
            //人马座的三个技能
            Sagittarius.prototype.skill_one = function(){
                console.log("------：人马座释放了第一个技能");
            }
            Sagittarius.prototype.skill_two = function(){
                console.log("------：人马座释放了第二个技能");
            }
            Sagittarius.prototype.skill_three = function(){
                console.log("------：人马座释放了第三个技能");
            }
            //关羽在释放技能的时候都在调用人马的函数
            function Guanyu(){
                this.s = new Sagittarius();
            }
            //他们的接口是不同的，需要适配器去适配
            Guanyu.prototype.skill_1 = function(){
                this.s.skill_one();
            }
            Guanyu.prototype.skill_2 = function(){
                this.s.skill_two();
            }
            Guanyu.prototype.skill_3 = function(){
                this.s.skill_three();
            }
            //然后创建英雄，
            var gy = new Guanyu();
            gy.skill_1();

 

    6.观察者模式 

        当我某个状态发生改变时，在这个状态相关联注册的所有观察者都会被通知，最经典的观察者模式就是MVC模式，例如当我们的M（model）发生了变化，我们的V都会自动的收到状态被改变的通知，并且做出V的相关的更新，

        结构看图：他有一个具体的内容Subject,在这个内容中，他可以增加观察者，节省观察者并且进行通知，这个通知就是调用所有的观察者循环的来遍历，并且调用了每一个观察者Update（）方法，我们观察者注册的时候，他需要有一个统一的接口和方法Update()，在这个方法中我可以取得当前的状态，并且根据这个状态进行更新

        案例 王者荣耀--游戏内战报

            例如开始游戏之后，第一个人被杀的时候，都会收到FIRST BLOOD这个通知，

function Message(){
    this._list = [];//我们需要一个list，来维护所有的观察者。
    this.msg = "hello.";//我们定义一个默认的消息或者状态。
}
Message.prototype.Attach = function(hero){//定义一个方法注册一些英雄
    this._list.push(hero);//我们将hero都加入这个数组中，
}
Message.prototype.notify = function(){//这个方法相当于遍历了数组中注册的英雄
    for(var i = 0; i < this._list.length; i++){
        this._list[i].update();//每一个英雄都使用update()方法。每个英雄都会收到通知。
    }
}
Message.prototype.setState = function(msg){//可以对message进行更新。
    this.msg = msg ;
    this.notify();//信息更新后，对每个观察者一个通知。
}
Message.prototype.getState = function(){//观察者收到通知以后，就会判断收到了什么状态
    return this.msg
}
//定义hero
function Hero(name,msg){//定义hero的参数名字和状态信息
    this.name = name;
    this.msg = msg;//接收到Message的对象
}
//定义hero的一个方法update()
Hero.prototype.update = function(){
    console.log(this.name + "  received:" + this.msg.getState());//这样当msg的状态发生了改变，这样就会通知所有的hero。
}
var msg = new Message();
var h1 = new Hero("gy",msg);
var h2 = new Hero("gy2",msg);
msg.Attach(h1);
msg.Attach(h2);
msg.setState("first blood");//这样所有英雄都会收到这个消息,这样可以隔绝英雄和Msg之间的关联度，

</script>