<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript設計模式3</title>
</head>
<body>
<script type="text/javascript">
//八、代理設計模式：十分實用的模式 買家和賣家之間的 物流 可以理解爲一個代理
//
var me={//買家
shop:undefined,
buy:function(){
console.log("網購"+this.shop.delever());
}
}
var computerShop = {//賣家，computerShop不會自己去實現delever方法，交由代理對象（logistics）實現
//這樣代理對象和賣家進行解耦，並且買家賣家代理三方都可以靈活組合，例如，買家可以選擇其他的網店對象，只要其有delever方法
//同樣，網店也可以靈活的搭配物流商，由具體的代理對象來完成送貨功能
delegate:undefined,
delever:function(){
return this.delegate.delever()
}
}
var logistics={//物流 （代理）
delever:function(){
return "德邦物流正在送貨"
}
}
me.shop=computerShop; //買家可以任選 賣家，這裏指定的是computerShop
computerShop.delegate=logistics; //給物流代理實現 送貨的方法 delever（）
me.buy();//網購 德邦物流正在送貨
</script>
<script type="text/javascript">
//九、責任鏈設計模式：用來 連接處理任務的一連串節點，
//使用責任鏈設計模式可以將複雜的處理過程拆分成多個負責方，並且靈活替換和修改
//開發一處房產，可能需要多個政府部門的批准與檢查，每個部門對自己所管轄的範圍負責
//舉例：實現校驗網址功能
var typeCheck = {//第一個節點，用來校驗傳入的數據是否爲字符串類型
nextHandler:undefined,
handle:function(obj){
if(typeof obj!=="string"){
console.log('必須爲字符串');
return false
}
if(this.nextHandler!==undefined){
this.nextHandler.handle(obj)
}else{
console.log('校驗成功');
return true
}
}
}
var emptyCheck = {//第二個節點，校驗字符串是否爲空字符串
nextHandler:undefined,
handle:function(obj){
if(obj.length===0){
console.log('字符串不能爲空');
return false
}
if(this.nextHandler!==undefined){
this.nextHandler.handle(obj)
}else{
console.log('校驗成功');
return true
}
}
}
var vaildCheck = {//第三個節點用來進行網址的正則匹配
nextHandler:undefined,
handle:function(obj){
if(!/^(www\.).+(\.com)$/.test(obj)){
console.log('字符串不合規');
return false
}
if(this.nextHandler!==undefined){
this.nextHandler.handle(obj)
}else{
console.log('校驗成功');
return true
}
}
}
//鏈中使用了3個節點來進行校驗，鏈中任何一個節點失敗都會中斷後面的校驗
typeCheck.nextHandler=emptyCheck;
emptyCheck.nextHandler=vaildCheck;
typeCheck.handle('www.ws.com');
//這種責任鏈十分容易擴展，如果需要將校驗規則改成郵箱，只需要在vaildCheck後面再添加一個郵箱校驗的節點即可
</script>
<script type="text/javascript">
//十、命令設計模式：常常用來 進行復雜功能實現與使用的解耦
//核心：將功能的調用封裝成命令，對使用方來說，只需提供正確的命令和參數即可
//應用廣泛，如在使用ajax進行網絡請求時，許多第三方的封裝都會採用命令模式進行請求配置
var Calc = {
perporm:function(p){//調用命令對象的方法
this.run(p.type,p.params)
},
run:function(command,params){
this[command](...params);
},
add:function(a,b){
console.log('a+b=',a+b)
},
sub:function(a,b){
console.log('a-b=',a-b)
},
mul:function(a,b){
console.log('a*b=',a*b)
},
div:function(a,b){
console.log('a/b=',a/b)
},
}
//創建命令對象，type指定四則運算的類型，params參數用來設計運算的數值
var p={
type:'add',
params:[10,5]
}
var p1={
type:'sub',
params:[10,5]
}
var p2={
type:'mul',
params:[10,5]
}
var p3={
type:'div',
params:[10,5]
}
// 使用命令對象
Calc.perporm(p);
Calc.perporm(p1);
Calc.perporm(p2);
Calc.perporm(p3)
</script>
</body>
</html>