原生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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
小程序实现左滑删除效果
2019/07/25 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
浅谈Python 对象内存占用
2016/07/15 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python如何将多个PDF进行合并
2019/08/13 Python
NumPy排序的实现
2020/01/21 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
高中毕业自我评价
2014/02/08 职场文书
商铺租赁意向书
2014/04/01 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
如何写辞职书
2015/02/26 职场文书
原告离婚代理词
2015/05/23 职场文书
高中地理教学反思
2016/02/19 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
Python基础之数据结构详解
2021/04/28 Python