js设计模式（单例，组合，观察者）

比眉伴天荒 2022-12-18 13:53 125阅读 0赞

# 设计模式 #

设计模式是为了解决某种问题，而为此设计的一套最佳的解决方案。

常见设计模式：

*  单例模式
 *  组合模式
 *  观察者模式
 *  命令模式
 *  代理模式
 *  工厂模式
 *  策略模式
 *  适配器模式
 *  …

## 单例模式 ##

单例指一个类只有一个实例，这个类自行创建这个实例。

class Person{
        };
    var p1 = new Person();
    var p2 = new Person();
    console.log(p1 ===p2);//false
    //单例模式：将p1 ===p2变成true

单例模式推导代码：：

class Person{
        };
    var p1 ;
    if(!p1){
        
        p1 = new Person();
    }
    p2 =p1;
    p3 =p1;
    ...

单例模式：

单例模式有什么用？

可以用来封装工具库：之前封装的工具都是一个又一个的函数，是散乱的。可以将这些方法（函数）当成某个类的方法。然后得出对象调用方法就可以了。===》出现问题：不是单例的》利用单例模式封装库。

//tool.js
    class Tool{
        
       setStyle(ele,styleObj){
        
           for(var attr in styleObj){
        
                ele.style[attr] = styleObj[attr];
           }
       }
        getStyle(ele,attr){
        
            try{
        
                return window.getComputedStyle(ele)[attr];
            }catch(e){
        
                return ele.currentStyle[attr];
            }
        }
        
    }
    
    //使用：
    先引入script
    var t = new Tool();
    var t1 = new Tool();
    console.log(t ===t1);//false,这是一种浪费

单例模式版：

//tool.js
    var tool = Tool = (function(){
        
        class Tool{
        
            
            
           setStyle(ele,styleObj){
        
               for(var attr in styleObj){
        
                    ele.style[attr] = styleObj[attr];
               }
      		}
            
            
            getStyle(ele,attr){
        
                try{
        
                    return window.getComputedStyle(ele)[attr];
                }catch(e){
        
                    return ele.currentStyle[attr];
                }
            }
           //可以继续加函数
        }
         var tool;
            return (function(){
        
                if(!tool){
        
                    tool = new Tool;
                }
                return tool;
            })();
    })();
    //var tool = signal();//不想每次都调用
    
    
    //使用
    //var t = tool();
    //var t1 =tool();
    
    var  t = tool;
    var t1 =tool;
    //直接用tool，都没必要t1,t
    tool.setStyle();

## 组合模式 ##

就是一个启动器—启动了，所有效果都启动了

class Carousel{
        //轮播图
        init(){
        
            console.log("轮播图启动了");
        }
    }
    
    class Tab{
        //tab切换
        init(){
        
            console.log("tab启动了");
        }
    }
    
    class Enlarge{
        //放大镜
        init(){
        
            console.log("放大镜启动了");
        }
    }
    
    
    //先根据三个类创建三个对象，一起调用他们的init
    
    var  arr =  [new Carousel,new Tab , new Enlarge];
    
    for(var i = 0 ; i <arr.length;i++){
        
    
    	arr[i].init();
    
    }

对于多个这么启动很省事。

但是这么写太low了，我们需要写成面向对象

### 初级形态 ###

//初级形态
    
    class Startor{
        
        //有一个容器放三个对象
        constructor(){
        
            this.container=[];
        }
        //有一个方法用来将需要启动的效果的对象存进去
        add(...arr){
        
            this.container=arr;
        }
        init(){
        
            //启动所由效果
            for(var i = 0 ; i <this.container.length;i++){
        
                this.container[i].init();
            }
        }
    }
    
    
    
    
    //使用
    var s  =new Startor();
    s.add(new Carousel);
    s.add(new Tab);
    s.add(new Enlarge);
    s.init();
    //每次add太烦了
    s.add(new Carousel,new Tab,new Enlarge)

### 高级形态 ###

