Sail


手在键盘敲很轻


Singleton(单例)模式

概述

Singleton(单例)模式,限制了类的实例化次数只能一次。

在该实例不存在的情况下,可以通过一个方法创建一个类来实现创建类的实例;如果实例已经存在,它会简单返回该对象的引用。


具体实现

ES5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var mySingleton = (function () {
var instance;
function init() {
function privateMethod() {
console.log("I am private");
}
var privateVariable = "Im also private";
var privateRandomNumber = Math.random();
return {
publicMethod : function () {
console.log("The public can see me!");
},
publicProperty : "I am also public",
getRandomNumber : function () {
return privateRandomNumber;
}
};
};

return {
getInstance : function () {
if (!instance) {
instance = init();
}
return instance;
}
};
})();

var singleA = mySingleton.getInstance();
var singleB = mySingleton.getInstance();
console.log(singleA === singleB);

ES6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Leader {
constructor () {
if (!Leader.single) {
this.level = 'supreme';
Leader.single = this;
}
return Leader.single;
}
toString() {
console.log('I am a leader.');
}
}


const leader = new Leader();
const leader1 = new Leader();
console.log(Object.is(leader, leader1)); // true

18年8月21更新


单例模式实践 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单例模式</title>
</head>
<body>
<h1>单例模式</h1>
<button id="loginBtn">登录</button>
<script>
var createLoginLayer = (function () {
var div;
return function () {
if(!div) {
div = document.createElement('div');
div.innerHTML = '我是登录悬浮窗';
div.style.display = 'none';
document.body.appendChild(div);
}
return div;
}
})();

document.getElementById('loginBtn').onclick = function () {
console.log('inner');
var loginLayer = createLoginLayer();
loginLayer.style.display = 'block';
};
</script>
</body>
</html>

优化=>把创建实例对象的职责和管理单例的职责分别放置在两个方法里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单例模式</title>
</head>
<body>
<h1>单例模式</h1>
<button id="loginBtn">登录</button>
<script>
var getSingle = function (fn) {
var result;
return function () {
return result || (result = fn.apply(this, arguments));
}
};

var createLoginLayer = function () {
var div = document.createElement('div');
div.innerHTML = '我是登录悬浮窗';
div.style.display = 'none';
document.body.appendChild(div);
return div;
};

var createSingleLoginLayer = getSingle(createLoginLayer);

var createSingleIframe = getSingle(function () {
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
return iframe;
});

// document.getElementById('loginBtn').onclick = function () {
// var loginLayer = createSingleLoginLayer();
// loginLayer.style.display = 'block';
// };


document.getElementById('loginBtn').onclick = function () {
var loginLayer = createSingleIframe();
loginLayer.src = 'http://baidu.com';
};
</script>
</body>
</html>

推荐阅读

怎么使用es6 的class 优雅地写出单例模式?
深入理解JavaScript系列(25):设计模式之单例模式
ES6语法实践,用ES6重写《JavaScript Patterns》中的设计模式
JavaScript设计模式:单例模式
JavaScript设计模式–单例模式

© 2016-2019. | 由Hexo强力驱动 | 主题Huno | 渝ICP备17002561号 | 不装弱了,我要做大佬