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 相关文章推荐
javascript 冒号 使用说明
Jun 06 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
node.js require() 源码解读
Dec 13 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
Preload基础使用方法详解
Feb 03 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中养成7个面向对象的好习惯
2010/01/28 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
js 内存释放问题
2010/04/25 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Django入门使用示例
2017/12/12 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python实现静态服务器
2019/09/05 Python
keras:model.compile损失函数的用法
2020/07/01 Python
python如何导入依赖包
2020/07/13 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
称象教学反思
2014/02/03 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
民生工作实施方案
2014/05/31 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
鲁冰花观后感
2015/06/10 职场文书
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS