Thứ hai, 21/09/2020 | 00:00 GMT+7

Mẫu thiết kế nguyên mẫu trong JavaScript


Một phần của Loạt bài: Các mẫu thiết kế JavaScript

Mọi nhà phát triển đều cố gắng viết mã có thể bảo trì, đọc được và có thể tái sử dụng. Cấu trúc mã trở nên quan trọng hơn khi các ứng dụng trở nên lớn hơn. Các mẫu thiết kế tỏ ra rất quan trọng để giải quyết thách thức này - cung cấp một cấu trúc tổ chức cho các vấn đề chung trong một hoàn cảnh cụ thể.

Mẫu thiết kế bên dưới chỉ là một trong nhiều mẫu hữu ích có thể giúp bạn thăng cấp với quyền là nhà phát triển JavaScript. Để biết toàn bộ, hãy xemMẫu thiết kế JavaScript .

Bất kỳ nhà phát triển JavaScript nào cũng đã nhìn thấy nguyên mẫu từ khóa, bị nhầm lẫn bởi kế thừa nguyên mẫu hoặc đã triển khai các nguyên mẫu trong mã của họ. Mẫu thiết kế Prototype dựa trên sự kế thừa nguyên mẫu JavaScript . Mô hình nguyên mẫu được sử dụng chủ yếu để tạo các đối tượng trong các tình huống đòi hỏi hiệu suất cao.

Các đối tượng được tạo ra là các bản sao (nhân bản nông) của đối tượng ban đầu được truyền xung quanh. Một trường hợp sử dụng của mẫu nguyên mẫu là thực hiện một hoạt động database mở rộng để tạo một đối tượng được sử dụng cho các phần khác của ứng dụng. Nếu một tiến trình khác cần sử dụng đối tượng này, thay vì phải thực hiện thao tác database quan trọng này, sẽ rất thuận lợi nếu sao chép đối tượng đã tạo trước đó.

Mẫu thiết kế nguyên mẫu Mẫu thiết kế nguyên mẫu trên Wikipedia

UML này mô tả cách một giao diện nguyên mẫu được sử dụng để sao chép các triển khai cụ thể.

Để sao chép một đối tượng, một phương thức khởi tạo phải tồn tại để khởi tạo đối tượng đầu tiên. Tiếp theo, bằng cách sử dụng các biến nguyên mẫu từ khóa và các phương thức liên kết với cấu trúc của đối tượng. Hãy xem một ví dụ cơ bản:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype.go = function() {
    // Rotate wheels
}

TeslaModelS.prototype.stop = function() {
    // Apply brake pads
}

Hàm tạo cho phép tạo một đối tượng TeslaModelS duy nhất. Khi một đối tượng TeslaModelS mới tạo, nó sẽ giữ lại các trạng thái được khởi tạo trong phương thức khởi tạo. Ngoài ra, việc duy trì chức năng đidừng rất dễ dàng vì ta đã khai báo chúng bằng nguyên mẫu . Một cách đồng nghĩa để mở rộng các chức năng trên nguyên mẫu như được mô tả bên dưới:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype = {
    go: function() {
    // Rotate wheels
    },
    stop: function() {
    // Apply brake pads
    }
}

Tiết lộ mẫu nguyên mẫu

Tương tự như module module , mẫu nguyên mẫu cũng có một biến thể tiết lộ. Mẫu nguyên mẫu tiết lộ cung cấp tính năng đóng gói với các thành viên công khai và riêng tư vì nó trả về một đối tượng theo nghĩa đen.

Vì ta đang trả về một đối tượng, ta sẽ đặt tiền tố cho đối tượng nguyên mẫu bằng một hàm . Bằng cách mở rộng ví dụ của ta ở trên, ta có thể chọn những gì ta muốn hiển thị trong nguyên mẫu hiện tại để duy trì cấp độ truy cập của chúng:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype = function() {

    var go = function() {
    // Rotate wheels
    };

    var stop = function() {
    // Apply brake pads
    };

    return {
    pressBrakePedal: stop,
    pressGasPedal: go
    }

}();

Lưu ý cách các hàm dừng và đi sẽ bị che chắn khỏi đối tượng trả về do nằm ngoài phạm vi của đối tượng được trả về. Vì JavaScript tự nhiên hỗ trợ kế thừa nguyên mẫu, nên không cần phải viết lại các tính năng cơ bản.


Tags:

Các tin trước

Mẫu thiết kế module trong JavaScript 2020-09-21
Mẫu thiết kế trình quan sát trong JavaScript 2020-09-21
Mẫu thiết kế Singleton trong JavaScript 2020-09-21
Lời hứa của JavaScript dành cho người giả 2020-09-15
Sao chép các đối tượng trong JavaScript 2020-09-15
Cách sử dụng API tìm nạp JavaScript để lấy dữ liệu 2020-09-15
Cách mã hóa và giải mã chuỗi với Base64 trong JavaScript 2020-09-15
Toán tử đơn nguyên JavaScript: Đơn giản và hữu ích 2020-09-15
Hiểu Hoisting trong JavaScript 2020-09-15
5 Mẹo để Viết Điều kiện Tốt hơn trong JavaScript 2020-09-15