单例模式及案例
<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>
