声明 本篇中代码和部分描述参考和摘录自JavaScript设计模式与实战一书

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

实现举例

常规的单例模式

javascript
function Singleton() {
    this.instance = null;
    this.name = '';
}

Singleton.getInstance = function() {
    if (null === this.instance) {
        this.instance = new Singleton();
    }
    return this.instance;
}

var s1 = Singleton.getInstance();
var s2 = Singleton.getInstance();

console.log(s1 === s2);

这是单例模式的常规实现方式，我们通过Singleton.getInstance()方法可以获得Singleton类的一个唯一对象。

另外一种实现

javascript
var Singleton = (function() {
    var _instance = null;
    
    function Singleton() {
        this.name = '';
    }

    return function() {
        if (null === _instance) {
            _instance = new Singleton();
        }
        
        return _instance;
    }
})();

var s1 = new Singleton();
var s2 = new Singleton();

console.log(s1 === s2);

更适合JavaScript的单例模式

JavaScript拥有全局变量，这是它的缺点，但是有时候也会为我们带来一些好处。

javascript
var singleton = {
    name: '',
    getName: function() {
        return this.name;
    }
}

singleton是一个全局变量，每次访问它的时候它都是唯一的。当全局变量太多的，我们也可以使用命名空间来区分。

单例模式的应用

单例的div

我们可以使用单例模式实现一个单例的div，这可以应用在比如弹出登录窗口中。

javascript
var SingleDiv= (function() {
    var _instance = null;

    return function() {
        if (null === _instance) {
            var div = document.createElement('div');
            div.innerHTML = '这是一个单例div';
            _instance = div;
        }
        
        return _instance;
    }
})();

更通用的单例模式

javascript
// 创建div
function createDiv(html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    document.body.appendChild(div);
    return div;
}

// 创建iframe
function createIframe(src) {
    var iframe= document.createElement('iframe');
    iframe.src= src;
    document.body.appendChild(iframe);
    return iframe;
}

// 生产单例构造函数
function getSingleton(fn) {
    var instance = null;
    return function() {
        if (instance) {
            return instance;
        }
        
        return instance = fn.apply(this, arguments);
    }
}

// 获取单例div构造方法
var createSingleDiv = getSingleton(createDiv);

// 使用举例
var singleDiv1 = createSingleDiv('这是一个单例的div');
var singleDiv2 = createSingleDiv();

console.log(singleDiv2.innerHTML);