[js高手之路]单例模式实现模态框的示例

什么是单例呢？

单，就是一个的意思。例：就是实例化出来的对象，那合在一起就是保证一个构造函数只能new出一个实例，为什么要学习单例模式呢？或者说单例模式有哪些常见的应用场景.它的使用还是很广泛，比如：弹出一个模态框，一般来说在网站中弹出的模态框，不停的一直点击，一般只能创建一个。还有后台的数据库连接，一般都是保证一个连接等等。今天的主题就是单例在模态框中的应用，我们先要搞清楚，怎么弄个单例出来.

我们先看下普通的构造函数加原型方式。下面这种是常见的方式

function singleton ( uname ){
   this.username = uname;
   this.ins = null;
  }
  singleton.prototype.showusername = function(){
   return this.username;
  }
  var obj1 = new singleton( 'ghostwu' );
  var obj2 = new singleton( 'ghostwu2' );
  console.log( obj1 === obj2 ); //false

每次new都会在内存中生成一块新的内存区域保存新的实例，所以这种方式就不能保证只能new出一个单例，所以，我们想要创建一个单例，就要能够控制new创建实例的过程！！！，这就是单例的关键，那么要控制这个过程，肯定不能让用户直接调用构造函数，所以我们要另外想办法.

第一种办法： 在函数中添加一个静态方法，来控制创建实例的过程

function singleton ( uname ){
   this.username = uname;
  }
  singleton.prototype.showusername = function(){
   return this.username;
  }
  singleton.getinstance = function( uname ){
   if ( !this.ins ) {
    this.ins = new singleton( uname );
   }
   return this.ins;
  }

  var obj1 = singleton.getinstance( 'ghostwu' );
  var obj2 = singleton.getinstance( 'ghostwu2' );
  console.log( obj1 === obj2 ); //true

第8行判断ins这个变量是否保存了一个实例，如果没有就new一个，否则直接返回。第二次在调用的时候，由于已经存在了ins，所以直接返回，就不需要在new了，这要就能确保是单例

第二种办法：利用闭包和立即表达式的特性

function singleton ( uname ){
   this.username = uname;
  }
  singleton.prototype.showusername = function(){
   return this.username;
  }
  singleton.getinstance = (function(){
   var ins = null;
   return function( uname ) {
    if ( !ins ) {
     ins = new singleton( uname );
    }
    return this;
   }
  })();

  var obj1 = singleton.getinstance( 'ghostwu' );
  var obj2 = singleton.getinstance( 'ghostwu2' );
  console.log( obj1 === obj2 );

这两种方法都可以，接下来，我就选择第二种方法来实现弹出单一的模态框

三、传统面向对象方式，每次点击都会弹出新的模态框

样式：

div {
   width: 200px;
   height: 200px;
   border:1px solid #09f;
   box-shadow: 2px 2px 1px #666;
   position: absolute;
  }

html:

<input type="button" value="弹窗">

js部分：

var obtn = document.queryselector("input"),
   offset = 20, index = 1;
  function module( pos ){
   this.offset = pos || 20;
  }
  module.prototype.create = function(){
   var odiv = document.createelement( "div" );
   odiv.style.left = ( ++index ) * offset + 'px';
   odiv.style.top = ( ++index ) * offset + 'px';
   odiv.innerhtml = 'ghostwu教你用设计模式实战';
   return odiv;
  }
  obtn.onclick = function(){
   var odiv = new module();
   document.body.appendchild( odiv.create() );
  }

四，用单例改造

html:

<input type="button" value="弹窗1">
<input type="button" value="弹窗2">

var abtn = document.queryselectorall("input"),
   offset = 20, index = 1;
  function module( pos ){
   this.offset = pos || 20;
  }
  module.prototype.create = function(){
   var odiv = document.createelement( "div" );
   odiv.style.left = ( ++index ) * offset + 'px';
   odiv.style.top = ( ++index ) * offset + 'px';
   odiv.innerhtml = 'ghostwu教你用设计模式实战';
   return odiv;
  }
  module.one = (function(){
   var ins = null, isexist = false;
   return function( pos ){
    if ( !ins ) ins = new module( pos );
    if ( !isexist ) {
     document.body.appendchild( ins.create() );
     isexist = true;
    }
   }
  })();
  abtn[0].onclick = function(){
   module.one( 10 );
  }
  abtn[1].onclick = function(){
   module.one( 10 );
  }

在module.one中通过变量isexist的两种状态和闭包特性控制元素只能被添加一次

以上这篇[js高手之路]单例模式实现模态框的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。