前端设计模式——单例模式

单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

以上更多是对于Java这种有类概念的定义，在JavaScript这种无类语言中，创建对象的方法不需要通过创建类再创建，所以在JavaScript中单例模式只需要确保只有一个实例，并提供全局访问。（ES6开始有类的概念）另说。

像线程池、全局缓存、浏览器中的 window 对象等都用到了单例模式，但是全局变量却不是单例模式。在开发中我们应该多用let/const，少用var，因为他很容易造成命名空间污染。要解决这个问题可以有两个方法，一是使用命名空间，二是使用闭包封装私有变量。

比较典型的就是比如做弹窗，对话框，qq的登陆浮窗这些，他们在页面中是唯一的，这个使用就可以用单例模式服用同一个div。

//创建对象的方法传入疯转的getSingle函数
var getSingle=function(fn){
    var result; //这里的result只有在调用时才被创建，所以是惰性单例
    return function(){
        return result || (result=fn.apply(this,arguments)); //控制单例
    }
};
//单一职责，这里就是创建div，getSingle做单例
var createModal=function(){
    var div = document.creatElement('div');
    //xxxxx
    return div
};

var createSingletModal=getSingle(createModal);

document.getElementById( 'Btn' ).onclick = function(){ 
 var layer = createSingletModal(); 
 layer.style.display = 'block'; 
}; 

上面的例子很典型，但是在实际开发中都用的比较少，我们会用框架，会用组件库。

单例模式适用d额场景
1、需要频繁实例化然后销毁的对象。
2、创建对象时耗时过多或者耗资源过多，但又经常用到的对象。
3、有状态的工具类对象。
4、频繁访问数据库或文件的对象

下面这个例子就是用单例模式封装文件组件

file.js是file组件

import File from './file.vue'
import Vue from 'vue'

File.newInstance = properties => {
  const props = properties || {}
  const Instance = new Vue({
    data: props,
    render(h) {
      return h(File,{ props })
    }
  })

  const component = Instance.$mount()
  document.body.appendChild(component.$el)
}
export default File

 index.js用单例模式封装api

import File from './file.js'
let fileInstance
function getFileInstance (props) {
  fileInstance = fileInstance || File.newInstance(props)
  return fileInstance
}
function file(props) {
  getFileInstance(props)
}
export default file

使用 

import File from '@/components/file'  // 引入组件file
<File :fileSrc=fileSrc :fileType='img'></File> //使用