JS之设计模式详解

JS六大设计模式：

单例模式，工厂模式、桥接模式、状态模式、装饰者模式、适配器模式

单例模式详解：

简易解析：如在网页中，点击按钮O，添加（显示）一个遮罩层（需求：得到遮罩效果），可以第一次点击添加，以后的点击按钮O，将遮罩显示出来就行，不需要重复添加遮罩层。

实现代码

<style type="text/css">
        .zhezhao{
            width: 100%;
            height:100%;
            position:absolute;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,.3);            
        }
        button{
            position: relative;
            z-index: 2;
        }
    </style>



 <button>显示</button>
    <!-- <div class="zhezhao"></div> -->
   <script>
       (function(){
        var btn=document.getElementsByTagName("button")[0];
        var zhezhao;
        function zhezhaoDis(){
            btn.onclick=function(){
            if(!zhezhao){
                zhezhao=document.createElement("div");
                zhezhao.className="zhezhao";
                 document.body.appendChild(zhezhao);
            }else{
                show();
            }
           function show(){
                zhezhao.style.display="block";
            }
            
        }
        }
        window.zhezhaoDis=zhezhaoDis;
       })();
       zhezhaoDis();
</script> 

工厂模式详解

简易解析：在创建ajax对象时，不能提前知道浏览器是否支持，提前创建对象，
在浏览器执行时，根据兼容性创建。

实现代码

 <script>
    //编程时不能确定创建实例的类型，需要时根据实际选择创建
    (function(){
        function newXhr(){
            let httpRequest;
    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject("microsoft.XMLHttp")) {
        httpRequest = new ActiveXObject("microsoft.XMLHttp");
    }
        }
        window.newXhr=newXhr;
    })();
  
    </script>

桥接模式详解：

简易解析：如平常封装一个函数，需要时调用。创建一个div，鼠标移入时，div背景色改变，文字颜色改变；鼠标移出时，背景色改变，文字颜色改变。移入移出，
属性改变类似。可以创建一个函数，改变背景和文字颜色，由鼠标移入、移出调用这个函数，称为桥接

实现代码

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: orange;
            color:red;
        }
    </style>


<div>where is my color</div>
    <script>
        var div=document.getElementsByTagName("div")[0];
        div.onmouseover=function(){
            connec(div,"blue","yellow")
        }
        div.onmouseout=function(){
           connec(div,"yellow","blue");
        }
        function connec(ele,color,bgcolor){
            ele.style.backgroundColor=bgcolor;
            ele.style.color=color;
        }
    </script>

状态模式详解

简易解析：根据传入的状态，调用对应状态的函数

实现代码

<script type="text/javascript">
        // 初始代码
        var state="sleep";
        status(state);
        function status(state){
            if(state=="sleep"){
                console.log("我在睡觉");
            }
            else if(state=="eat"){
                console.log("我在吃饭");
            }
        }

        //改进:状态和执行函数用对象存储
        var obj={
            sleep:function(){
                console.log("我在睡觉");
            },
            eat:function(){
                console.log("我在吃饭");
            }
        }
        function status(obj,state){
            obj[state]();
        }
        status(obj,"eat");
    </script>

装饰者模式

简易解析：一个按钮点击，输出1，再给这个按钮添加一个点击事件，输出2，点击后可同时输出1，2，不影响原来的点击事件。相当于点击的扩展

实现代码

<script>
        (function (){
            var btn=document.getElementById("btn");
            aler(btn,function(){
                console.log(1);
            });
            aler(btn,function(){
                console.log(2);
            });
            aler(btn,function(){
                console.log(3);
            });
            function aler(btn,fn){
                var btnClick=btn.onclick;  
                var clickL=function(){             
                if(btnClick){
                    btnClick();
                }
                fn();
                }
                btn.onclick=clickL;
               
            }
        })()
    </script>

适配器模式

简易解析：后台传入对象数据O{user:user,age:age}，前端用ajax传数据O，给后台，需要转为user=user&age=age格式。在日常生活中相当于，将国外的高压电伏，通过适配器转为国内手机可用的220v通用电流

实现代码

<script type="text/javascript">
        (function () {
            function convert(obj) {
                var arr = [];
                for (key in obj) {
                    arr.push(key + "=" + obj[key]);
                }
                var data = arr.join("&");
                return data;
            }
            window.convert = convert;
        })();
        //后台数据,传入对象，转化为ajax数据
        var obj = {
            user: "user",
            password: "password"
        }
        let data = convert(obj);
        console.log(data);
    </script>