原生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实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
小程序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 sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
详谈js模块化规范
2017/07/07 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
重命名批处理python脚本
2013/04/05 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
社团招新策划书
2014/02/04 职场文书
毕业寄语大全
2014/04/09 职场文书
销售目标责任书
2014/07/23 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers