设计模式---创建形

设计模式简介

最佳的实践得来的设计经验设计模式开发过程中面临的一般问题的解决方案

相当长的一段时间的试验和错误总结出来

设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结

设计模式原则

S – Single Responsibility Principle 单一职责原则一个程序只做好一件事如果功能过于复杂就拆分开，每个部分保持独立
O – OpenClosed Principle 开放/封闭原则对扩展开放，对修改封闭增加需求时，扩展新代码，而非修改已有代码
L – Liskov Substitution Principle 里氏替换原则子类能覆盖父类父类能出现的地方子类就能出现
I – Interface Segregation Principle 接口隔离原则保持接口的单一独立类似单一职责原则，这里更关注接口
D – Dependency Inversion Principle 依赖倒转原则面向接口编程，依赖于抽象而不依赖于具体使用方只关注接口而不关注具体类的实现

创建形

单例模式

一个类只有一个实例，并提供一个访问它的全局访问点

class Axios{
    constructor(config){
        this.config = config;
    }
}
Axios.getInstance = function(config){
    if(!this.instance){
        this.instance = new Axios(config);
    }
    return this.instance;
}
let i1=Axios.getInstance({});
let i2=Axios.getInstance({});
console.log(i1==i2);

优点
1.命名空间，减少全局变量
2.增强模块性，集中变量/逻辑管理
3.且只会实例化一次。简化了代码的调试和维护

缺点
1.单点访问，导致模块间的强耦合 从而不利于单元测试。

场景例子
1.命名空间和实现分支型方法
2.登录框
3.vuex 和 redux中的store

class Axios{
    constructor(config){
        this.config = config;
    }
    static getInstance(config){
        if(!this.instance){
            this.instance = new Axios(config);
        }
        return this.instance;
    }
}

原型模式

原型模式（prototype）是指用原型实例指向创建对象的种类，并且通过拷贝这些原型创建新的对象。

原型模式，就是创建一个共享的原型，通过拷贝这个原型来创建新的类，用于创建重复的对象，带来性能上的提升

class Person {
  constructor(name) {
    this.name = name;
  }
}
class Student extends Person {
  constructor(name, grade) {
    super(name);
  }
  sayName(){
    console.log(this.name,111111111111111111);
  }
}
var s = new Student("John", 10);
s.sayName();

//继承

工厂模式

在不暴露创建对象的具体逻辑，而是将逻辑进行封装，那么它就可以被称为工厂。

优点 
1.调用者创建对象时只要知道其名称即可 扩展性高，如果要新增一个产品，直接扩展一个工厂类即可。 
2.隐藏产品的具体实现，只关心产品的接口。 
缺点 
1.每次增加一个产品时，都需要增加一个具体类，这无形增加了系统内存的压力和系统的复杂度，也增加了具体类的依赖

黑盒----------
JQuery的$()就是一个工厂函数
vue 的异步组件

class Factory {
  create(name) {
    return new Product(name);
  }
}
class Product {
  constructor(name) {
    this.name = name;
  }
  printName() {
    console.log(this.name);
  }
}
var factory = new Factory();
var product = factory.create("test");
product.printName();

-------------------------------------------------------------------------
// 抽象工厂模式    
class ProductionFlow {
  constructor() {
    if (new.target === ProductionFlow) {
      throw new Error("抽象类不能被实例");
    }
  }
  production() {
    throw new Error("production要被重写");
  }
  materials() {
    throw new Error("materials要被重写");
  }
}
class TShirt extends ProductionFlow {
  production() {
    console.log(`材料:${this.materials()},生产t恤`);
  }
  materials() {
    return "纯棉";
  }
}

function getAbstractProductionFactory(clothingType) {
  const clothingObj = {
    t_shirt: TShirt, //add more...
  };
  if (clothingObj[clothingType]) {
    return clothingObj[clothingType];
  }
  throw new Error(`工厂暂时不支持生产这个${clothingType}类型的服装`);
}
const tShirtClass = getAbstractProductionFactory("t_shirt");

const tShirt = new downTShirtClass();
tShirt.production();

建造者模式

建造者模式是一种比较复杂使用频率较低的创建型设计模式，建造者模式为客户端返回的不是一个简单的产品，而是一个由多个部件组成的复杂产品。主要用于将一个复杂对象的构建与他的表现分离，使得同样的构建过程可以创建不同的表示。

构建与他的表现分离

优点
1.建造者独立易扩展
2.方便控制细节风险
缺点
1.产品必须有共同点，范围有限制
2.当内部有变化复杂时，会有很多建造类

构建与他的表现分离

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}
class Pc extends Product {
     constructor(name, price) {
        super(name, price);
    }
}
class Mobile extends Product {
    constructor(name, price) {
       super(name, price);
   }
}
class ProductManage{
    constructor() {
        this.products = [];
    }
    addProduct(product) {
        this.products.push(product);
    }
    getSimplePrice(){
        return this.products.reduce((total, product) => total + product.price, 0);
    }
}
class FactorManger {
    createPc(){
        throw new Error("Not implemented");
    }
    createMobile(){
        throw new Error("Not implemented");
    }
}

class Worker extends FactorManger {
    constructor() {
        super();
        this.productarr = new ProductManage();
    }
    createPc(createNumProduct){
        for(let i=0;i<createNumProduct;i++){
            this.productarr.addProduct(new Pc("Pc", 1000));
        }
    }
    createMobile(createNumProduct){
        for(let i=0;i<createNumProduct;i++){
            this.productarr.addProduct(new Mobile("Mobile", 1));
        }

    }
}

class Salesman {
    constructor() {
        this.Worker=null;
    }
    setWorker(worker){
        this.Worker=worker;
    }
    orderTotalPrice(products){
        products.forEach(item => {
            if(item.name === "Pc"){
                this.Worker.createPc(item.num);
            }else if(item.name === "Mobile"){
                this.Worker.createMobile(item.num);
            }
            else{
                throw new Error("Not implemented");
            }
        });
        return this.Worker.productarr.getSimplePrice();
    }
}

const salesman = new Salesman()
const worker = new Worker()
salesman.setWorker(worker)
const order = [
  {
    name: 'Pc',
    num: 10
  },
  {
    name: 'Mobile',
    num: 4
  },
]
console.log(`本次订单所需金额：${salesman.orderTotalPrice(order)}`) //10004

posted @ 2025-03-01 12:04 KooTeam 阅读(9) 评论(0) 收藏举报

刷新页面返回顶部

KooTeam

Knowledge makes humble,ignorant makes proud!