原生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的关于动态创建DOM元素的问题
Dec 24 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
js中的面向对象之对象常见创建方法详解
Dec 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调用Webservice实例代码
2011/07/29 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python 如何调用 dubbo 接口
2020/09/24 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
vivo智能手机官方商城:vivo
2016/09/22 全球购物
满月酒答谢词
2014/01/14 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
高一数学教学反思
2016/02/18 职场文书
vue ref如何获取子组件属性值
2022/03/31 Vue.js
Python OpenCV实现图形检测示例详解
2022/04/08 Python
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript