[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高手之路]单例模式实现模态框的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • [js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例

    发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房源信息,根据手头上掌握的客户联系信息(买房的人的手机号),通知买房的人,他充当了发布者的角色 卖主想卖掉自己的房子,就需要告诉中介,把信息交给中介发布 二,网站订阅信息的用户 订阅者角色:需要订阅某类信息的网民,如某个网站的javascript类型文章 发布者角色:邮箱服务器,根据网站收集到的用户订

  • JavaScript设计模式之单例模式详解

    最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言.也看过很多高级教程,觉得自己还是比较热衷于js的设计模式.这一次重温一下<JavaScript设计模式与开发实践>,开篇为单例模式. /** * pre 单例模式 * 定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点 * 应用:单例模式是一种常用的模式,有一些对象我们往往只需要一个, * 比如线程池.全局缓存.浏览器中的 window 对象等. */ //--------------singleton-01----------

  • 深入理解JavaScript系列(25):设计模式之单例模式详解

    介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现.OK,正式开始. 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象. 正文 在JavaScript里,实现单例的方式有很多种,其中最简单的一个方

  • JavaScript设计模式之单例模式实例

    <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型或强类型,静态或动态语言,命令式或说明式语言.每种语言都有天生的优缺点.一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些. 术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬. 换到程序中, 静态语言里可能需要花很多功夫来实现装饰

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

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

  • [js高手之路]图解javascript的原型(prototype)对象,原型链实例

    我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this.userName = uName; } CreateObj.prototype.showUserName = function(){ return this.userName; } var obj1 = new CreateObj('ghostwu'); var obj2 = new CreateObj('卫庄')

  • [js高手之路]从原型链开始图解继承到组合继承的产生详解

    于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 function Person(){ this.userName = 'ghostwu'; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher (){} Teacher.protot

  • [js高手之路]HTML标签解释成DOM节点的实现方法

    最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支持,为什么说这事,跟这篇文章的主题有毛关系呢?因为这篇文章要讲的就是我在写框架过程中碰到的一个问题,封装jquery的after方法,支持DOM和html标签两种用法,html标签传参,我要把html解释成DOM结构,用DOM的方法插入. 首先,我们写个通用的html标签: <div onclick

  • [js高手之路]原型式继承与寄生式继承详解

    一.原型式继承本质其实就是个浅拷贝,以一个对象为模板复制出新的对象 function object( o ){ var G = function(){}; G.prototype = o; return new G(); } var obj = { name : 'ghostwu', age : 22, show : function(){ return this.name + ',' + this.age; } }; var obj2 = object( obj ); console.log(

  • [js高手之路]寄生组合式继承的优势详解

    在之前javascript面向对象系列的文章里面,我们已经探讨了组合继承和寄生继承,回顾下组合继承: function Person( uName ){ this.skills = [ 'php', 'javascript' ]; this.userName = uName; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher ( uName ){ Person.call(

  • JS实现简单可拖动的模态框

    本文实例为大家分享了JS实现简单可拖动的模态框的具体代码,供大家参考,具体内容如下 这篇博文有 简单实现 和 带样式且稍微复杂一点 的两个版本 简单版本 效果图: 实现思路: 给可拖动部分添加点击事件,触发时计算鼠标在可拖动部分中的坐标( e.pageX - box.offsetLeft ),得到 x y . 给 document 添加鼠标移动事件,因为当鼠标拖动模态框的时候,是在整个DOM窗口内移动的.保持鼠标与模态框的相对位置不变,所以需要计算此时的模态框的位置(e.pageX - x ),

  • 原生JavaScript实现模态框的示例代码

    目录 原生js封装模态框 示例效果 代码 原生js封装模态框 最近需要一个模态框,然后一种是提示类的,一种是确认类型,我就想着再网上找一个然后修改一下,结果找到了,但是不深特别合适,我再次基础上在做了修改,对功能有所增强,纯原生写的,没有任何依赖性,适应性比较强,值copy即可使用. 配置:可以在实例化时对options进行参数设置,达到自己想要的效果 示例效果 代码 HTML部分 <head> <meta charset="utf-8"> <title&

  • bootstrap模态框远程示例代码分享

    本文实例为大家分享了bootstrap模态框远程的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

随机推荐