JS设计模式-单例模式

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

原文链接
单例模式优点

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

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

基本结构:
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';
};

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

发布了36 篇原创文章 · 获赞 4 · 访问量 1万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章