原生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 相关文章推荐
jquery ajax 登录验证实现代码
Sep 23 Javascript
JQuery性能优化的几点建议
May 14 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
Vue实现穿梭框效果
Sep 30 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&amp;java(二)
2006/10/09 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
JavaScript 数组详解
2013/10/10 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python实现图片识别汽车功能
2018/11/30 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
如何利用Python 进行边缘检测
2020/10/14 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
法律进学校实施方案
2014/03/15 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
婚礼秀策划方案
2014/05/19 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
运动会宣传稿100字
2015/07/23 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python