13518219792
这篇文章给大家分享的是有关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:
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:
