JS设计模式-构造器模式,工厂模式,单例模式

设计模式核心思想:封装变化。

找到程序中的变和不变,然后将变和不变的代码分离开来, 达到变化的部分更加灵活,不变的那就更加稳定。

1,能用健壮的代码去解决具体的问题。

2,能用抽象的思维去应对复杂的系统。

3,能用工程化思维去规划更大规模的业务。

一,构造器模式

ini 复制代码
// 构造器模式        
            function User(name, age, career) {            
                        this.name = name;            
                        this.age = age;            
                        this.career = caches;        
                   }        
            const user = new User(name, age, career)

未使用工厂模式时可能随着业务的增加,会写出屎山一样的代码如下

kotlin 复制代码
                function Boss(name, age) {            
                            this.name = name;        
                            this.age = age;            
                            this.career = "老板";            
                            this.work = ["喝茶", "看报"]        
                        }        
                function Worker(name, age) {            
                             this.name = name;            
                             this.age = age;            
                             this.career = "员工";           
                             this.work = ["干活", "开会"]        
                         }        
                function Factory(name, age, career) {            
                             switch(career){                
                                    case "老板":                    
                                 return new Boss(name,age)                    
                                 break                
                                    case "员工":                    
                                 return new Worker(name, age)                    
                                 break                    
                                    // ...            
                                }        
                          }

二,工厂模式

2.1 简单工厂模式

ini 复制代码
// 简单工厂模式        
              function User1(name, age, career, work) {            
                           this.name = name;            
                           this.age = age;            
                           this.career = career;            
                           this.work = work;        
                       }        
             function Factory(name, age, career) {            
                        let work;            
                        switch(career) {                
                             case "老板":                    
                                  work = ["喝茶", "看报"];                    
                             break;                
                             case "员工":                   
                                  work = ["干活", "开会"];                    
                             break;                
                            // ...            
                        }            
                   return new User1(name, age, career, work);        
                 }

2.2 抽象工厂模式

抽象工厂不可否认它在强类型语言中非常有用, 比如在Java和C++中就经常使用。因为这些语言在创建对象时,需要时刻关注类型之间的解耦, 以便该对象日后可以表现多态性。但JavaScript是弱类型语言,就是说自带多态, 所以开发中我们不考虑这部分的解耦。

开放封闭原则基本思想是一个类只应该对外暴露它所需要的接口,而不应该暴露其内部的实现细节。

scala 复制代码
// 抽象工厂模式        
                class ETFactory{            
                     // 场地门市接口            
                     createStore() {                
                     throw new Error("抽象方法,不允许直接调用,需要重写")            
                      }            
                     // 服务人员接口            
                     createUser() {               
                     throw new Error("抽象方法,不允许直接调用,需要重写")            
                      }        
                  }        
// 具体工厂类(实现类)继承抽象工厂                
                 class Store{            
                      getAddress() {                
                      throw new Error("抽象方法,不允许直接调用,需要重写")            
                     }        
                  }        
                class WanDaStore extends Store{            
                     getAddress() {                
                     console.log('万达广场一楼')            
                    }        
                 }        
               class WanXiangStore extends Store{            
                    getAddress() {                
                       console.log('万象城一楼')            
                     }        
                 }        
               class Technician{            
                    getSkill() {                
                         throw new Error("抽象方法,需要重写")            
                       }        
                   }        
              class SPATechnician extends Technician{            
                      getSkill() {                
                          console.log('销售')            
                      }        
                  }        
              class SoftTechnician extends Technician{            
                      getSkill() {                
                          console.log('演讲')            
                      }        
                  }        
               class AchieveFactory extends ETFactory{            
                      createStore() {               
                            return new WanDaStore();            
                       }            
                      createUser() {                
                            return new SPATechnician();            
                       }        
                }        
              const myHongLangMan = new AchieveFactory();        
              const myStore = myHongLangMan.createStore();        
              const technician = myHongLangMan.createUser();        
              myStore.getAddress()        
              technician.getSkill()

三,单例模式

普通方法

javascript 复制代码
// 普通方法        
            class CommonDemo {            
                   show() {                
                       console.log("我是一个普通方法");            
                      }        
                 }        
            const common1 = new CommonDemo();        
            const common2 = new CommonDemo();        
            console.log(common1 === common2); // false

实现单例模式的方法:使用构造函数,静态方法,闭包。

3.1 用构造函数实现

ini 复制代码
 // 用构造函数实现单例模式        
               let singleDemo;       
               function SingleDemo() {            
                       if(!singleDemo) {                
                            singleDemo = this;            
                        }            
                   return singleDemo;       
                }        
              SingleDemo.prototype.show = function() {        
                        console.log("我是一个单例模式");       
                }        
             const single1 = new SingleDemo();    
             const single2 = new SingleDemo();      
             console.log(single1 === single2) // true

3.2 用静态方法实现

javascript 复制代码
 // 使用静态方法实现单例模式        
              class SingleDemo1 {            
                      show() {            
                         console.log("我是一个单例模式");    
                       }         
              static getInstance() {        
                       if(!SingleDemo1.instance) {           
                             SingleDemo1.instance = new SingleDemo1();        
                         }               
                     return SingleDemo1.instance;         
                   }     
                }        
              const single3 = SingleDemo1.getInstance();       
              const single4 = SingleDemo1.getInstance();       
              console.log(single3 === single4) // true

3.3 用闭包实现

静态方法存在于类中,但是不属于任何实例。直接属于类本身。 在调用静态方法时,不需要创建类的实例。直接通过类名调用。

闭包的三个基本特点:

1,闭包可以访问外部函数的变量,即时外部函数已经返回了 。

2,闭包保存外部函数变量的引用,而不是实际的值。

3,每当一个函数在另一个函数中被创建时,就会产生闭包。

ini 复制代码
// 使用闭包实现单例模式        
           class SingleDemo2 {           
                     show() {              
                          console.log("我是一个单例模式");      
                       }      
                    }        
            SingleDemo2.getInstance = (function(){           
                          let instance = null;          
                          return function() {           
                                  if(!instance){       
                                      instance = new SingleDemo2();      
                            }           
                        return instance;     
                      }     
             })();        
          const single5 = SingleDemo2.getInstance();    
          const single6 = SingleDemo2.getInstance();   
          console.log(single3 === single4) // true
相关推荐
香芋芋圆33 分钟前
iD-editor 详解|OSM官方在线编辑器,基于D3.js的轻量地图编辑器
开发语言·javascript·编辑器
晗夜未央2 小时前
任务队列反复失败,先分清重试、阻塞和结果待核对
开发语言·javascript
jktantan3 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
我命由我123454 小时前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
程序员大阳4 小时前
副队长JavaScript教程(65)-详解JSON:轻量级数据交换格式
javascript·json·序列化·反序列化·stringify·parse
raindayinrain6 小时前
c++设计模式
开发语言·c++·设计模式
paopaokaka_luck6 小时前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
工一木子6 小时前
设计模式与生活⑦:你打的车,隔着一个平台
设计模式
栀椩6 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
SEO_juper6 小时前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome