JS设计模式-单例模式

作者: bestvist | 来源:发表于2017-09-30 00:01 被阅读71次

单例模式是一个用来划分命名空间并将一批属性和方法组织在一起的对象,如果它可以被实例化,那么它只能被实例化一次。
原文链接

单例模式优点

  • 划分命名空间,减少全局变量
  • 组织代码为一体,便于阅读维护

并非所有的对象字面量都是单例,比如模拟数据

基本结构:
let Cat = {
   name: 'Kitty',
   age: 3,
   run: ()=>{
      console.log('run');
   }
}

上面对象字面量结构是创建单例模式的方法之一,但并不是单例模式,单例模式的特点是仅被实例化一次
要实现单例模式可以使用变量来标示该类是否被实例

基本实现:
class Singleton {
    constructor(name){
        this.name = name;
        this.instance = null;
    }
    getName(){
        return this.name;
    }
}

let getInstance = (()=> {
    let instance;
    return (name)=> {
        if(!instance) {
            instance = new Singleton(name);
        }
        return instance;
    }
})()

let cat1 = getInstance('Hello');
let cat2 = getInstance('Kitty');
console.log(cat1 === cat2); //true
console.log(cat1.getName()) //'Hello'
console.log(cat2.getName()) //'Hello'

用instance变量标示实例Singleton,如果没有实例创建一个,如果有则直接返回实例,由于仅能被实例化一次,cat2得到的实例和cat1相同

实用
在创建dom元素时为避免重复创建,可以使用单例模式创建

//单例模式
let createModal = function() {
    let content = document.createElement('div');
    content.innerHTML = '弹窗内容';
    content.style.display = 'none';
    document.body.appendChild(content);
}

//代理获取实例
let getInstance = function(fn) {
    let result
    return function() {
        return result || (result = fn.call(this,arguments));
    }
}

let createSingleModal = getInstance(createModal);
document.getElementById("id").onclick = function(){
    let modal = createSingleModal();
    modal.style.display = 'block';
};

单例模式是一种简单却非常使用的设计模式,在需要时创建实例,并且只创建唯一一个

相关文章

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 单例模式Java篇

    单例设计模式- 饿汉式 单例设计模式 - 懒汉式 单例设计模式 - 懒汉式 - 多线程并发 单例设计模式 - 懒汉...

  • python中OOP的单例

    目录 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计模式 是 前人...

  • 单例

    目标 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计模式 是 前人...

  • 设计模式 - 单例模式

    设计模式 - 单例模式 什么是单例模式 单例模式属于创建型模式,是设计模式中比较简单的模式。在单例模式中,单一的类...

  • js的4种设计模式及Vue小结(1)

    4种js设计模式 模块模式(module) 原型模式(prototype) 观察者模式(observer) 单例模...

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • 2018-04-08php实战设计模式

    一、单例模式 单例模式是最经典的设计模式之一,到底什么是单例?单例模式适用场景是什么?单例模式如何设计?php中单...

  • 十道前端面试题第【05】篇

    摘要:本篇是设计模式专题,分享了10个设计模式的JS示例代码——工厂模式、单例模式、原型模式、建造者模式、外观模式...

  • python 单例

    仅用学习参考 目标 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计...

网友评论

    本文标题:JS设计模式-单例模式

    本文链接:https://www.haomeiwen.com/subject/fxnwextx.html