JavaScript设计模式1--工厂模式、单例设计模式、建造者设计模式

wenmin1987

已于 2023-02-21 21:24:36 修改

阅读量220

点赞数

分类专栏： JavaScript设计模式文章标签：设计模式工厂模式单例设计模式建造者设计模式

于 2020-06-14 22:32:46 首次发布

本文链接：https://blog.csdn.net/wenmin1987/article/details/106752968

版权

JavaScript设计模式专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、什么是设计模式？

设计模式是一套反复使用的并且经过分类编目的代码设计经验总结。

2、设计模式有哪些？

GOF提出的23种设计模式，分为三大类。

创建型模式，共5种，分别是工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

结构型模式，共7种，分别是适配器模式、装饰器模式、代理模式、外观模式桥接模式、组合模式、享元模式。

行为型模式，共11种，分别是策略模式、模板方法模式、观察者模式、选代子模式、責任链模式、命令模式、备忘录模弌、状态模式、访问者模式、中介者模式、解释器模式。

在前端开发中，有些特定的模式不太适用。当然，有些适用于前端的模式并未包含在这23种设计模式中，如委托模式、节流模式等

-------工厂模式：------

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