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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
js控制div弹出层实现方法
May 11 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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 header()函数常用方法总结
2014/04/11 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
详解vue中组件参数
2018/07/09 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
详解Python3注释知识点
2019/02/19 Python
python实现代码统计器
2019/09/19 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
Java基础知识面试题
2014/03/25 面试题
三年级评语大全
2014/04/23 职场文书
献爱心标语
2014/06/21 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
Python字符串常规操作小结
2022/04/03 Python