原生javascript单例模式的应用实例分析
本文实例讲述了原生javascript单例模式的应用。分享给大家供大家参考，具体如下：
总体原则：开闭原则（OpenClosePrinciple）开闭原则就是说对扩展开放，对修改关闭。在程序需要进行扩展的时候，不能去修改原有的代码，实现一个热插拔的效果。所以一句话概括就是：为了使程序的扩展性好，易于维护和升级。1、单一职责原则不要存在多于一个导致类变更的原因，也就是说每个类应该实现单一的职责，如若不然，就应该把类拆分。
创建模式_单例模式某个类只允许创建一个实例，这就是单例模式。优点如下：1、某些类创建比较频繁，对于一些大型的对象，这是一笔很大的系统开销2、省去了new操作符，降低了系统内存的使用频率，减轻GC压力。3、有些类如交易所的核心交易引擎，控制着交易流程，如果该类可以创建多个的话，系统完全乱了。（比如：中国国家主席只有一个，飞机大战的地图对象只有一个），所以只有使用单例模式，才能保证核心交易服务器独立控制整个流程。
应用：
飞机大战中的地图只能有一个实例；遮罩层有可能是某个项目中经常要频繁创建的实例，如果不停地创建和删除，还是很浪费资源。应该，在首次使用时创建，以后只是使用首次创建的实例放大镜有可能在某个项目中经常要频繁地创建的实例，也是很浪费资源。
单例模式的基础应用
飞机大战中单例模式的应用
地图部分
letmapSingleton=(function(){
functionMap(width,height,background){
this.domObj=null;//地图的div
this.moveBox=null;
this.width=width;
this.height=height;
this.background=background;
this.enemyPlanes=[];//敌机数组
this.myPlanes=[];//我方战机数组
this.createUI();
this.moveBg();
}
//853600
Map.prototype.createUI=function(){
//1、地图的div
this.domObj=document.createElement("div");
this.domObj.style.cssText=`margin:20pxauto;position:relative;width:${this.width}px;height:${this.height}px;overflow:hidden`;
document.body.appendChild(this.domObj);
//2、移动的div
this.moveBox=document.createElement("div");
this.moveBox.style.cssText=`position:absolute;
top:-1106px;
width:480px;
height:1706px;`;
this.domObj.appendChild(this.moveBox);
//3、图片
for(vari=0;i<2;i++){
letimg01=document.createElement("img");
img01.src=this.background;
img01.style.cssText=`display:block`;
this.moveBox.appendChild(img01);
}
//4、积分板：
this.scoreDom=document.createElement("div");
this.scoreDom.style.cssText="position:absolute;left:0px;top:0px;width:100px;height:35px;z-index:999";
this.scoreDom.innerHTML=0;
this.domObj.appendChild(this.scoreDom);
};
Map.prototype.moveBg=function(){
lettop1=-1106;
setInterval(()=>{
top1++;
if(top1>=-253){
top1=-1106;
}
this.moveBox.style.top=top1+"px";
},50);
}
varinstance;
return{
getInstance:function(width,height,background){
if(instance==undefined){
instance=newMap(width,height,background);
}else{
instance.width=width;
instance.height=height;
instance.background=background;
instance.domObj.style.width=this.width+"px";
instance.domObj.style.height=this.height+"px";
instance.moveBox.children[0].src=this.background;
instance.moveBox.children[1].src=this.background;
}
returninstance;
}
}
})();
//单例模式的总结
/*采用闭包原理和自调用原理，先进行自调用噶、返回闭包函数，让使用者调用，但只能创建一个实例对象，当要创建多个的时候不会进行创建，最上面简单案例代码，如果要再次创建实例，会覆盖之前的数据，并且不会创建实例对象
为什么要采用闭包防止使用者再次构造新对象采用自调用之后函数执行1次在调用时只需要使用return的函数就行避免用户多次构造新对象*/
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。
更多关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。