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

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

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

  • 手写forEch,map,filter
js 复制代码
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));

基础单例模式

js 复制代码
// 单体模式,
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;
  },
};

改进版单例

js 复制代码
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());

高阶版单例

js 复制代码
// 惰性单体
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());

案例

js 复制代码
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;
})();
相关推荐
开开心心就好43 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
有没有没有重复的名字9 小时前
线程安全的单例模式与读者写者问题
java·开发语言·单例模式
烛阴10 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子10 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead10 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界11 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos