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 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
php 字符串函数收集
2010/03/29 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
layui多图上传实现删除功能的例子
2019/09/23 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
在Python中使用元类的教程
2015/04/28 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
用python实现一个简单的验证码
2020/12/09 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
浙大网新C/C++面试解惑
2015/05/27 面试题
幸福家庭事迹材料
2014/02/03 职场文书
《老王》教学反思
2014/02/23 职场文书
安踏广告词改编版
2014/03/21 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
雨花台导游词
2015/02/06 职场文书
中学教师读书笔记
2015/07/01 职场文书
晚会开幕词范文
2016/03/04 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python