单例模式及案例

<script>
//    function Car(){

//    }
//    var c1 = new Car();
//    var c2 = new Car();
//    alert(c1==c2);//false
   //怎样能使输出结果为true———>单例模式:单例模式思想：在构造函数中将第一次new出来的对象存放在一个变量中，然后返回这个
   //变量继续new变量时，判断这个变量中是否有值，如果有就返回。
//    var c = null;
//    function Car(){
//       if(c){//c中存放的是第一次new出来的对象
//           return c;
//       }
//       c = this;//this指new出来的对象，此处指c1;
//       return c;
//     }
//     var c1 = new Car();
//     var c2 = new Car();
//     alert(c1==c2);//ture
//解决上面全局变量c的问题：
//    function Car(){
//       if(Car.c){//在构造函数内部可以使用构造函数.属性或构造函数.方法定义静态属性或静态方法，静态属性和静态方法
//       //直接使用构造函数.属性或构造函数.方法调用。
//           return Car.c;
//       }
//       Car.c = this;
//       return Car.c;
//     }
//     var c1 = new Car();
//     var c2 = new Car();
//     alert(c1==c2);//ture
//简化代码：
    // function Car(){
    //   if(!Car.c){//在构造函数内部可以使用构造函数.属性或构造函数.方法定义静态属性或静态方法，静态属性和静态方法
    //   //直接使用构造函数.属性或构造函数.方法调用。
    //      Car.c = this;
    //   }
    //   return Car.c;
    // }
    // var c1 = new Car();
    // var c2 = new Car();
    // alert(c1==c2);//ture
//小案例：
    function Car(){
      if(!Car.c){
         Car.c = {
             name:"Audi ",
             price:200000000,
             functions:function(){
                console.log( name+"comfort");
             }
         }
      }
      return Car.c;
    }
    var c1 = new Car();
    var c2 = new Car();
    console.log(c1,c2);
</script>

应用-->显示登录的弹出框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单例实现登录弹窗</title>
    <style>
        
        .login-layer {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, .6);
            text-align: center;
            line-height: 200px;
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <button id="loginBtn">显示登录的弹出框</button>
</body>
</html>
<script>
    function SingleDiv(){
        if( !SingleDiv.instance ){
            //创建对象
            SingleDiv.instance = {
                div : document.createElement("div"),
                init : function(){
                    this.div.className = "login-layer";
                    document.body.appendChild( this.div );
                    this.div.innerHTML = "我是登录框";
                }
            }
        }
        //存在后 将对象返回
        return SingleDiv.instance;
    }
    loginBtn.onclick = function(){
        new SingleDiv().init();
    }
</script>

猜你喜欢