<!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>