zoukankan      html  css  js  c++  java
  • js的设计模式

      起源:

     设计模式并非是软件开发中的专业术语。实际上‘模式’最早诞生于建筑学。20世纪30年代,哈佛大学建筑学博士和他的研究团队花了约20年的时间,

    研究了为解决同一问题而设计出不同结构建筑,从中发现了那些高质量设计中的相似性,并且用‘模式’来指代相似性。

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

     单例模式:

      保证一个类只有一个实例,并提供一个访问它的全局访问点,如window对象。当我们单击登录按钮的时候,页面出现

    一个登录浮窗,这个悬浮窗是唯一的,无论点击多少次登录按钮,这个浮窗都只会被创建一次,这个登录的浮窗就适合用单例模式创建。

      var CreateDiv=(function(){
                    var instance;
                    var CreateDiv=function(html){
                         console.log(instance)
                        if(instance){ //instance参数,如果没有则执行下面的,如果有则直接返回
                            return instance;
                        }
                        this.num=html;//this.num 为CreateDiv对象的一个属性   html为实例化的时候传进的参数
                        this.init();
                        console.log(this)
                        return instance = this;//返回CreateDiv对象
                    }
                    CreateDiv.prototype.init=function(){
                        var div=document.createElement('div');
                        div.innerHTML=this.num;//将num属性写在div里面
                        document.body.appendChild(div);
                    }
                    return CreateDiv;
                })();
                var a = new CreateDiv('a');
                var b = new CreateDiv('b');//因为只会被创建一次,所以实例化b的时候a已经实例化过了,所以CreateDiv对象是没有变化的
                a==b;//true
                a===b;//true

    代理模式定义

        为一个对象提供一个代用品或占用符,以便控制对它的访问。很多明星都有自己的经纪人,比如开演唱会经纪人会代替明星细节和谈好薪酬之后

    再跟明星签合同。即核心是当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象控制了这个对象的,替身对象对请求最初一些

    处理之后再把请求转交给本体请求。

      var myImage=(function(){
                    var imgNode=document.createElement('img');
                    document.body.appendChild(imgNode);
                    return {
                        setSrc:function(src){
                            imgNode.src=src;
                        }
                    }
                })();
                var proxyImage=(function(){
                    var img=new Image();
                    img.onload=function(){
                        myImage.setSrc(this.src)//传入的图片路径
                    };
                    return{
                        setSrc:function(src){
                            myImage.setSrc('load.gif');
                            img.src=src;//把传入的图片路径传给真正的对象,显示在页面上
                        }
                    }
                })()
                proxyImage.setSrc();

    命令模式

      命令模式中的命令指的是一个执行某些特定事情的指令,有时候需要向某些特定事情的指令。常见的应用场景有时候需要向某些对象发送请求,

    但是并不知道请求的接受者是谁,也不知道被请求的操作是什么。假如我们去快餐店,我们可以点餐取消餐,但是我们并不用关心厨师是谁,怎么做。

        var makeCommand=function(receiver,state){
                    return function(argument){
                        receiver[state]();//调用方法
                    }
                }
                var Ryn={  //对象上面的三个属性
                    attack:function(){
                        console.log('攻击')
                    },
                    defense:function(){
                        console.log('防御');
                    },
                    crouch:function(){
                        console.log('蹲下');
                    }
                }
                var command=makeCommand(Ryn,'attack');
                command();//攻击

    发布订阅模式

      发布订阅模式又称观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖它的对象都将得到通知。现实生活中,

    如我们去售楼中心,服务人员A接待了我们,然后再有客户找到A,这个时候暂时没房了,等到有房的时候不可能服务人员A挨个打电话通知,而是订阅A的

    公共服务提醒。

          (function($){
                    var o = $({});
                    $.subscribe=function(){
                        o.on.apply(o,arguments);
                    }
                    $.unsubscribe=function(){
                        o.off.apply(o,arguments);
                    }
                    $.publish=function(){
                        o.trigger.apply(o,arguments);
                    }
                })(jQuery)

     职责链模式

    使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,将这些关系连成一条链,并沿着这条链传递该请求,直到一个对象处理它为止。

    现实生活中,如我们坐公交车人太多,我们把公交卡交给售票员,让前面的人不停的往前递,直到售票员刷卡结束。

        var fn1=function(data){
                    if(data==1){
                        console.log('fn1->'+data);
                    }else{
                        return 'next';
                    }
                }
                var fn2=function(data){
                        console.log('fn2->'+data);
                        return 'next';
                }
                var fn3=function(data){
                        console.log('fn3->'+data);
                        console.log('done');
                }
                Function.prototype.after=function(fn){
                    var self=this;
                    return function(){
                        var ret=self.apply(this,arguments);// 当前函数本身
                        if(ret=='next'){
                            return fn.apply(this,arguments); //fn下一个要直执行的函数
                        }
                        return ret;
                    }
                }
                var order=fn1.after(fn2).after(fn3);
                order(3);
  • 相关阅读:
    环形二维数组
    梦断代码(三)
    梦断代码(二)
    梦断代码(一)
    CNblogs用户体验
    《软件工程》--读书笔记三
    《软件工程》--读书笔记二
    《软件工程》--读书笔记一
    找出水王
    典型用户
  • 原文地址:https://www.cnblogs.com/xumqfaith/p/7967855.html
Copyright © 2011-2022 走看看