javascript设计模式之单体模式学习笔记


Posted in Javascript onFebruary 15, 2017

单体模式提供了一种将代码组织为一个逻辑单元的手段,这个逻辑单元中的代码可以通过单一变量进行访问。

单体模式的优点是:

  • 可以用来划分命名空间,减少全局变量的数量。
  • 使用单体模式可以使代码组织的更为一致,使代码容易阅读和维护。
  • 可以被实例化,且实例化一次。

什么是单体模式?单体模式是一个用来划分命名空间并将一批属性和方法组织在一起的对象,如果它可以被实例化,那么它只能被实例化一次。

但是并非所有的对象字面量都是单体,比如说模拟数组或容纳数据的话,那么它就不是单体,但是如果是组织一批相关的属性和方法在一起的话,那么它有可能是单体模式,所以这需要看开发者编写代码的意图;

下面我们来看看定义一个对象字面量(结构类似于单体模式)的基本结构如下:

// 对象字面量
var Singleton = {
  attr1: 1,
  attr2: 2,
  method1: function(){
    return this.attr1;
  },
  method2: function(){
    return this.attr2;
  }
};

如上面只是简单的字面量结构,上面的所有成员变量都是通过Singleton来访问的,但是它并不是单体模式;因为单体模式还有一个更重要的特点,就是可以仅被实例化一次,上面的只是不能被实例化的一个类,因此不是单体模式;对象字面量是用来创建单体模式的方法之一;

使用单体模式的结构如下demo

我们明白的是单体模式如果有实例化的话,那么只实例化一次,要实现一个单体模式的话,我们无非就是使用一个变量来标识该类是否被实例化,如果未被实例化的话,那么我们可以实例化一次,否则的话,直接返回已经被实例化的对象。

如下代码是单体模式的基本结构:

// 单体模式
var Singleton = function(name){
  this.name = name;
  this.instance = null;
};
Singleton.prototype.getName = function(){
  return this.name;
}
// 获取实例对象
function getInstance(name) {
  if(!this.instance) {
    this.instance = new Singleton(name);
  }
  return this.instance;
}
// 测试单体模式的实例
var a = getInstance("aa");
var b = getInstance("bb");
// 因为单体模式是只实例化一次,所以下面的实例是相等的
console.log(a === b); // true

由于单体模式只实例化一次,因此第一次调用,返回的是a实例对象,当我们继续调用的时候,b的实例就是a的实例,因此下面都是打印的是aa;

console.log(a.getName());// aa
console.log(b.getName());// aa

上面的封装单体模式也可以改成如下结构写法:

// 单体模式
var Singleton = function(name){
  this.name = name;
};
Singleton.prototype.getName = function(){
  return this.name;
}
// 获取实例对象
var getInstance = (function() {
  var instance = null;
  return function(name) {
    if(!instance) {
      instance = new Singleton(name);
    }
    return instance;
  }
})();
// 测试单体模式的实例
var a = getInstance("aa");
var b = getInstance("bb");
// 因为单体模式是只实例化一次,所以下面的实例是相等的

console.log(a === b); // true

console.log(a.getName());// aa

console.log(b.getName());// aa

理解使用代理实现单列模式的好处

比如我现在页面上需要创建一个div的元素,那么我们肯定需要有一个创建div的函数,而现在我只需要这个函数只负责创建div元素,其他的它不想管,也就是想实现单一职责原则,就好比淘宝的kissy一样,一开始的时候他们定义kissy只做一件事,并且把这件事做好,具体的单体模式中的实例化类的事情交给代理函数去处理,这样做的好处是具体的业务逻辑分开了,代理只管代理的业务逻辑,在这里代理的作用是实例化对象,并且只实例化一次; 创建div代码只管创建div,其他的不管;如下代码:

// 单体模式
var CreateDiv = function(html) {
  this.html = html;
  this.init();
}
CreateDiv.prototype.init = function(){
  var div = document.createElement("div");
  div.innerHTML = this.html;
  document.body.appendChild(div);
};
// 代理实现单体模式
var ProxyMode = (function(){
  var instance;
  return function(html) {
    if(!instance) {
      instance = new CreateDiv("我来测试下");
    }
    return instance;
  } 
})();
var a = new ProxyMode("aaa");
var b = new ProxyMode("bbb");
console.log(a===b);// true

理解使用单体模式来实现弹窗的基本原理

