Skip to content

Commit b5caacc

Browse files
WangXiaoyuggWangXiaoyugg
committed
单例模式
1 parent 6c05385 commit b5caacc

File tree

2 files changed

+329
-0
lines changed

2 files changed

+329
-0
lines changed

‎four-chapter/Singleton.html

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Singleton</title>
6+
</head>
7+
<body>
8+
<button id='login'>登录</button>
9+
<script>
10+
// var CreateDiv = (function(){
11+
// var instance;
12+
13+
// var CreateDiv = function(html){
14+
// if(instance){
15+
// return instance
16+
// }
17+
// this.html = html;
18+
// this.init();
19+
// return instance = this;
20+
// }
21+
22+
// CreateDiv.prototype.init = function(){
23+
// var div = document.createElement('div');
24+
// div.innerHTML = this.html;
25+
// document.body.appendChild(div);
26+
// }
27+
// return CreateDiv;
28+
// })()
29+
// var a = new CreateDiv('sev1')
30+
// var b = new CreateDiv('sev2')
31+
32+
// alert(a === b);
33+
34+
// var CreateDiv = function(html){
35+
// this.html = html;
36+
// this.init()
37+
// }
38+
39+
// CreateDiv.prototype.init = function(){
40+
// var div = document.createElement('div')
41+
// div.innerHTML = this.html;
42+
// document.body.appendChild(div);
43+
// };
44+
45+
// var proxySingletonCreateDiv = (function(){
46+
// var instance ;
47+
48+
// return function(html){
49+
// if(!instance){
50+
// instance = new CreateDiv(html);
51+
// }
52+
// return instance;
53+
// }
54+
// })()
55+
56+
// var a = new proxySingletonCreateDiv('sev1');
57+
// var b = new proxySingletonCreateDiv('sev2');
58+
// alert(a === b)
59+
60+
// var MyApp = {}
61+
// MyApp.namespace = function(name){
62+
// var parts = name.split('.')
63+
// var current = MyApp;
64+
// for(var i in parts){
65+
// console.log('current',current)
66+
// if(!current[parts[i]]){
67+
// current[parts[i]] = {}
68+
// }
69+
// current = current[parts[i]]
70+
// }
71+
// }
72+
// MyApp.namespace('event')
73+
// MyApp.namespace('dom.style')
74+
75+
// var loginLayer = (function(){
76+
// var div = document.createElement('div');
77+
// div.innerHTML = '我是登录浮窗'
78+
// div.style.display = 'none'
79+
// document.body.appendChild(div)
80+
// return div;
81+
// })()
82+
83+
// document.getElementById('login').onclick = function(){
84+
// loginLayer.style.display = 'block';
85+
// }
86+
87+
// var createLoginLayer =(function(){
88+
// var div;
89+
// return function(){
90+
// if(!div){
91+
// div = document.createElement('div')
92+
// div.innerHTML = '我是登录浮窗'
93+
// div.style.display = 'none';
94+
// document.body.appendChild(div)
95+
// }
96+
// return div;
97+
// }
98+
// })()
99+
100+
// document.getElementById('login').onclick = function(){
101+
// var loginLayer = createLoginLayer();
102+
// loginLayer.style.display = 'block';
103+
// }
104+
105+
106+
var getSingle = function(fn){
107+
var result;
108+
return function(){
109+
return result || (result = fn.apply(this,arguments))
110+
}
111+
}
112+
113+
var createLoginLayer = function(){
114+
var div = document.createElement('div');
115+
div.innerHTML = '我是登录窗'
116+
div.style.display = 'none'
117+
document.body.appendChild(div)
118+
return div;
119+
}
120+
121+
var createSingleLoginLayer = getSingle(createLoginLayer);
122+
123+
document.getElementById('login').onclick = function(){
124+
var loginLayer = createSingleLoginLayer();
125+
loginLayer.style.display = 'block';
126+
}
127+
128+
// var createSingleIframe = getSingle( function(){
129+
// var iframe = document.createElement ( 'iframe' );
130+
// document.body.appendChild( iframe );
131+
// return iframe;
132+
// });
133+
134+
// document.getElementById( 'login' ).onclick = function(){
135+
// var loginLayer = createSingleIframe();
136+
// loginLayer.src = 'http://baidu.com';
137+
// };
138+
139+
var bindEvent = getSingle(function(){
140+
document.getElementById('login').onclick = function(){
141+
console.log('click')
142+
}
143+
return true;
144+
})
145+
146+
var render = function(){console.log('开始渲染列表'); bindEvent()};
147+
148+
render()
149+
render()
150+
render();
151+
</script>
152+
</body>
153+
</html>

