时间:2021-05-28
什么是单例呢?
单,就是一个的意思。例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,一般来说在网站中弹出的模态框,不停的一直点击,一般只能创建一个。还有后台的数据库连接,一般都是保证一个连接等等。今天的主题就是单例在模态框中的应用,我们先要搞清楚,怎么弄个单例出来.
我们先看下普通的构造函数加原型方式。下面这种是常见的方式
每次new都会在内存中生成一块新的内存区域保存新的实例,所以这种方式就不能保证只能new出一个单例,所以,我们想要创建一个单例,就要能够控制new创建实例的过程!!!,这就是单例的关键,那么要控制这个过程,肯定不能让用户直接调用构造函数,所以我们要另外想办法.
第一种办法: 在函数中添加一个静态方法,来控制创建实例的过程
第8行判断ins这个变量是否保存了一个实例,如果没有就new一个,否则直接返回。第二次在调用的时候,由于已经存在了ins,所以直接返回,就不需要在new了,这要就能确保是单例
第二种办法:利用闭包和立即表达式的特性
这两种方法都可以,接下来,我就选择第二种方法来实现弹出单一的模态框
三、传统面向对象方式,每次点击都会弹出新的模态框
样式:
div { width: 200px; height: 200px; border:1px solid #09f; box-shadow: 2px 2px 1px #666; position: absolute; }html:
<input type="button" value="弹窗">js部分:
四,用单例改造
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高手之路]单例模式实现模态框的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
模态弹出框依赖于Bootstrap提供的js文件,可以单独引入modal.js,也可以直接引入bootstrap.js。模态弹出框的结构Bootstrap框架中
微信小程序弹框和模态框实现代码实现效果图:实现代码:.wxapp-modal{width:100%;height:100%;position:fi
模态框(ModalDialogueBox)也可叫做模态对话框,或者对话框,当一个模态框被打开时,用户可以与该对话框进行交互,点击关闭按钮可关闭该模态框!功能实现
最近使用了amazeui做项目,用到了模态框,按照官网给的示例,点击按钮,弹出模态框,使用没问题,但是我是在表格中自定义操作列中使用,在点击操作按钮的时候,模态
对话框的性质分为模态对话框和非模态对话框:1.模态对话框:打开该对话框之后,在该对话框之外的一切操作都是被禁止的,要想进行其他操作,必须先关闭本对话框。js命令