<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript设计模式</title>
</head>
<body>
<script type="text/javascript">
//四.装饰器设计模式
//作用： 扩展已有类的新功能，在保持原类结构不修改的前提下 扩展 类的功能
var general={// 原对象
name:'关羽',
weap:'青龙偃月刀',
skill:function(){
console.log(this.name+ " "+this.weap+" "+"挥刀斩")
}
}
var GeneralPack=function(general){//装饰器类
this.name=general.name;
this.weap=general.weap;
this.horse="赤兔马";
this.skill:function(){
console.log(this.name+ " "+this.weap+" "+this.horse+"挥刀斩")
}
}
general.skill(); //关羽 青龙偃月刀 挥刀斩
var general_2=new GeneralPack(general);
general_2.skill();//关羽 青龙偃月刀 赤兔马 挥刀斩
</script>
<script type="text/javascript">
//五、适配器设计模式
//适配器模式 为两个互不兼容的系统提供可以调用的接口
//1.已有 用于数组排序的对象
var sort={
type:"DESC",
data:[],
run:function(){
if(this.type==="DESC"){
return this.data.sort(function(){return a<b})
}
if(this.type==="ASC"){
return this.data.sort(function(){return a>b})
}
}
}
//使用
sort.type="ASC";
sort.data=[2,3,1,2,5,4,8];
console.log(sort.run());//[1,2,2,3,4,5,8]
//2.要求对 "D 1,3,2,5,4,8" "A 3,1,5,2,9" 排序
var d1="D 1,3,2,5,4,8";
var d2="A 3,1,5,2,9"
var sortAdapt = {// sort对象的适配器，属性和方法与sort基本保持一致
data:'',
run:function(){
let arr=this.data.split(' ');
let type=arr[0];
sort.type=type ==='D'? "DESC":"ASC";
sort.data=arr[1].split(',')
return sort.run()
}
}
sortAdapt.data=d2;
console.log(sortAdapt.run());//["1", "2", "3", "5", "9"]
</script>
<script type="text/javascript">
//六、外观模式（门面模式）：核心 -组合与包装；将复杂的子系统进行组合，对外提供唯一的访问接口，隐藏内部的复杂结构
var register={
wait:function(){
console.log("排队等待取号")
},
regist:function(){
console.log('拿到挂号')
}
}
var doctor={
diagnose:function(){
console.log('进行问诊')
},
watchCheck:function(check){
console.log('查看检查结果： '+check)
},
medication:function(){
console.log('开药方');
return '药方W'
}
}
var check={
makeCheck:function(){
console.log('做检查');
return '检查结果'
}
}
var medication={
cost:function(medication){
console.log('付费： '+medication)
},
take:function(){
console.log('取药回家')
}
}
//完成这个看病流程，开发者需要调用多个对象的方法,并且需要进行参数的来回传递
register.wait();//排队等待取号
register.regist();//拿到挂号
doctor.diagnose();//进行问诊
var res=check.makeCheck();//做检查
doctor.watchCheck();//检查结果
var me=doctor.medication();//开药方
medication.cost(me);//付费：药方W
medication.take();//取药
//使用外观设计模式来简化
var hospital={
watch:function(){
register.wait();//排队等待取号
register.regist();//拿到挂号
doctor.diagnose();//进行问诊
var res=check.makeCheck();//做检查
doctor.watchCheck();//检查结果
var me=doctor.medication();//开药方
medication.cost(me);//付费：药方W
medication.take();//取药
}
}
hospital.watch();
</script>
<script type="text/javascript">
//享元设计模式：对系统进行优化的设计模式，对于存在大量对象的系统，使用享元模式可以 显著减轻 内存负担
//享元模式的核心：将对象通用且静态的部分与独立且动态的部分进行分离，使其内部状态和外部状态隔离开，将内部状态进行共享复用
function Book(sn,name,content,author,reader,initTime,expriseTime){
this.sn=sn;
this.name=name;
this.content=content;
this.author=author;
this.reader=reader;
this.initTime=initTime;
this.expriseTime=expriseTime;
this.show=function(){
console.log(this.sn,this.name,this.content,this.author,this.reader,this.initTime,this.expriseTime)
}
}
var book = new Book(10011,'道德经','道经德经共81篇','老子','Owen','2020.03.03','2020.07.07')
book.show();//10011 '道德经' '道经德经共81篇' '老子' 'Owen' '2020.03.03' '2020.07.07'
// 下面使用 享元模式
function Book_in(sn,name,content,author){//将通用属性提取成 享元，在系统中录入图书信息时，会优先从共享池中取数据
this.sn=sn;
this.name=name;
this.content=content;
this.author=author;
}
var bookPool=new Set();
function Book(sn,name,content,author,reader,initTime,expriseTime){
for(var b of bookPool){
if(b.sn===sn){
this.in=b;
}
}
if(this.in===undefined){//如果没有 则进行 享元的创建
this.in=new Book_In(sn,name,content,author);
bookPool.add(this.in)
}
this.reader=reader;
this.initTime=initTime;
this.expriseTime=expriseTime;
}
Book.prototype={
show:function(){
console.log(this.in.sn,this.in.name,this.in.content,this.in.author,this.reader,this.initTime,this.expriseTime)
}
}
var book = new Book(10011,'道德经','道经德经共81篇','老子','Owen','2020.03.03','2020.07.07')
book.show();//10011 '道德经' '道经德经共81篇' '老子' 'Owen' '2020.03.03' '2020.07.07'
var book2 = new Book(10011,'道德经','道经德经共81篇','老子','Owen','2020.03.03','2020.07.07')
book2.show();//10011 '道德经' '道经德经共81篇' '老子' 'Owen' '2020.03.03' '2020.07.07'
console.log(book.in===book2.in);//true --内部状态进行共享复用
</script>
</body>
</html>