原生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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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中的登陆login
2007/01/18 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
Script的加载方法小结
2011/01/12 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
2014年会策划方案
2014/05/11 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
车辆转让协议书
2014/09/24 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
预备党员介绍人意见
2015/06/01 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python