<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>設計模式1</title>
</head>
<body>
<script type="text/javascript">
//工廠設計模式 開發中十分常用 --核心是將對象的組裝過程封裝在工廠內部，對外提供統一的調用接口
// 工廠設計模式：主要由 接口協議、實現類、 工廠函數組成
//舉例： 實現一個圖形工廠
//1.接口協議：提醒所有協議的類都必須重寫draw方法，否則拋出錯誤
var shapeInterface={
draw:function(){
throw "must be implermentation"
}
}
//2.定義實現類
function Circle(){
this.draw=function(){
console.log('Cricle')
}
}
Circle.prototype=shapeInterface;
function Rect(){
this.draw=function(){
console.log('Rect')
}
}
Rect.prototype=shapeInterface;
//3.實現圖形工廠函數
function Shape(type){
if(type==='Circle'){
return new Circle()
}else if(type==='Rect'){
return new Rect()
}
}
//4 使用（只需傳入圖形類型，調用工廠函數即可）
var shape1=Shape('Cricle')
var shape2=Shape('Rect')
shape1.draw(); //Cricle
shape2.draw();//Rect
//好處：在實際開發中，只會將shapeInterface和shape函數暴露給其他開發者，
//會將Circle和Rect作爲內部私有的類（即將對象的真實構建封裝了起來）
</script>
<script type="text/javascript">
//二、單例設計模式：開發中十分流行 （如登錄功能，用戶的管理類通常用單例模式，還有有關文件和數據的操作類）
//3條規則：單例只能有一個實例；單例必須爲其他所有調用方法提供這一實例；單例一旦創建就不會輕易銷燬
//單例模式：主要由 定義一個全局對象、定義一個單例方法、使用時判斷單例是否存在（是否需要創建）
var Singleton={//全局對象，作爲可以全局訪問單例的接口
instance:function(){//定義一個單例方法，用來獲取單例實例
if(Singleton._instance===undefined){
Singleton._instace={//使用時判斷單例是否存在（是否需要創建）
name:'呂布',
weapon:'方天畫戟',
blood:100,
skill:function(){
console.log('天地白狼擊')
}
}
}
return Singleton._instance;
}
}
var user=Singleton.instance();
console.log(user.name,user.weapon);//呂布 方天畫戟
user.skill();//天地白狼擊
user.skill=function( //覆蓋引用
console.log('迴風掃葉')
)
Singleton.instance().skill();//迴風掃葉
</script>
<script type="text/javascript">
//三、建造者設計模式
// 核心 ：使用多個簡單對象構造複雜對象 （複雜對象使用方 建造者 生產者）
//建造者將複雜對象的創建過程拆分成一個個簡單對象交給相應的生產者完成創建，最終建造者將創建出的簡單對象進行組合，以提供給複雜對象使用者使用
// 建造者設計模式：指定協議 拆分生產者 建造者進行組合
//1.協議：提供給使用者使用接口，約束建造者構建的對象
var mealInterface={
getName:function(){
throw '必須有套餐名';
},
getStaple:function(){
throw '必須有主食'
},
getDrink:function(){
throw '必須有飲料'
}
}
//2.生產者用來創建 被拆分後的具體對象
function Drink(type){//飲食
switch(type){
case 1:{
return '龍井茶'
}
break;
case 2:{
return '奶茶'
}
break;
}
}
function Staple(type){//主食
switch(type){
case 1:{
return '薯條'
}
break;
case 2:{
return '漢堡包'
}
break;
}
}
//3、以餐廳作爲建造進行套餐組合
function restaurant(type){
switch(type){
case 1:{
let food=Object.create(mealInterface);
food.getName=function(){
return '龍井薯條套餐'
}
food.getDrink=function(){
return Drink(type)
}
food.getStaple=function(){
return Staple(type)
}
return food
}
break;
case 2:{
let food=Object.create(mealInterface);
food.getName=function(){
return '奶茶漢堡套餐'
}
food.getDrink=function(){
return Drink(type)
}
food.getStaple=function(){
return Staple(type)
}
return food
}
break;
}
}
//4.使用
var f=restaurant(2);
console.log(f.getName(),f.getDrink(),f.getStaple());//'奶茶漢堡套餐' '奶茶' '漢堡包'
</script>
</body>
</html>