【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;
})();
相关推荐
你的人类朋友42 分钟前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手1 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
Jokerator2 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
海天胜景2 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing3 小时前
前端面试常考题目详解
前端·javascript
中微子4 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10244 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y4 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
小蜜蜂dry4 小时前
Fetch 笔记
前端·javascript