【js进阶】设计模式之单例模式的几种声明方式

单例模式,简言之就是一个类无论实例化多少次,最终都是同一个对象

原生js的几个辅助方式的实现

  • 手写forEch,map,filter
Array.prototype.MyForEach = function (callback) {
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this);
  }
};

const arr = [1, 2, 3];
arr.MyForEach((item, index, arr) => {
  console.log(item);
  console.log(index);
  console.log(arr);
});

Array.prototype.MyFilter = function (callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};

const arr2 = [1, 2, 3, 5, 6, 7];
console.log(arr2.MyFilter((item) => item > 3));
console.log(arr2.MyFilter((item) => item < 5));

Array.prototype.MyMap = function (callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }
  return result;
};

console.log(arr2.MyMap((item) => item * 2));

在这里插入图片描述

基础单例模式

// 单体模式,
var SingleTon = {
  a1: true,
  a2: 10,
  method1() {
    console.log('单体模式1');
  },
  method2() {
    console.log('单体模式2');
  },
};

SingleTon.a1 = false;
let total = SingleTon.a2 + 5;
let result = SingleTon.method1();

// 全局命名空间
let GiantCorp = {};
GiantCorp.Common = {};
GiantCorp.ErrorCodes = {};
GiantCorp.PahgeHandler = {};

// 私有成员,一是相互约定用下划线标注
GiantCorp.DataParse = {
  // 私有属性
  _name: '张三',
  // 私有方法
  _getName() {
    return this._name;
  },
  // 公有方法
  getUsername(nickname) {
    return this._getName() + nickname;
  },
};

改进版单例

let MyNamespace = {};
// 使用闭包封装私有变量
MyNamespace.SingleTon = (function () {
  let arr = ['张三', '李四', '王五'];
  return {
    name: '续航',
    age: 18,
    getName() {
      return this.name;
    },
    getAge() {
      return this.age;
    },
    getAllUserName() {
      return arr.join(',');
    },
  };
})();

console.log(MyNamespace.SingleTon.getName());
console.log(MyNamespace.SingleTon.getAge());
console.log(MyNamespace.SingleTon.getAllUserName());

高阶版单例

// 惰性单体
let MyNamespace = {};
// 使用闭包封装私有变量
MyNamespace.SingleTon = (function () {
  let singleTon = null;

  function constructor() {
    let arr = ['张三', '李四', '王五'];
    return {
      name: '续航',
      age: 18,
      getName() {
        return this.name;
      },
      getAge() {
        return this.age;
      },
      getAllUserName() {
        return arr.join(',');
      },
    };
  }
  return {
    getInstance() {
      if (!singleTon) {
        singleTon = constructor(); // 创建实例对象,并将其赋值给私有变量
      }
      return singleTon; // 返回实例对象(单例模式)
    },
  };
})();
console.log(MyNamespace.SingleTon.getInstance().getName());
console.log(MyNamespace.SingleTon.getInstance().getAllUserName());

案例

let simpleXhrFactory = (function () {
  let standard = {
    createXHRObject() {
      return new XMLHttpRequest();
    },
  };
  let activexOld = {
    createXHRObject() {
      return new ActiveXObject('Microsoft.XMLHTTP');
    },
  };
  let activeXNew = {
    createXHRObject() {
      return new ActiveXObject('MSXML2.XMLHTTP');
    },
  };
  let xhr = null;
  try {
    xhr = standard.createXHRObject();
    return xhr;
  } catch (e) {
    try {
      xhr = activeXNew.createXHRObject();
      return xhr;
    } catch (e) {
      try {
        xhr = activeXOld.createXHRObject();
      } catch (error) {
        throw new Error('不支持的浏览器');
      }
    }
  }
  return xhr;
})();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/956227.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

git系列之revert回滚

1. Git 使用cherry-pick“摘樱桃” step 1&#xff1a; 本地切到远程分支&#xff0c;对齐要对齐的base分支&#xff0c;举例子 localmap git pull git reset --hard localmap 对应的commit idstep 2&#xff1a; 执行cherry-pick命令 git cherry-pick abc123这样就会将远程…

【Web】2025西湖论剑·中国杭州网络安全安全技能大赛题解(全)

目录 Rank-l Rank-U sqli or not Rank-l username存在报错回显&#xff0c;发现可以打SSTI 本地起一个服务&#xff0c;折半查找fuzz黑名单&#xff0c;不断扔给fenjing去迭代改payload from flask import Flask, request, render_template_stringapp Flask(__name__)app…

Android系统开发(十四):跨进程通讯的隐形之手AIDL

引言 你是否曾在 Android 开发中为进程间通讯&#xff08;IPC&#xff09;头疼不已&#xff1f;如果是&#xff0c;那么 AIDL 就是你的救星&#xff01;它不仅让跨进程数据传输变得高效&#xff0c;而且还解决了异构环境的兼容性问题。本篇文章将带你深入了解 AIDL&#xff0c…

string类的常用接口及模拟实现

目录 基础知识 常用接口 1>常见构造 2>容量操作 3>访问及遍历操作 1.迭代器 2.反向迭代器 3.范围for 4.auto 4>修改操作 5>非成员函数 其它接口 模拟实现 string.h string.cpp swap() 基础知识 string是一个管理字符的类&#xff0c;定义在std命…

Linux——多线程的控制

Linux——线程的慨念及控制-CSDN博客 文章目录 目录 文章目录 前言 一、线程函数的认识 1、基本函数的回顾 1、线程的创建pthread_create 2、线程阻塞pthread_join 3、线程退出pthread_exit 2、线程的分离pthread_detach 3、互斥锁初始化函数&#xff1a;pthread_mutex_init 4、…

计算机网络 (49)网络安全问题概述

前言 计算机网络安全问题是一个复杂且多维的领域&#xff0c;它涉及到网络系统的硬件、软件以及数据的安全保护&#xff0c;确保这些元素不因偶然的或恶意的原因而遭到破坏、更改或泄露。 一、计算机网络安全的定义 计算机网络安全是指利用网络管理控制和技术措施&#xff0c;保…

TCP状态转移图详解

状态 描述 LISTEN represents waiting for a connection request from any remote TCP and port. SYN-SENT represents waiting for a matching connection request after having sent a connection request. SYN-RECEIVED represents waiting for a confirming connect…

VUE学习笔记(入门)5__vue指令v-html

v-html是用来解析字符串标签 示例 <!doctype html> <html lang"en"> <head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document<…

【论文投稿】探秘计算机视觉算法:开启智能视觉新时代

目录 引言 一、计算机视觉算法基石&#xff1a;图像基础与预处理 二、特征提取&#xff1a;视觉信息的精华萃取 三、目标检测&#xff1a;从图像中精准定位目标 四、图像分类&#xff1a;识别图像所属类别 五、语义分割&#xff1a;理解图像的像素级语义 六、计算机视觉…

【Java数据结构】Java对象的比较

元素的比较 基本类型比较 在Java中基本类型比较可以直接比较大小 &#xff0c;返回一个布尔类型&#xff08;true或者false&#xff09;。 int a 10; int b 20; System.out.println(a>b); System.out.println(ab); System.out.println(a<b);对象比较的问题 对象的比…

《自动驾驶与机器人中的SLAM技术》ch8:基于预积分和图优化的紧耦合 LIO 系统

和组合导航一样&#xff0c;也可以通过预积分 IMU 因子加上雷达残差来实现基于预积分和图优化的紧耦合 LIO 系统。一些现代的 Lidar SLAM 系统也采用了这种方式。相比滤波器方法来说&#xff0c;预积分因子可以更方便地整合到现有的优化框架中&#xff0c;从开发到实现都更为便…

Ubuntu 24.04 LTS 更改软件源

Ubuntu 24.04 LTS 修改软件源

【2024年度技术总结】Unity 游戏开发的深度探索与实践

文章目录 前言一、Unity 游戏开发的技术深度总结1、C# 编程基础2、Unity 基础入门3、Unity 实战技巧4、Unity 小技巧分享 二、技术工具与平台的年度使用心得1、学习资源的选择2、开发环境配置3、测试与调试工具 三、技术项目实战经验与成果展示1、【制作100个Unity游戏】专栏2、…

ingress-nginx代理tcp使其能外部访问mysql

一、helm部署mysql主从复制 helm repo add bitnami https://charts.bitnami.com/bitnami helm repo updatehelm pull bitnami/mysql 解压后编辑values.yaml文件&#xff0c;修改如下&#xff08;storageclass已设置默认类&#xff09; 117 ## param architecture MySQL archit…

Top期刊算法!RIME-CNN-BiLSTM-Attention系列四模型多变量时序预测

Top期刊算法&#xff01;RIME-CNN-BiLSTM-Attention系列四模型多变量时序预测 目录 Top期刊算法&#xff01;RIME-CNN-BiLSTM-Attention系列四模型多变量时序预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 基于RIME-CNN-BiLSTM-Attention、CNN-BiLSTM-Attention、R…

游戏引擎学习第84天

仓库:https://gitee.com/mrxiao_com/2d_game_2 我们正在试图弄清楚如何完成我们的世界构建 上周做了一些偏离计划的工作&#xff0c;开发了一个小型的背景位图合成工具&#xff0c;这个工具做得还不错&#xff0c;虽然是临时拼凑的&#xff0c;但验证了背景构建的思路。这个过…

搭建一个基于Spring Boot的数码分享网站

搭建一个基于Spring Boot的数码分享网站可以涵盖多个功能模块&#xff0c;例如用户管理、数码产品分享、评论、点赞、收藏、搜索等。以下是一个简化的步骤指南&#xff0c;帮助你快速搭建一个基础的数码分享平台。 — 1. 项目初始化 使用 Spring Initializr 生成一个Spring …

31、【OS】【Nuttx】OSTest分析(1):stdio测试(一)

背景 接上篇wiki 30、【OS】【Nuttx】构建脚本优化&#xff0c;引入待构建项目参数 最小系统分析完后&#xff0c;下一个能够更全面了解Nuttx的Demo&#xff0c;当然选择OSTest&#xff0c;里面有大量关于OS的测试用例&#xff0c;方便对Nuttx的整体功能有个把握。 stdio_tes…

Spring WebFlux

文章目录 一、概述1、Spring体系定位2、Spring MVC和WebFlux差异 二、入门1、依赖2、ReactorHttpHandlerAdapter&#xff08;main启动&#xff09;3、DispatcherHandler&#xff08;SpringWebFlux启动&#xff09;4、WebFilter 三、DispatcherHandler理解1、handle 前置知识&am…

基于SSM的自助购药小程序设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…