JavaScript设计惰性单例模型概述

发表于:2021-1-29 10:06

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:余真帆-fanerge    来源:掘金

  单例模式
  定义:单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。
  在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。
  举例:模态框、登录控件、注销控件
  下面均以登录模态框做说明
  引入代理实现单例模式
  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 ProxySingletonCreateDiv = (function() {
  var instance;
  return function(html) {
  if (!instance) {
  instance = new CreateDiv(html);
  }
  return instance;
  }
  })();
  var a = new ProxySingletonCreateDiv('seven1');
  var b = new ProxySingletonCreateDiv('seven2');
  console.log(a === b); // true
  说明:我们负责管理单例的逻辑移到了代理类ProxySingletonCreateDiv中。
  这样一来,CreateDiv就变成了一个普通的类,他跟ProxySingletonCreateDiv组合起来可以达到单例模式的效果。
  通用的单例模式
  // 通用的单例验证方法
  const getSingle = function (fn){
  let result;
  return function (){
  return result || (result = fn.apply(this, arguments));
  };
  };
  // 创建登录模态框
  const createLoginLayer = function (){
  const div = document.createElement('div');
  div.innerHTML = '我是登录模态框';
  document.body.appendChild(div);
  return div;
  };
  // 为登录模态框使用单例模式
  const createSingleLoginLoyer = getSingle(createLoginLayer);
  const loginLayer1 = createSingleLoginLoyer(); // 第一个登录模态框
  const loginLayer2 = createSingleLoginLoyer(); // 还是第一个登录模态框
  console.log(loginLayer1 === loginLayer2); // true
  这时不管你执行多少次 createSingleLoginLoyer() 方法,都只会生产一个 div 节点。
  我们的通用单例模式就完成了。    
  惰性单例
  定义:惰性单例指的是在需要的时候才创建对象的实例。
  以创建登录模态框为例
  const createLoginLayer = (function (){
  let div;
  return function (){
  if (!div) {
  div = document.createElement('div');
  div.innerHTML = '我是登录模态框';
  }
  return div;
  };
  })();
  // 在点击按钮时才创建节点(惰性)
  document.getElementById('login-btn').onclick = function (){
  var loginLayer = createLoginLayer();
  loginLayer.style.display = 'block';
  };
  这里的对惰性单例的实现主要是只有单例了网页上的登录按钮,才会去创建,登录框的dom节点,并且只是创建一次。

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号