JavaScript 设计模式之单例模式

单例模式

常规单例

单例模式我们在日常使用中还是非常多的,比如常见的 jQuery,prototype,vue等都是属于单例模式,我们在使用 new Vue 的时候,返回的也会是同一个实例的,简单实现

javascript 复制代码
// 方式一
let Car = function () {
  const inst = this
  this.num = 0
  // todo: 其他内容
  Car = function () {
    return inst
  }
}

const miniCar = new Car()
const baoMa = new Car()

console.log(minicar === baoMa) // true

// 方式二

let Car;
  (function () {
    let intr = null
    Car = function Car() {
      if (intr) {
        return intr
      }
      intr = this
      this.name = "Car"
      // todo: 其他内容
    }
  }())

const miniCar = new Car()
const baoMa = new Car()

console.log(miniCar === baoMa) // true

// 方式三

let Car = function () {
  let inst = this
  this.name = "Car"
  // todo: 其他内容

  Car = function () { 
    return inst
  }
}

const miniCar = new Car()
const baoMa = new Car()

console.log(miniCar === baoMa) // true

// 方式四 隐式缓存

let Car = function () {
  if (Car.inst) return Car.inst
  this.name = "Car"
  // todo: 其他内容
  Car.inst = this
}

const miniCar = new Car()
const baoMa = new Car()

console.log(miniCar === baoMa) // true

正常我们在定义单例模式时应该注重一个自身的命名空间问题,很多时候,我们更多的可能是直接用一个对象来表达如这种:

javascript 复制代码
const Inst = {
  data: () => {
    // todo:
  },
  methods: {
  },
  ...
}

这样就拥有了一个自己的独立命名空间

模块分明

我们在使用时,尽可能的将模块分明开来

javascript 复制代码
const Project = {
  common: {
    // todo:
  },
  util: {
    // todo:
  },
  other: {
    // todo:
  },
  ...
}

// 使用

Project.util.xx

一个独立于其他的命名空间,其中的代码逻辑分离开来,独立模块,使得结构更加分明

单例对象

我们可以将一些对象定义为静态

javascript 复制代码
const Car = (function () {
  let opt = {
    SPEED: 100,
    PRICE:'12W'
  }
  return {
    get(key) {
      return opt[key] || null
    },
    set(key, value) {
      opt[key] = value
    }
  }
}())

console.log(Car.get('PRICE')) // 12W

这里我们只能使用 Car 中的 opt 定义的一些属性,这里我们定义了方法 set 来写操作,若不定义 set 就是我们说的静态了,只能读取了

惰性单例

延迟创建

javascript 复制代码
const LazySingle = (function () { 
  let _inst = null
  function Single() {
    return {
      methods: {
        // todo:
      },
      version:'1.0.0'
    }
  }
  return function () {
    if (!_inst) {
      _inst = new Single()
    }
    return _inst
  }
}())

let test = LazySingle().version
console.log(test) // 1.0.0

所谓单例,就是在一个文件或是一个系统中只能存在一个实例或是一个对象,尽可能的将各个模块的代码梳理得井井有条,更为规范

相关推荐
成都渲染101云渲染66663 小时前
如何在3ds Max中实现更快、更高质量的渲染
前端·javascript·人工智能
SRET6 小时前
Mineradio 沙盒隔离安装完全指南 | 一键安全运行 Electron 应用!!!
javascript·经验分享·安全·electron·aigc·音视频·ai编程
全栈前端老曹7 小时前
【MongoDB】安全与权限管理 —— 用户认证、角色权限、SSL 加密
前端·javascript·数据库·安全·mongodb·nosql·ssl
free3510 小时前
作用域链与 Environment:变量查找、遮蔽和赋值怎么实现
javascript
YHL10 小时前
🤖 Agent 智能体开发实战 · 第一课:Tool Use —— 让大模型自动干活
前端·javascript·人工智能
HUMHSX12 小时前
Vue 组件通信核心知识点梳理
javascript·vue.js·ecmascript
风止何安啊12 小时前
🚦 前端并发请求 “交通管制”:别让你的接口堵成早高峰
前端·javascript·面试
熊猫钓鱼>_>12 小时前
2026 前端的三场底层革命:当 Vue、React Native 和 Three.js 同时去掉中间层
前端·javascript·vue.js·react native·架构·webgl·three.js
名字还没想好☜12 小时前
React useEffect 依赖数组踩坑:闭包陷阱与清理函数
前端·javascript·react.js·react·useeffect
柒和远方13 小时前
LeetCode 4. 寻找两个正序数组的中位数 —— 二分划分的艺术
javascript·python·算法