//有的人就不喜欢用init作为启动方法
    class Startor{
        
        //有一个容器放三个对象
        constructor(){
        
           this.container=[];
            //除了存对象，还要存一个对应的方法名称
           /* [
                {
                    start:Tab对象 
                },
                {
                    init:Carousel对象
                },
                {
                	qidong:Enlarge对象    
                }
            ]
            */
            add(fnname,obj){
        
                var o={
        };
                o[fnname]=obj;
                this.contianer.push(o);
            }
        }
        //有一个方法用来将需要启动的效果的对象存进去
        add(...arr){
        
            this.container=arr;
        }
        init(){
        
            //启动所由效果
            for(var i = 0 ; i <this.container.length;i++){
        
                //this.container[i].init();
                for(var attr in this.container[i]){
        
                    this.container[i][attr][attr]();
                }
            }
        }
    }
    
    
    s.add("init",new Carousel);
    s.add("start",new Tab);
    s.add("qidong",new Enlarge);
    console.log(s);//根据这个改init
    s.init();

数组换成对象：

class Startor{
        
        //有一个容器放三个对象
        constructor(){
        
           this.container={
        };        //除了存对象，还要存一个对应的方法名称
        }
        //有一个方法用来将需要启动的效果的对象存进去
        add(fnname,obj){
        
            this.container[fnname]=obj;
        }
        init(){
        
            //启动所由效果
    
                for(var attr in this.container){
        
                    this.container[attr][attr]();
                }
            }
        }
    }
    
    
    var s = new Startor();
    // s.add(new Carousel)
    // s.add(new Tab)
    // s.add(new Enlarge)
    // s.add(new Carousel,new Tab,new Enlarge)
    s.add("init",new Carousel);
    s.add("start",new Tab);
    s.add("qidong",new Enlarge);
    // console.log(s);
    s.init()

## 观察者模式 ##

事件其实就是观察者模式：看到你点击了网页，onclick就执行

document.addEventListener("abc",fn);//写观察者模式可以绑定自定义事件:事件改为abc
    function fn(){
        //给自定义对象也绑定事件document改为obj
        console.log("触发了abc事件");
    }

class See{
        
        //做一个属性来存储事件
        constructor(){
        
            this.container	={
        }
        }
        addEventListener(type,handler){
        
            //将事件类型和对应的函数存起来
            //this.container[type]=[handler]//会覆盖，不能直接.push,因为空对象，访问type为undefined，不能push
            if(!this.container[type]){
        
                this.container[type]=[]; 
            }
            this.container[type].push(handler);
        }
    }
    var s = new See();
    //绑定事件的原理就是将事件类型和对应的函数存起来
    s.addEventListener("aaa",a);
    s.addEventListener("aaa",b);
    function a(){
        
        console.log("aaa事件的a函数");
    }
    function b(){
        
        console.log("aaa事件的b函数");
    }

## 观察者模式结束 ##

系统没法触发需要手动触发；还需要对应的removeEventListener

所以加上触发事件和移出事件的方法：

class See{
        
        // 做一个属性用来存储事件
        constructor(){
        
            this.container = {
        }
        }
        addEventListener(type,handler){
        
            // 将时间类型和对应的函数存起来
            if(!this.container[type]){
        
                this.container[type] = []
            }
            this.container[type].push(handler)
        }
        // 触发事件的方法
        dispatchEvent(type){
        
            if(!(type in this.container)){
         // in来判断某个键是否在对象中
                alert('先绑定')
                return false;
            }
            // 根据type到container里面找到那两个函数。，调用它
            for(var attr in this.container){
        
                if(attr == type){
        
                    for(var i=0;i<this.container[attr].length;i++){
        
                        this.container[attr][i]()
                    }
                }
            }
        }
        // 移除事件的方法
        removeEventListener(type,handler){
        
            if(!(type in this.container)){
         // in来判断某个键是否在对象中
                alert('先绑定')
                return false;
            }
            for(var attr in this.container){
        
                if(attr == type){
        
                    for(var i=0;i<this.container[attr].length;i++){
        
                        if(this.container[attr][i] === handler){
        
                            this.container[attr].splice(i,1)
                        }
                    }
                }
            }
        }
        clear(type){
        
            if(!(type in this.container)){
         // in来判断某个键是否在对象中
                alert('先绑定')
                return false;
            }
            delete this.container[type]
        }
    }
    
    var s = new See()
    // 绑定事件的原理就是将事件类型和对应的函数存起来
    s.addEventListener('aaa',a)
    function a(){
        
        console.log("aaa事件的a函数");
    }
    s.addEventListener('aaa',b)
    function b(){
        
        console.log("aaa事件的b函数");
    }
    s.addEventListener('bbb',c)
    function c(){
        
        console.log("bbb事件的c函数");
    }
    console.log(s);
    
    // 触发事件
    // s.removeEventListener('aaa',a)
    s.clear('aaa')
    s.dispatchEvent("aaa")