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 相关文章推荐
JS拖动技术 关于setCapture使用
Dec 09 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
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
使用无限生命期Session的方法
2006/10/09 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
JSONP之我见
2015/03/24 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
pow在python中的含义及用法
2019/07/11 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
高级销售求职信
2014/02/21 职场文书
学校募捐倡议书
2014/05/14 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书