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