JavaScript设计模式之单例模式简单实例教程


Posted in Javascript onJuly 02, 2018

本文实例讲述了JavaScript设计模式之单例模式。分享给大家供大家参考,具体如下:

一、单例模式概念

单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。

二、单例模式的作用和注意事项

模式作用:

1、模块间通信

2、系统中某个类的对象只能存在一个

3、保护自己的属性和方法

注意事项:

1、注意this的使用

2、闭包容易造成内存泄露,不需要的要赶快干掉

3、注意new的成本。(继承)

三、单例模式代码和实战总结

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>单例模式</title>
</head>
<body>
<!--<script>
  var Singleton = (function(){
    var instantiated;
    function init(){
      /*这里定义单例代码*/
      return{
        publicMethod:function(){
          console.log("hello world");
        },
        publicProperty:"test"
      };
    }
    return{
      getInstance:function(){
        if(!instantiated){
          instantiated = init();
        }
        return instantiated;
      }
    }
  })();
  Singleton.getInstance().publicMethod();
</script>-->
<script>
   /*1.独立的对象 建2个一个xiaowang一个xiaoli
   2.让xiaoli跟xiaowang通过门铃进行通信
   3.先看一下xiaowang家有没有门 如果油门直接通过门铃通讯didi如果没有门先建门
   4.两个单例之间看是通讯*/
  var xiaowang = (function(argument){
    var men;
    var xiaowangjia = function(msg){
      this.menling = msg;
    }
    var info = {
      sendMessage:function(msg){
        if(!men){
          men = new xiaowangjia(msg);
        }
        return men;
      },
      abc:function(){
        return 123;
      }
    };
    return info;
  })();
  var xiaoli = {
    callXiaowang:function(msg){
      var _xw = xiaowang.sendMessage(msg);
      alert(_xw.menling);
      console.log(_xw.menling);
      _xw = null;//等待垃圾回收
      var abc = xiaowang.abc();
      console.log(abc);
    }
  }
  xiaoli.callXiaowang("didi");
</script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun测试运行效果如下:

JavaScript设计模式之单例模式简单实例教程

JavaScript设计模式之单例模式简单实例教程

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
script标签的 charset 属性使用说明
Dec 04 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 #Javascript
JS实现的JSON序列化操作简单示例
Jul 02 #Javascript
JS内部事件机制之单线程原理
Jul 02 #Javascript
JS将网址url转化为JSON格式的方法
Jul 02 #Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 #Javascript
JS限制输入框输入的实现代码
Jul 02 #Javascript
webpack手动配置React开发环境的步骤
Jul 02 #Javascript
You might like
删除数组元素实用的PHP数组函数
2008/08/18 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
Java中final关键字详解
2015/08/10 PHP
js 操作符实例代码
2009/10/24 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Python脚本实现网卡流量监控
2015/02/14 Python
Python制作词云的方法
2018/01/03 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
中学生学习生活的自我评价
2013/10/26 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
征求意见函
2015/06/05 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis