原生javascript单例模式的应用实例分析


Posted in Javascript onFebruary 23, 2020

本文实例讲述了原生javascript单例模式的应用。分享给大家供大家参考,具体如下:

总体原则:开闭原则(Open Close Principle) 开闭原则就是说对扩展开放,对修改关闭。在程序需要进行扩展的时候,不能去修改原有 的代码,实现一个热插拔的效果。所以一句话概括就是:为了使程序的扩展性好,易于维护和升 级。 1、单一职责原则 不要存在多于一个导致类变更的原因,也就是说每个类应该实现单一的职责,如若不然,就 应该把类拆分。

创建模式_单例模式  某个类只允许创建一个实例,这就是单例模式。优点如下: 1、某些类创建比较频繁,对于一些大型的对象,这是一笔很大的系统开销 2、省去了new操作符,降低了系统内存的使用频率,减轻GC压力。 3、有些类如交易所的核心交易引擎,控制着交易流程,如果该类可以创建 多个的话,系统完全乱了。(比如:中国国家主席只有一个,飞机大战的 地图对象只有一个),所以只有使用单例模式,才能保证核心交易服务器 独立控制整个流程。

应用:

飞机大战中的地图只能有一个实例;  遮罩层有可能是某个项目中经常要频繁创建的实例,如果不停地创建和删除,还是 很浪费资源。应该,在首次使用时创建,以后只是使用首次创建的实例  放大镜有可能在某个项目中经常要频繁地创建的实例,也是很浪费资源。

单例模式的基础应用

<script>
let singleton = function (){
  function Map(width,height) {
    this.width = width;
    this.height = height;
  }
  let instance;
  return{
    getIntence : function(width,height){
      if(instance == undefined){
        instance = new Map(width,height);
      }else{
        instance.width = width;
        instance.height = height;
      }
      return instance;
    }
  }
}();
let m1 = singleton.getIntence(100,200);
let m2 = singleton.getIntence(200,300);
console.log(m1);//200 300
console.log(m2);//200 300
</script>

飞机大战中单例模式的应用

地图部分

let mapSingleton = (function(){
  function Map(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();
  }
  //853 600
  Map.prototype.createUI = function() {
    //1、地图的div
    this.domObj = document.createElement("div");
    this.domObj.style.cssText = `margin:20px auto;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(var i=0;i<2;i++){
      let img01 = 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(){
    let top1 = -1106;
    setInterval(()=>{
      top1++;
      if(top1>=-253){
        top1 = -1106;
      }
      this.moveBox.style.top = top1+"px";
    },50);
  }
  var instance;
  return {
    getInstance:function(width,height,background){
      if(instance==undefined){
        instance = new Map(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;
      }
      return instance;
    }
  }
})();
// 单例模式的总结
/*采用闭包原理和自调用原理,先进行自调用噶、返回闭包函数,让使用者调用,但只能创建一个实例对象,当要创建多个的时候 不会进行创建,最上面简单案例代码,如果要再次创建实例,会覆盖之前的数据,并且不会创建实例对象
为什么要采用闭包 防止使用者再次构造新对象 采用自调用之后 函数执行1次 在调用时 只需要使用return的函数就行 避免用户多次构造新对象*/

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 #Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 #Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 #Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 #Javascript
vue.js实现简单的计算器功能
Feb 22 #Javascript
Vue.js实现立体计算器
Feb 22 #Javascript
vue实现计算器功能
Feb 22 #Javascript
You might like
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
js中switch case循环实例代码
2013/12/30 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
python使用socket连接远程服务器的方法
2015/04/29 Python
python语言元素知识点详解
2019/05/15 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python爬虫如何解决图片验证码
2021/02/14 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
捐款倡议书范文
2014/02/02 职场文书
单位委托书范本
2014/04/04 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
兽医医药专业求职信
2014/07/27 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
计划生育责任书
2015/05/09 职场文书
观看《信仰》心得体会
2016/01/15 职场文书