源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-11-01 13:55 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:[js高手之路]单例模式实现模态框的示例
[b]什么是单例呢?[/b] 单,就是一个的意思。例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,一般来说在网站中弹出的模态框,不停的一直点击,一般只能创建一个。还有后台的数据库连接,一般都是保证一个连接等等。今天的主题就是单例在模态框中的应用,我们先要搞清楚,怎么弄个单例出来. [b]我们先看下普通的构造函数加原型方式。下面这种是常见的方式 [/b]
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创建实例的过程!!!,这就是单例的关键,那么要控制这个过程,肯定不能让用户直接调用构造函数,所以我们要另外想办法. [b]第一种办法: 在函数中添加一个静态方法,来控制创建实例的过程 [/b]
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了,这要就能确保是单例 [b]第二种办法:利用闭包和立即表达式的特性 [/b]
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 );
这两种方法都可以,接下来,我就选择第二种方法来实现弹出单一的模态框 [b]三、传统面向对象方式,每次点击都会弹出新的模态框[/b] 样式:
div {
   width: 200px;
   height: 200px;
   border:1px solid #09f;
   box-shadow: 2px 2px 1px #666;
   position: absolute;
  }
[b]html:[/b]
<input type="button" value="弹窗">

[b]js部分: [/b]
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() );
  }
[img]http://files.jb51.net/file_images/article/201709/201709010835262.jpg[/img] [b]四,用单例改造[/b] 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高手之路]单例模式实现模态框的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部