单体模式
理解： 单体模式是提供了一种代码组织为一个逻辑单元的手段。这个逻辑单元中的代码可以通过单一变量进行访问。
优点：
1> 可以划分命名空间。
2> 使代码阅读性，维护性更好。
3> 可以实例化(new 对象) 但是只能实例化一次。
//单体模式实例
function Obj(){
this.name="张三";
this.run=null;
}
Obj.prototype.getName=function(){
return this.name;
}
function getRun(){
//可以实例化(new),但是只能实例化一次
if(!this.run){
//不存在即可new
this.run=new Obj();
}
//有 则
return this.run;
}
var a=getRun();
var b=getRun();
console.log(a.name);
console.log(b.name);
console.log(a===b);//true
//自执行
var getRun=(function(){
var run=null;
return function(){
if(!run){
run=new Obj();
}
return run;
}
})
单体模式实际例子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
//用一个函数创建div节点，放入到body中， 函数==>专一 创建div
var CreateDiv=function(html){
this.html=html;
//调用
this.init();
}
CreateDiv.prototype.init=function(){
var oDiv=document.createElement("div");
oDiv.innerHTML=this.html;
document.body.appendChild(oDiv);
}
var proxyMode=(function(){
var run;
return function(){
if(!run){
//不存在
run=new CreateDiv("这是一个单体");
}
return run;
}
})();
//调用
proxyMode();
</script>
<script src="./a.js"></script>
</html>
单体模式实际例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>
// function createDiv(){
// var oDiv=document.createElement("div");
// oDiv.innerHTML="这就是一个盒子";
// oDiv.style.display="none";
// //添加到页面中去
// document.body.appendChild(oDiv);
// return oDiv;
// }
//使用单体模式创建div. 提高性能，只要创建一次div，多次使用div
//函数自执行
var createDiv=(function(){
var oDiv;
return function(){
if(!oDiv){
console.log(1);
//不存在就生成
oDiv=document.createElement("div");
oDiv.innerHTML="这是一个盒子";
oDiv.style.display="nonne";
document.body.appendChild(oDiv);
}
//有则返回
return oDiv;
}
})();
//按钮点事件
document.getElementById("btn").onclick=function(){
var w=createDiv();
w.style.display="block";
}
</script>
<script src="./a.js"></script>
</html>
观察者模式(订阅模式)
理解：定义了一个对象一对多的关系，让多个观察者同时监听一个大对象，当一个大对象发生变化时，所有依赖他的对象都得到了通知。
实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
//观察者模式
var obj={};// 发布者
obj.list=[];//发布列表
obj.listen=function(fn){// 增加订阅者， fn是一个回调函数
obj.list.push(fn);
}
obj.message=function(){//发布消息
for(var i=0,fn;fn=this.list[i++];){
console.log(fn);
fn.apply(this,arguments);
}
}
//小李订阅的消息
obj.listen(function(color,size){
console.log("颜色是:"+color);
console.log("尺寸是:"+size);
});
//小张订阅的消息
obj.listen=(function(color,size){
console.log("颜色是:"+color);
console.log("尺寸是:"+size);
});
obj.message("红色",40);
obj.message("黑色",70);
</script>
<script src="./a.js"></script>
</html>
实例2
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
//观察者模式
var obj={};// 发布者
obj.list=[];//发布列表
obj.listen=function(key,fn){// 增加订阅者，
if(!this.list[key]){
this.list[key]=[];
}
//添加回调函数
this.list[key].push(fn);
}
obj.message=function(){
var key=Array.prototype.shift.call(arguments);//去除消息类型名称
var fns=this.list[key]; //取出消息对应回调函数集合
//如果没有订阅这个消息，直接返回
if(!fns || fns.length==0){
return;
}
//有则
for(var i=0,fn; fn=fns[i++];){
fn.apply(this,arguments);// arguments 发布消息附带参数
}
}
//小李订阅的消息
obj.listen("红色",function(size){
console.log('尺寸'+size);
})
//obj.message("红色",40);//尺寸40
obj.message("黑色",40); //不匹配 为空
//小张订阅的消息
</script>
<script src="./a.js"></script>
</html>
享元模式
功能：优化程序的性能问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
//享元模式
//公有 型号 屏幕大小 出厂日期 私有：color
function Iphone(model,screen,date){
this.model=model;
this.screen=screen;
this.date=date;
}
//函数自执行
var Fatory=(function(){
var iphones={};
return {
get:function(model,screen,date){
var key=model+screen+date;
if(!iphones[key]){
iphones[key]=new Iphone(model,screen,date);
}
return iphones[key];
}
}
})();
function Iphones(model,screen,date,color){
this.commonn_attr=Fatory.get(model,screen,date);
this.color=color;
}
var arrIphone=[];
for(var i=0;i<10000;i++){
arrIphone.push(new Iphones("ip9","5.5","8-8","红色"));
}
console.log(arrIphone);
</script>
<script src="./a.js"></script>
</html>
