什么是单例呢?
单,就是一个的意思。例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能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高手之路]单例模式实现模态框的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】