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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
javascript工具库代码
Mar 29 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
前端如何实现动画过渡效果
Feb 05 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
python两种注释用法的示例
2020/10/09 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
2015年班干部工作总结
2015/04/29 职场文书
解约证明模板
2015/06/19 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers
Django框架模板用法详解
2022/06/10 Python