下面我们继续来使用单体模式来实现一个弹窗的demo;我们先不讨论使用单体模式来实现,我们想下我们平时是怎么编写代码来实现弹窗效果的; 比如我们有一个弹窗,默认的情况下肯定是隐藏的,当我点击的时候,它需要显示出来;如下编写代码:

// 实现弹窗
var createWindow = function(){
  var div = document.createElement("div");
  div.innerHTML = "我是弹窗内容";
  div.style.display = 'none';
  document.body.appendChild('div');
  return div;
};
document.getElementById("Id").onclick = function(){
  // 点击后先创建一个div元素
  var win = createWindow();
  win.style.display = "block";
}

如上的代码;大家可以看看,有明显的缺点,比如我点击一个元素需要创建一个div,我点击第二个元素又会创建一次div,我们频繁的点击某某元素,他们会频繁的创建div的元素,虽然当我们点击关闭的时候可以移除弹出代码,但是呢我们频繁的创建和删除并不好,特别对于性能会有很大的影响,对DOM频繁的操作会引起重绘等,从而影响性能;因此这是非常不好的习惯;我们现在可以使用单体模式来实现弹窗效果,我们只实例化一次就可以了;如下代码:

// 实现单体模式弹窗
var createWindow = (function(){
  var div;
  return function(){
    if(!div) {
      div = document.createElement("div");
      div.innerHTML = "我是弹窗内容";
      div.style.display = 'none';
      document.body.appendChild(div);
    }
    return div;
  }
})();
document.getElementById("Id").onclick = function(){
  // 点击后先创建一个div元素
  var win = createWindow();
  win.style.display = "block";
}

理解编写通用的单体模式

上面的弹窗的代码虽然完成了使用单体模式创建弹窗效果,但是代码并不通用,比如上面是完成弹窗的代码,假如我们以后需要在页面中一个iframe呢?我们是不是需要重新写一套创建iframe的代码呢?比如如下创建iframe:

var createIframe = (function(){
  var iframe;
  return function(){
    if(!iframe) {
      iframe = document.createElement("iframe");
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
    }
    return iframe;
  };
})();

我们看到如上代码,创建div的代码和创建iframe代码很类似,我们现在可以考虑把通用的代码分离出来,使代码变成完全抽象,我们现在可以编写一套代码封装在getInstance函数内,如下代码:

var getInstance = function(fn) {
  var result;
  return function(){
    return result || (result = fn.call(this,arguments));
  }
};

如上代码:我们使用一个参数fn传递进去,如果有result这个实例的话,直接返回,否则的话,当前的getInstance函数调用fn这个函数,是this指针指向与这个fn这个函数;之后返回被保存在result里面;现在我们可以传递一个函数进去,不管他是创建div也好,还是创建iframe也好,总之如果是这种的话,都可以使用getInstance来获取他们的实例对象;

如下测试创建iframe和创建div的代码如下:

// 创建div
var createWindow = function(){
  var div = document.createElement("div");
  div.innerHTML = "我是弹窗内容";
  div.style.display = 'none';
  document.body.appendChild(div);
  return div;
};
// 创建iframe
var createIframe = function(){
  var iframe = document.createElement("iframe");
  document.body.appendChild(iframe);
  return iframe;
};
// 获取实例的封装代码
var getInstance = function(fn) {
  var result;
  return function(){
    return result || (result = fn.call(this,arguments));
  }
};
// 测试创建div
var createSingleDiv = getInstance(createWindow);
document.getElementById("Id").onclick = function(){
  var win = createSingleDiv();
  win.style.display = "block";
};
// 测试创建iframe
var createSingleIframe = getInstance(createIframe);
document.getElementById("Id").onclick = function(){
  var win = createSingleIframe();
  win.src = "http://www.3water.com";
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
javascript表单事件处理方法详解
May 15 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 #Javascript
javascript设计模式之模块模式学习笔记
Feb 15 #Javascript
javascript设计模式之策略模式学习笔记
Feb 15 #Javascript
BootStrap实现带关闭按钮功能
Feb 15 #Javascript
Jil,高效的json序列化和反序列化库
Feb 15 #Javascript
Bootstrap模态框使用详解
Feb 15 #Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 #Javascript
You might like
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
js实现简易ATM功能
2020/10/27 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
自荐信怎么写好
2013/11/11 职场文书
2014年高考决心书
2014/03/11 职场文书
房屋所有权证明
2014/10/20 职场文书
人力资源部岗位职责
2015/02/11 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python
idea下配置tomcat避坑详解
2022/04/12 Servers
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers