Mẫu thiết kế Javascript

Mẫu đơn | Hoa Văn Nhà Máy | Mô hình xây dựng

chủ đề

• Mẫu đơn
• Mô hình nhà máy
• Mẫu nhà máy vs Mẫu xây dựng

• Mẫu thiết kế Singleton hiển thị một phiên bản duy nhất có thể được sử dụng bởi nhiều thành phần
• Singleton Pattern có thể được coi là cơ sở của các thư viện quản lý trạng thái toàn cầu như Redux hay React Context .
• Đó là một mẫu hạn chế lớp chỉ tạo một thể hiện.
• Chúng có thể được truy cập trên toàn cầu và hoạt động như một điểm truy cập duy nhất để truy cập trạng thái toàn cầu.

let instance;
let globalState = {
  color: ""
};

class StateUtility {
  constructor() {
    if (instance) {
      throw new Error("New instance cannot be created!!");
    }
    instance = this;
  }
  getPropertyByName(propertyName) {
    return globalState[propertyName];
  }
  setPropertyValue(propertyName, propertyValue) {
    globalState[propertyName] = propertyValue;
  }
}
let stateUtilityInstance = Object.freeze(new StateUtility());
export default stateUtilityInstance;

• Cuối cùng, chúng ta tạo thể hiện của lớp như sau: let stateUtilityInstance = Object.freeze(new StateUtility());.
• Chúng tôi đã sử dụng Object.freezeđể không có lớp/thành phần/mô-đun nào khác có thể sửa đổi tệp stateUtilityInstance.

• Nhà máy là một đối tượng hoặc lớp hoặc một chức năng trong mô hình lập trình chức năng để tạo đối tượng.
• Factory Method tạo các đối tượng mới theo hướng dẫn của khách hàng. Một cách để tạo các đối tượng trong JavaScript là gọi một hàm tạo với toán tử new
• Mẫu thiết kế xuất xưởng được sử dụng khi chúng ta có một siêu lớp với nhiều lớp con và dựa trên đầu vào, chúng ta cần trả về một trong các lớp con . Mẫu này đảm nhận trách nhiệm khởi tạo một lớp từ chương trình máy khách sang lớp xuất xưởng.
• Các lớp ủy thác trách nhiệm cho một trong số các lớp con của trình trợ giúp và bạn muốn khoanh vùng kiến ​​thức về lớp con của trình trợ giúp nào được ủy quyền
• Phương thức xuất xưởng thường được sử dụng trong các ứng dụng quản lý, bảo trì hoặc thao tác với các tập hợp đối tượng khác nhau nhưng đồng thời có nhiều đặc điểm chung (tức là các phương thức và thuộc tính) .
• Mẫu xuất xưởng có thể sử dụng hàm tạo hoặc lớp bên trong. Nhưng mẫu xuất xưởng được ưu tiên hơn trong trường hợp quá trình tạo đối tượng phụ thuộc vào các yếu tố động — chẳng hạn như khi chúng ta muốn tạo động các lớp con.
• Factory cung cấp cho chúng ta một cơ chế tạo đối tượng vừa linh hoạt vừa có thể tái sử dụng.

// creates factory function
function vehicleFactory (manufacturer, plateNO) {
    return  {
        manufacturer,
        plateNO,
        startEngine () {
            console.log("reving engine")
        },
        drive () {
            console.log("driving car...")
        }
    }
}
 
const Vehicle1 = vehicleFactory("Toyota", 12345);
console.log(Vehicle1) 
// prints 
//{
//  manufacturer: 'Toyota',
//  plateNO: 12345,
//  startEngine: [Function: startEngine],
//  drive: [Function: drive]
//}
  
const Vehicle2 = vehicleFactory("Ford", 13345);
console.log(Vehicle2) 
// prints 
// {
//  manufacturer: 'Ford',
//  plateNO: 13345,
//  startEngine: [Function: startEngine],
//  drive: [Function: drive]
// }

• Mẫu nhà máy thúc đẩy khả năng sử dụng lại mã bằng cách sử dụng lại các phương thức StartEngine, driveVehiclevà stopEngine.

class Car {
    constructor(options) {
        this.wheels = options.wheels || 4;
        this.doors = options.doors || 4;
        this.color = options.color || "silver"; 
    }
}

class Truck {
    constructor(options) {
        this.wheels = options.wheels || 6;
        this.doors = options.doors || 2;
        this.color = options.color || "red"; 
    }
}


class Factory {

    create = (options, vehicleType) => {

        if(!vehicleType) {
            return "unable to make vehicle. Please specify a vehicle type and tryagain!"
        }

        let vehicle;
        
        if (vehicleType === "car") {
            vehicle = new Car(options);
        } else if (vehicleType === "truck") {
            vehicle = new Truck(options);
        } 

  
        vehicle.vehicleType = vehicleType;

        vehicle.startEngine = ()=> console.log(`Reving ${vehicleType} engine`);

        vehicle.driveVehicle = ()=> console.log(`Driving ${vehicleType}...`);

        vehicle.stopEngine = ()=> console.log(`Stop ${vehicleType} engine`);

        return vehicle;
    }
 
};

const vehicleFactory = new Factory();

const car = vehicleFactory.create({
    wheels: 4,
    doors: 2,
    color: "black",
}, "car");

console.log(car)
console.log(car.startEngine())
console.log(car.driveVehicle())

// prints:
//Car {
//  wheels: 4,
//  doors: 4,
//  color: 'silver',
//  vehicleType: 'car',
//  startEngine: [Function],
//  driveVehicle: [Function],
//  stopEngine: [Function]
//}

// Reving car engine
// Driving car...

const truck = vehicleFactory.create({
    wheels: 4,
 doors: 2,
 color: "yellow",
}, "truck")

console.log(truck)
console.log(truck.startEngine())
console.log(truck.stopEngine())
// prints
//Truck {
//  wheels: 4,
//  doors: 2,
//  color: 'yellow',
//  vehicleType: 'truck',
//  startEngine: [Function],
//  driveVehicle: [Function],
//  stopEngine: [Function]
//}

// Reving truck engine
// Stop truck engine

class Car {
    constructor(options) {
        this.wheels = options.wheels || 4;
        this.doors = options.doors || 4;
        this.color = options.color || "silver"; 
    }
}

class Truck {
    constructor(options) {
        this.wheels = options.wheels || 6;
        this.doors = options.doors || 2;
        this.color = options.color || "red"; 
    }
}

class Bus {
    constructor(options) {
        this.wheels = options.wheels || 4;
        this.doors = options.doors || 4;
        this.color = options.color || "white"; 
    }
}

class Motorcycle {
    constructor(options) {
        this.wheels = options.wheels || 2;
        this.doors = options.doors || 0;
        this.color = options.color || "Black"; 
    }
}


class Factory {

    create = (options, vehicleType) => {

        if(!vehicleType) {
            return "unable to make vehicle. Please specify a vehicle type and tryagain!"
        }

        let vehicle;
        
        if (vehicleType === "car") {
            vehicle = new Car(options);
        } else if (vehicleType === "truck") {
            vehicle = new Truck(options);
        } else if (vehicleType === "bus") {
            vehicle = new Bus(options);
        } else if (vehicleType === "motorcycle") {
            vehicle = new Motocycle(options);
        }

  
        vehicle.vehicleType = vehicleType;

        vehicle.startEngine = ()=> console.log(`Reving ${vehicleType} engine`);

        vehicle.driveVehicle = ()=> console.log(`Driving ${vehicleType}...`);

        vehicle.stopEngine = ()=> console.log(`Stop ${vehicleType} engine`);

        return vehicle;
    }
 
};

const vehicleFactory = new Factory();

const bus = vehicleFactory.create({
    wheels: 4,
    doors: 4,
    color: "yellow",
}, "bus");

console.log(bus)
console.log(bus.startEngine())
console.log(bus.driveVehicle())

// prints:
// Bus {
//  wheels: 4,
//  doors: 4,
//  color: 'yellow',
//  vehicleType: 'bus',
//  startEngine: [Function],
//  driveVehicle: [Function],
//  stopEngine: [Function]
//}

// Reving bus engine
// Driving bus...

const bike = vehicleFactory.create({
    wheels: 2,
 doors: 0,
 color: "red",
}, "motorcycle")

console.log(bike)
console.log(bike.startEngine())
console.log(bike.stopEngine())
// prints
// Motorcycle {
//  wheels: 2,
//  doors: 0,
//  color: 'red',
//  vehicleType: 'bike',
//  startEngine: [Function],
//  driveVehicle: [Function],
//  stopEngine: [Function]
//}

// Reving motorcycle engine
// Stop motorcycle engine

var Factory = function () {
    this.createEmployee = function (type) {
        var employee;

        if (type === "fulltime") {
            employee = new FullTime();
        } else if (type === "parttime") {
            employee = new PartTime();
        } else if (type === "temporary") {
            employee = new Temporary();
        } else if (type === "contractor") {
            employee = new Contractor();
        }

        employee.type = type;

        employee.say = function () {
            console.log(this.type + ": rate " + this.hourly + "/hour");
        }

        return employee;
    }
}

var FullTime = function () {
    this.hourly = "$12";
};

var PartTime = function () {
    this.hourly = "$11";
};

var Temporary = function () {
    this.hourly = "$10";
};

var Contractor = function () {
    this.hourly = "$15";
};

function run() {

    var employees = [];
    var factory = new Factory();

    employees.push(factory.createEmployee("fulltime"));
    employees.push(factory.createEmployee("parttime"));
    employees.push(factory.createEmployee("temporary"));
    employees.push(factory.createEmployee("contractor"));

    for (var i = 0, len = employees.length; i < len; i++) {
        employees[i].say();
    }
}

• Mẫu hàm tạo và mẫu nhà máy tương tự nhau vì chúng là các mẫu tạo đối tượng trả về một đối tượng mới
• Phương thức xuất xưởng có thể trả về một đối tượng đã được tạo , không giống như hàm tạo luôn tạo một thể hiện mới.
• Các phương thức xuất xưởng thúc đẩy ý tưởng viết mã bằng cách sử dụng Giao diện, sau đó triển khai, điều này dẫn đến mã linh hoạt hơn, nhưng hàm tạo liên kết mã của bạn với một triển khai cụ thể.
• Lý do sử dụng hàm tạo: Chúng ta sử dụng hàm tạo để khởi tạo đối tượng với trạng thái mặc định hoặc trạng thái ban đầu . Các giá trị mặc định cho nguyên thủy có thể không phải là những gì bạn đang tìm kiếm. Một lý do khác để sử dụng hàm tạo là nó thông báo về các phụ thuộc.
• Lý do sử dụng Factory: Factory Method Pattern cho phép các lớp con chọn loại đối tượng để tạo . Nó thúc đẩy liên kết lỏng lẻo bằng cách loại bỏ nhu cầu liên kết các lớp dành riêng cho ứng dụng vào mã.

const vehicleOptions = {type: "cars", color: "white", doors: 4, wheels: 4}

// factory pattern
function Factory(options) {
  let factory = {};
  factory.type = options.type;
  factory.color = options.color;
  factory.wheels = options.wheels;
  factory.doors = options.doors;
  
  return factory;
}

const vehicle = Factory(vehicleOptions);

// constructor pattern
function ConstructorPattern(options) {
  this.type = options.type;
  this.color = options.color
  this.doors = options.doors;
  this.wheels = options.wheels;
}

const vehicle2 = new ConstructorPattern(vehicleOptions);

console.log("factory car", vehicle)
// prints { type: 'cars', color: 'white', wheels: 4, doors: 4 }

console.log("constructor car", vehicle2)
// prints { type: 'cars', color: 'white', wheels: 4, doors: 4 }

• Khi thiết lập đối tượng hoặc thành phần của chúng tôi liên quan đến mức độ phức tạp cao.
• Khi chúng ta cần dễ dàng tạo các thể hiện khác nhau của các đối tượng tùy thuộc vào môi trường chúng ta đang ở.
• Khi chúng ta đang làm việc với nhiều đối tượng hoặc thành phần nhỏ có chung thuộc tính.
• Khi kết hợp các đối tượng với các phiên bản của các đối tượng khác chỉ cần đáp ứng hợp đồng API (hay còn gọi là gõ vịt) để hoạt động. Điều này rất hữu ích cho việc tách rời.

• Hãy vỗ tay cho câu chuyện và theo dõi tôi
• Xem thêm nội dung về Phỏng vấn viết mã và thiết kế hệ thống
• Theo dõi tôi: LinkedIn !

Tham gia nhóm tài năng Thăng cấp và tìm một công việc tuyệt vời