[js高手之路]设计模式系列课程-单例模式实现模态框
来源:互联网 发布:cctv网络电视播放器 编辑:程序博客网 时间:2024/05/17 07:07
什么是单例呢?
单,就是一个的意思。例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,一般来说在网站中弹出的模态框,不停的一直点击,一般只能创建一个。还有后台的数据库连接,一般都是保证一个连接等等。今天的主题就是单例在模态框中的应用,我们先要搞清楚,怎么弄个单例出来.
我们先看下普通的构造函数加原型方式。下面这种是常见的方式
1 function Singleton ( uName ){ 2 this.userName = uName; 3 this.ins = null; 4 } 5 Singleton.prototype.showUserName = function(){ 6 return this.userName; 7 } 8 var obj1 = new Singleton( 'ghostwu' ); 9 var obj2 = new Singleton( 'ghostwu2' );10 console.log( obj1 === obj2 ); //false
每次new都会在内存中生成一块新的内存区域保存新的实例,所以这种方式就不能保证只能new出一个单例,所以,我们想要创建一个单例,就要能够控制new创建实例的过程!!!,这就是单例的关键,那么要控制这个过程,肯定不能让用户直接调用构造函数,所以我们要另外想办法.
第一种办法: 在函数中添加一个静态方法,来控制创建实例的过程
1 function Singleton ( uName ){ 2 this.userName = uName; 3 } 4 Singleton.prototype.showUserName = function(){ 5 return this.userName; 6 } 7 Singleton.getInstance = function( uName ){ 8 if ( !this.ins ) { 9 this.ins = new Singleton( uName );10 }11 return this.ins;12 }13 14 var obj1 = Singleton.getInstance( 'ghostwu' );15 var obj2 = Singleton.getInstance( 'ghostwu2' );16 console.log( obj1 === obj2 ); //true
第8行判断ins这个变量是否保存了一个实例,如果没有就new一个,否则直接返回。第二次在调用的时候,由于已经存在了ins,所以直接返回,就不需要在new了,这要就能确保是单例
第二种办法:利用闭包和立即表达式的特性
1 function Singleton ( uName ){ 2 this.userName = uName; 3 } 4 Singleton.prototype.showUserName = function(){ 5 return this.userName; 6 } 7 Singleton.getInstance = (function(){ 8 var ins = null; 9 return function( uName ) {10 if ( !ins ) {11 ins = new Singleton( uName );12 }13 return this;14 }15 })();16 17 var obj1 = Singleton.getInstance( 'ghostwu' );18 var obj2 = Singleton.getInstance( 'ghostwu2' );19 console.log( obj1 === obj2 );
这两种方法都可以,接下来,我就选择第二种方法来实现弹出单一的模态框
三、传统面向对象方式,每次点击都会弹出新的模态框
样式:
1 div {2 width: 200px;3 height: 200px;4 border:1px solid #09f;5 box-shadow: 2px 2px 1px #666;6 position: absolute;7 }
html:
1 <input type="button" value="弹窗">
js部分:
1 var oBtn = document.querySelector("input"), 2 offset = 20, index = 1; 3 function Module( pos ){ 4 this.offset = pos || 20; 5 } 6 Module.prototype.create = function(){ 7 var oDiv = document.createElement( "div" ); 8 oDiv.style.left = ( ++index ) * offset + 'px'; 9 oDiv.style.top = ( ++index ) * offset + 'px';10 oDiv.innerHTML = 'ghostwu教你用设计模式实战';11 return oDiv;12 }13 oBtn.onclick = function(){14 var oDiv = new Module();15 document.body.appendChild( oDiv.create() );16 }
四,用单例改造
html:
1 <input type="button" value="弹窗1">2 <input type="button" value="弹窗2">
1 var aBtn = document.querySelectorAll("input"), 2 offset = 20, index = 1; 3 function Module( pos ){ 4 this.offset = pos || 20; 5 } 6 Module.prototype.create = function(){ 7 var oDiv = document.createElement( "div" ); 8 oDiv.style.left = ( ++index ) * offset + 'px'; 9 oDiv.style.top = ( ++index ) * offset + 'px';10 oDiv.innerHTML = 'ghostwu教你用设计模式实战';11 return oDiv;12 }13 Module.one = (function(){14 var ins = null, isExist = false;15 return function( pos ){16 if ( !ins ) ins = new Module( pos );17 if ( !isExist ) {18 document.body.appendChild( ins.create() );19 isExist = true;20 }21 }22 })();23 aBtn[0].onclick = function(){24 Module.one( 10 );25 }26 aBtn[1].onclick = function(){27 Module.one( 10 );28 }
在Module.one中通过变量isExist的两种状态和闭包特性控制元素只能被添加一次
阅读全文
0 0
- [js高手之路]设计模式系列课程-单例模式实现模态框
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
- 设计模式系列课程09之【单例模式】
- [js高手之路]设计模式系列课程-设计一个模块化扩展功能(define)和使用(use)库
- [js高手之路]设计模式系列课程-设计一个模块化扩展功能(define)和使用(use)库
- [js高手之路]设计模式系列课程-设计一个模块化扩展功能(define)和使用(use)库
- 设计模式系列之单例模式
- 设计模式系列之 单例模式
- 设计模式系列之单例模式
- JS 设计模式之 单例模式
- JS设计模式之单例模式
- JS设计模式之单例模式
- JS 设计模式之单例模式
- JS设计模式之单例模式
- 设计模式系列之单例模式和观察者模式
- 6-6 使用函数输出一个整数的逆序数
- 多个线程按顺序输出
- C#WebService返回dynamic类型报错问题
- 数据结构与算法:链表
- 【Linux学习笔记】26:环境变量
- [js高手之路]设计模式系列课程-单例模式实现模态框
- Java反射机制(reflect)
- 多列等高布局
- codeforces 849A Odds and Ends
- HDOJ HDU 1009 FatMouse' Trade
- WOJ1088-从1开始的N个连续自然数的M次方之和
- tcp/ip客户端临时端口
- auto_ptr源码解析以及例子 --auto_ptr_ref
- iOS UICollectionView去除多余分割线