三分钟学JS设计模式（三）单例模式

单例模式

一、什么是单例模式

单例模式（Singleton Pattern）是最简单的设计模式之一：一个单一的类，负责创建自己的对象，同时提供一个方法直接获取唯一的实例。其中当第一次获取这个对象的时候才实例化这个对象，叫做懒汉模式，反之如果代码代码一加载就实例化一个对象叫做饿汉模式

举个栗子：老王生活所迫，开上了滴滴。早上八点开启接单模式，当接到单后才启动车子（实例化对象），这个叫懒汉模式。如果早上开启接单的时候就启动车子，这个就叫饿汉模式。

在JS中我们还能拓展到对DOM对象的处理，如Loading效果。

二、 优缺点

• 优点：
  • 1、内存中只有一个对象，节省内存空间；
  • 2、避免频繁的创建销毁对象，提高性能；
  • 3、全局引用、避免对共享资源的多重占用（如写文件操作）；

三、场景例子、代码实现

场景：每次做ajax请求的时候都要在页面显示一个Loading

• 饿汉模式
  一加载就创建dom对象并插入，优点是第一次调用直接可用，缺点是有可能不需要这个功能，造成性能资源浪费。

// 饿汉模式
var Loading = (() =>{
	let loadingDiv = document.createElement( 'div' ); 
	loadingDiv.classList = ['loading-wrapper']
　　document.body.appendChild( loadingDiv );
　　const getLoading = () => loadingDiv ;
　　return getLoading
})()

Loading.getLoading().style.display = 'block'
fetch(url).then(() =>{
	Loading.getLoading().style.display = 'none'
})

• 懒汉模式
  需要加载的时候才生成对象并插入，好处是有需要才创建，缺点是第一次使用比较慢，在Java中使用这种方式还需要注意线程安全，好在JS是单线程的，无需考虑这点。

// 懒汉模式
var Loading = (() =>{
	let loadingDiv = null;
　　const getLoading = () => {
		if(!loadingDiv){
			loadingDiv = document.createElement( 'div' ); 
			loadingDiv.classList = ['loading-wrapper']
		　　document.body.appendChild( loadingDiv );
		}
		return loadingDiv
	} ;
　　return getLoading
})()

Loading.getLoading().style.display = 'block'
fetch(url).then(() =>{
	Loading.getLoading().style.display = 'none'
})

通常情况，懒汉缺点不会很明显，因此推荐懒汉模式。

著名的例子有：rc-modal