关于W3Cschool定义的设计模式--常用的9种设计模式的介绍

    function Fn(){
        this.name = "root";
    }
    var f = new Fn()
    console.log(f.name)//root

//单个实例，只有一个对象

//多次创建，返回同一个对象
 
function fn(){
    if(!fn.obj) { //给函数添加一个属性。 因为函数是全局的，所以该属性一旦添加一直存在;
         fn.obj = {
             name : “liyang"
         };
    }
    return fn.obj;
}
var obj1 = new fn();
var obj2 = new fn();
console.log(obj1 == obj2);

//例如我们创建一个信息提示框，每一次执行toast方法，如果都创建一个新的元素，这样做太浪费了。
//因此，我们采取单例模式，确保无论调用多少次toast方法，都只创建一个DOM元素。
//我们只控制它的显示和隐藏，而不是每次创建每次销毁。

function Toast(){
    var div = document.createElement("div");
    div.className = "box";
    document.body.appendChild(div);
    setTimeout(function(){
        div.remove();
    },1000)
}

obtn.onclick = function(){
    var a = new Toast();
    var b = new Toast();
    console.log(a == b)
}



function Toast(){
    if(!Toast.div){
        Toast.div = document.createElement("div");
        Toast.div.className = "box";
        document.body.appendChild(Toast.div);
            clearTimeout(Toast.div.timer);
            Toast.div.timer = setTimeout(function(){
            Toast.div.style.display = "none";
        },1000)
    }else{
        Toast.div.style.display = "block";
        clearTimeout(Toast.div.timer);
            Toast.div.timer = setTimeout(function(){
            Toast.div.style.display = "none";
        },1000)
    }
    return Toast;
}
obtn.onclick = function(){
    var a = new Toast();
    var b = new Toast();
    console.log(a == b);
}

    // 单例模式
    function Toast(){
        // 第一次执行函数时给构造函数添加属性为对象
        if(!Toast.obj){
            Toast.obj = {};
            // 对对象进行加工
            Toast.obj.dia = document.createElement("dialog");
            Toast.obj.dia.innerHTML = "这是一个弹出框";
            document.body.appendChild(Toast.obj.dia)
        }
        // 正常情况下，每次创建元素，都要立即显示
        Toast.obj.dia.style.display = "block";
        // 过一定的时间后，隐藏元素
        clearTimeout(Toast.obj.t)
        Toast.obj.t = setTimeout(() => {
            Toast.obj.dia.style.display = "none"
        }, 2000);
        // 覆盖this的指向（覆盖new出来的对象）
        return Toast.obj;
    }
    document.onclick = function(){
        var t1 = new Toast()
        var t2 = new Toast()
        var t3 = new Toast()
        var t4 = new Toast()
        var t5 = new Toast()
		//这些被new出来的对象,都指向一个对象
        console.log(t1 == t2)//true
        console.log(t3 == t2)//true
        console.log(t5 == t2)//true
        console.log(t4 == t2)//true
        console.log(t1 == t3)//true
        console.log(t3 == t5)//true
    }

    // 最关键的是组合器：
    function ImagesStore( id ){
        this.children = [];
        this.element = document.createElement("div");
        this.element.id = id;
        document.body.appendChild(this.element)
    }
    ImagesStore.prototype = {
        constructor : ImagesStore,
        add:function( child ){
            this.children.push( child );
            this.element.appendChild( child.getElement() );
        },
        remove:function( child ){
            for( var node, i=0; node = this.getChild(i); i++ ){
                if( node === child ){
                    this.children.splice( i, 1 );
                    break;
                }
            }
            this.element.removeChild( child.getElement() );
        },
        getChild:function( i ){
            return this.children[i];
        },
        show:function(){
            this.element.style.border = ‘solid 2px black‘;
            for( var node, i=0; node = this.getChild(i); i++ ){
                node.show();
            }
        },
        hide:function(){
            for( var node, i=0; node = this.getChild(i); i++ ){
                node.hide();
            }
            this.element.style.border = ‘none‘;
        },
        getElement:function(){
            return this.element;
        }
    }

    function ImageItem( src ){
        this.element = document.createElement("img");
        this.element.src = src;
        this.element.className = "img-item";
    }
    ImageItem.prototype = {
        constructor:ImageItem,
        add:function( child ){
            console.log("这是子对象了,没有添加功能");
        },
        remove:function( child ){
            console.log("这是子对象了,没有删除功能");
        },
        getChild:function( i ){
            console.log("这是子对象了,没有获取子对象功能");
        },
        show:function(){
            this.element.style.border = ‘solid 2px black‘;
        },
        hide:function(){
            this.element.style.border = ‘none‘;
        },
        getElement:function(){
            return this.element;
        }
    }


    var box = new ImagesStore("box");
    var xbox = new ImagesStore("xbox");

    var img1 = new ImageItem("https://www.baidu.com/img/bd_logo1.png")
    var img2 = new ImageItem("https://www.baidu.com/img/bd_logo1.png")

    xbox.add(img1)
    xbox.add(img2)

    box.add(xbox)
    // box.remove(img1)

    // img1.show()
    box.show()

    // img1.add()

		function child(n){
			this.name = n;
			this.type = function(){
				return Math.random()>0.5? 0 : 1;
			}
		}
		function mather(n,c){
			this.name = n;
			this.child = c;
			this.listen = function(t){
				if(t==0){
					console.log(this.child.name + "哭了，"+this.name+"看孩子")
				}else{
					console.log(this.child.name + "睡了，"+this.name+"打麻将")
				}
			}
		}
		function father(n,c){
			this.name = n;
			this.child = c;
			this.listen = function(t){
				if(t==0){
					console.log(this.child.name + "哭了，"+this.name+"看孩子")
				}else{
					console.log(this.child.name + "睡了，"+this.name+"打麻将")
				}
			}
		}
		var c = new child("大宝");
		var t = c.type();
		var m = new mather(‘大宝妈‘,c);
		m.listen(t);
		var f = new father(‘大宝爸‘,c);
		f.listen(t);

		// 应用场景
		// 让某个不具有明显特征的功能,变得有特征
		function phone(){
			this.name = "phone";
			this.call = function(){
				console.log(this.name + "可以打电话");
			};
			this.game = function(){
				console.log(this.name + "可以打游戏");
			};
		}
		function pad(){
			this.name = "pad";
			this.game = function(){
				console.log(this.name + "可以打游戏")
			}
		}
		function text(obj){
			if(obj.call){
				obj.call();
			}else{
				console.log(obj.name+"没有打电话的功能");
			};
			if(obj.game){
				obj.game();
			}else{
				consloe.log(obj.name+"没有打游戏的功能");
			}
		}
		var p1 = new phone();
		text(p1);
		var p2 = new pad();
		text(p2);

    var f = (function (){
        //抽象工厂模式主要就是这个公共对象，模具对象
        function car(wheel,engine){ //内部配置函数，可以提供配置功能。
            this.wheel = wheel;
            this.engine = engine;
        }
        return function(wheel , engine){ // 构造器， 负责创建对象。
            return new car(wheel,engine); // 这是对外提供的接口，负责和外部需求连接。 
        }
    })();

    var car1 = f("15","V8");
    var car2 = f("13","V10");
　　//每次执行都会有这个公共对象，执行这个公共对象，获得一个新的对象
    console.log(car1);//一个新的car对象
    console.log(car2);//一个新的car对象

    console.log(car1 == car2);//false
　　//这种模式，就是所谓的抽象工厂模式。 

    function fn(n){
        if(n < 10 || n.length < 1){
            return "0"+n
        }else{
            return n;
        }
    }
    var num = fn(4);
    console.log(num)//04