‎four-chapter/Singleton.js

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
//保证一个类仅有一个实例，并提供一个访问它的全局访问点
2+
// 应用场景对象只要一个 ： 线程池，全局缓存，浏览器的windwo对象
3+
4+
// 登录浮窗很适合
5+
// 用一个变量来标志当前是否已经为某个类创建过对象
6+
var Singleton = function (name) {
7+
this.name = name;
8+
this.instance = null;// 声明全局的实例
9+
}
10+
11+
Singleton.prototype.getName = function(){
12+
console.warn(this.name)
13+
}
14+
15+
Singleton.getInstance = function(name){
16+
if(! this.instance){
17+
this.instance = new Singleton(name);
18+
}
19+
console.log('instance',this.instance);
20+
return this.instance;
21+
}
22+
23+
var a = Singleton.getInstance('seve1');
24+
var b = Singleton.getInstance('seve2');
25+
26+
console.log( a === b);
27+
28+
var Singleton = function(name){
29+
this.name = name;
30+
}
31+
32+
Singleton.prototype.getName = function(){
33+
console.warn(this.name);
34+
};
35+
36+
Singleton.getInstance = (function(){
37+
var instance = null;
38+
return function(name){
39+
if(!instance){
40+
instance = new Singleton(name);
41+
}
42+
43+
return instance
44+
}
45+
})()
46+
47+
// var a = Singleton.getInstance( 'sven1' );
48+
// var b = Singleton.getInstance( 'sven2' );
49+
// alert ( a === b ); // true
50+
51+
52+
// 上面做法增加了类的不透明性,透明的单例模式
53+
54+
// 创建唯一的div节点
55+
var CreateDiv = (function(){
56+
var instance;
57+
return function(html){
58+
if(!instance){
59+
return instance
60+
}
61+
this.html = html;
62+
this.init();
63+
return instance = this;
64+
}
65+
66+
CreateDiv.prototype.init = function(){
67+
var div = document.createElement('div');
68+
div.innerHTML = this.html;
69+
document.body.appendChild(div);
70+
}
71+
72+
})()
73+
var a = new CreateDiv('sev1')
74+
var b = new CreateDiV('sev2')
75+
76+
alert(a === b);
77+
78+
//用代理模式实现单例模式
79+
var CreateDiv = function(html){
80+
this.html = html;
81+
this.init()
82+
}
83+
84+
CreateDiv.prototype.init = function(){
85+
var div = document.createElement('div')
86+
div.innerHTML = this.html;
87+
document.body.appendChild(div);
88+
};
89+
90+
//引入代理类 proxySingletonCreateDiv, 负责管理单例逻辑
91+
92+
var proxySingletonCreateDiv = (function(){
93+
var instance ;
94+
95+
return function(html){
96+
if(!instance){
97+
instance = new CreateDiv(html);
98+
}
99+
return instance;
100+
}
101+
})()
102+
103+
var a = new proxySingletonCreateDiv('sev1');
104+
var b = new proxySingletonCreateDiv('sev2');
105+
alert(a === b)
106+
107+
//减少全局变量
108+
//1 使用命名空间
109+
var namespace1 = {
110+
a:function(){},
111+
b:function(){}
112+
}
113+
114+
//动态创建命名空间
115+
var MyApp = {}
116+
MyApp.namespace = function(name){
117+
var parts = name.split('.')
118+
var current = MyApp;
119+
for(var i in parts){
120+
console.log('current',current)
121+
if(!current[parts[i]]){
122+
current[parts[i]] = {}
123+
}
124+
current = current[parts[i]] // current 指向 新生的dom{}
125+
}
126+
}
127+
MyApp.namespace('event')
128+
MyApp.namespace('dom.style')
129+
//['dom','style'] MyApp[dom] = {}
130+
// MyApp[style] = {}
131+
132+
//闭包封装私有变量
133+
var user = (function(){
134+
var __name = 'seve';
135+
var __age = 10;
136+
137+
return {
138+
getUserInfo:function(){
139+
return __name + ' : ' + __age;
140+
}
141+
}
142+
})()
143+
144+
//惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点
145+
//qq 登录框 ，一种是在页面加载时就创建好div 浮窗，用户点击时才开始显示
146+
//一种是 用户点击时才开始创建该浮窗 达到了惰性的效果，失去了单例的效果
147+
//利用标志位判断是否创建过登录浮窗
148+
149+
var createLoginLayer = function(){
150+
var div = document.createElement('div')
151+
div.innerHTML = '我是登录浮窗'
152+
div.style.display = 'none'
153+
document.body.appendChild(div)
154+
return div;
155+
}
156+
157+
document.getElementById('login').onclick = function(){
158+
var loginLayer =createLoginLayer()
159+
loginLayer;.style.display = 'block'
160+
}
161+
162+
//单一职能 抽离代码 创建对象 管理单例
163+
164+
//单例模式 ，ajax 动态的往列表里去追加数据，在使用事件代理的前提
165+
// 下，click 事件实际上只需要在第一次渲染列表的时候被绑定一次
166+
// 但是我们不想去判断当前是 否是第一次渲染列表，如果借助于 jQuery，
167+
// 我们通常选择给节点绑定 one 事件
168+
169+
/*
170+
在 getSinge 函数中，实际上也提到了闭包和高阶函数的概念。
171+
单例模式是一种简单但非常实 用的模式，特别是惰性单例技术，
172+
在合适的时候才创建对象，并且只创建唯一的一个。
173+
更奇妙的 是，创建对象和管理单例的职责被分布在两个不同的方法中，
174+
这两个方法组合起来才具有单例模 式的威力
175+
*/
176+

0 commit comments

Comments
 (0)