js设计模式总结3

1、模板方法模式

模板方法就是将多个模型抽象化归一,从中取出一个最基本的模板,当然这个模板可以作为实体对象也可以作为抽象对象,看你具体需求,其他模块只需要继承这个模块方法,也可以扩展这个方法。

举例子:1、蛋糕的外形都是相同的,都是采用蛋糕模具做出来的,之所以商店里的蛋糕看上去形态各异,其实都是在这基础上的二次加工,所以我们添加了不同的材料。

2、例如不同的提示框,基本框架是一个提示框,但是标题提示框多了一个标题,取消提示框多了一个取消按钮等等。

模板方法的核心在于对方法的重用,它将和新方法封装在基类中,让子类继承基类的方法,实现基类方法的共享,达到方法共用。

2、观察者模式

观察者模式:又被称作发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合。

var Observer=(function(){
        //防止消息队列爆满而被篡改故将消息容器作为静态私有变量保存
        var _messages={};
        return {
            注册信息接口,是将订阅者注册的消息推入到消息对列中
            regist:(type,fn){
                if(typeof _messages[type]==='undefined'){
                    _messages[type]=[fn];
                }else{
                    将动作方法推入该消息对应的动作执行序列中
                    _messages[type].push(fn);
                }
            },发布消息接口
            fire:如果消息没有被注册,则返回
                if(!_messages[type])
                ;
                var events={
                    type:type,args:args||{}
                },i=0,len=_messages[type].length;
                for(;i<len;i++){
                    依次执行注册的消息对应动作序列
                    _messages[type][i].call(this移除消息接口
            remove:if(_messages[type] instanceof Array){
                    var i=_messages[type].length-1;
                    for(;i>=0;i--){
                        如果存在该动作,则移除该动作
                        _messages[type][i]===fn && _messages[type].splice(i,1);
                    }
                }
            }
        }
    })();

既然选择用观察者模式来解决问题,首先应该分析哪些模块应该注册消息,哪些模块应该发布消息,这一点是很重要的。

 3、状态模式

状态模式:当一个对象的内部状态发生改变时,会导致其行为的改变,这看起来像是改变了对象。

举例子:比如我们投票,已经确定有好几种状态,如果我们采用if,else,这样要多次判断,效率低,也不方便管理。这是后我们可以将不同的判断结果封装在转态对象内,,然后该状态对象返回一个可被调用的接口方法,用于调用状态内部某种方法。

        var Result=(){
            判断结果保存在内部状态中
            var States={
                每种状态作为一种独立的方法保存
                state0:(){},state1:(){}
            }
            获取某一种状态并执行其对应的方法
             show(result){
                States["state"+result]  && States["state"+result]();
            }
             {
                返回调用转态方法接口
                show:show
            }
            
        }();        

还有一个经典的例子就是我们经常玩的游戏,就是超级玛丽。玛丽要跳跃,又要开枪,奔跑等,我们总不能用if else来做判断,无形中增加的成本是无法想象的。

var MarryState=每种状态作为一种独立的方法保存
                move:(){}
            }
        };
            
        var Action={
            changeState:(){
                组合通过传递多个参数进行实现
                var arg=arguments;
                重置内部状态
                _currentState={};
                如果有动作则添加动作
                if(arg.length){
                    遍历动作
                    for(var i=0,len=arg.length;i<len;i++向内部状态中添加动作
                        _currentState[arg[i]]=true;
                    }
                }
                方便链式调用
                return ;
            },goes:遍历内部保存的动作
                var i in _currentState){
                    动作存在则执行
                    States[i]&&States[i]();
                }
                ;
            }
                        change:Action.change,goes:Action.goes
            }
        };
    创建一个实例
    var marry=new MarryState();
    marry
        .change("jump","shoot")
        .goes()
        .goes()
        .change("shoot")
        .goes();

4、策略模式

策略模式:将定义的一组算法封装起来,使其相互之间可以替换。封装的算法具有一定的独立性,不会随客户端变化。

举例子:例如你作为商家,要在不同的节日给你商品以不同的折扣形式出售,你会怎么做?采用状态模式?no,状态模式是针对一个对象的而言的,也就是不同的商品你都要写一遍不同的状态。

对于一种商品的促销策略只用一种情况,而不需要其他促销策略,采用策略模式更为合理。

相同点:结构上,与状态模式很像,也是内部封装一个对象,然后通过返回的接口实现对内部对象的调用;

不同点:策略模式不需要管理状态,状态之间没有依赖关系、策略之间可以相互替换、在策略对象内部保存的是相互独立的一些算法。

            var PriceState=内部算法对象
            {
                return30:(price){},return50:(price){}
            }
            策略算法调用接口
            (algorithm,price){
                如果算法存在,则调用算法
                return States[algorithm]&&States[algorithm](price)
            }
        };

类似的,表单验证也可以写成类似的形式:

var InputState={
                notNull:(value){},number: {
                check:);
                    return States[type]&&States[type](value);
                },addState:fn;
                }
            }
        };

但最后我们增加了一个为策略对象增加策略算法的接口,这样我们如果有新的策略对象,只需要通过addState方法即可实现添加,而不用修改内部的代码。

5、职责链模式;6、命令模式

(具体看书)

7、访问者模式

访问者模式:针对于对象结构中的元素,定义在不改变该对象的前提下访问结构中元素的新方法。也就是在不改变操作对象的同时,为他添加新的操作方法,来实现对操作对象的访问。

举例子:其实我们可以给对象添加数组的操作方法:比如pop,push。

 

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小