前端常见的设计模式（TS和JS实现）——工厂模式

目录

 

TS实现

JS实现

---

TS实现

// 定义接口
interface Vehicle{
  move():void
}

// 汽车类
class Car implements Vehicle{
  public move():void{
    console.log("The car is moving!")
  }
}

// 自行车类
class Bicycle implements Vehicle{
  public move():void{
    console.log('The bicycle is moving!')
  }
}

// 飞机类
class Plane implements Vehicle{
  public move():void{
    console.log('The plane is flying!')
  }
}

//抽象交通工具工厂类
abstract class VehicleFactory{

  // 创建交通工具
  public abstract createVehicle():Vehicle

  public moveVehicle():void{
    const myVehicle = this.createVehicle()//实现类调用moveVehicle时就会创建对应交通工具的实现类
    myVehicle.move()
  }

}

// 汽车工厂类
class CarFactory extends VehicleFactory{

  public createVehicle():Vehicle{
    return new Car()
  }
}

// 自行车工厂类
class BicycleFactory extends VehicleFactory{

  public createVehicle():Vehicle{
    return new Bicycle()
  }
}

// 飞机工厂类
class PlaneFactory extends VehicleFactory{

  public createVehicle():Vehicle{
    return new Plane()
  }
}

// 测试代码
const plane = new PlaneFactory()
const car = new CarFactory()

planes.moveVehicle()
cars.moveVehicle()

//运行结果
The plane is flying!
The car is moving!

JS实现

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
// 汽车类
var Car = /** @class */ (function () {
    function Car() {
    }
    Car.prototype.move = function () {
        console.log("The car is moving!");
    };
    return Car;
}());
// 自行车类
var Bicycle = /** @class */ (function () {
    function Bicycle() {
    }
    Bicycle.prototype.move = function () {
        console.log('The bicycle is moving!');
    };
    return Bicycle;
}());
// 飞机类
var Plane = /** @class */ (function () {
    function Plane() {
    }
    Plane.prototype.move = function () {
        console.log('The plane is flying!');
    };
    return Plane;
}());
// VehicleHandler是抽象的，因为没有人会实例化它
// 我们要扩展它并实现抽象方法
var VehicleHandler = /** @class */ (function () {
    function VehicleHandler() {
    }
    VehicleHandler.prototype.moveVehicle = function () {
        var myVehicle = this.createVehicle();
        myVehicle.move();
    };
    return VehicleHandler;
}());
var CarHandler = /** @class */ (function (_super) {
    __extends(CarHandler, _super);
    function CarHandler() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CarHandler.prototype.createVehicle = function () {
        return new Car();
    };
    return CarHandler;
}(VehicleHandler));
var BicycleHandler = /** @class */ (function (_super) {
    __extends(BicycleHandler, _super);
    function BicycleHandler() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    BicycleHandler.prototype.createVehicle = function () {
        return new Bicycle();
    };
    return BicycleHandler;
}(VehicleHandler));
var PlaneHandler = /** @class */ (function (_super) {
    __extends(PlaneHandler, _super);
    function PlaneHandler() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PlaneHandler.prototype.createVehicle = function () {
        return new Plane();
    };
    return PlaneHandler;
}(VehicleHandler));
var planes = new PlaneHandler();
var cars = new CarHandler();
planes.moveVehicle();
cars.moveVehicle();