Learning JavaScript Design Patterns P.2 (ok)

https://addyosmani.com/resources/essentialjsdesignpatterns/book/#introduction

Mediator Pattern

A Simple Mediator

Mediator là một đối tượng điều phối các tương tác (logic và hành vi) giữa nhiều đối tượng. Nó đưa ra quyết định về thời điểm gọi đối tượng nào, dựa trên hành động (hoặc không hành động) của các đối tượng khác và đầu vào.

Bạn có thể viết người dàn xếp bằng một dòng mã:

var mediator = {};

Vâng, tất nhiên đây chỉ là một đối tượng theo nghĩa đen trong JavaScript. Một lần nữa, chúng ta đang nói về ngữ nghĩa ở đây. Mục đích của trình dàn xếp là kiểm soát quy trình làm việc giữa các đối tượng và chúng tôi thực sự không cần bất cứ thứ gì khác ngoài một đối tượng theo nghĩa đen để thực hiện điều này.

var orgChart = {
  addNewEmployee: function(){
    // getEmployeeDetail provides a view that users interact with
    var employeeDetail = this.getEmployeeDetail();
    // when the employee detail is complete, the mediator (the 'orgchart' object)
    // decides what should happen next
    employeeDetail.on("complete", function(employee){
      // set up additional objects that have additional events, which are used
      // by the mediator to do additional things
      var managerSelector = this.selectManager(employee);
      managerSelector.on("save", function(employee){
        employee.save();
      });
    });
  },
  // ...
}

Event Aggregator (Pub/Sub) And Mediator Together

Prototype Pattern

Đối với những người quan tâm, kế thừa nguyên mẫu thực sự, như được định nghĩa trong tiêu chuẩn ECMAScript 5, yêu cầu sử dụng Object.create (mà chúng ta đã xem xét trước đó trong phần này). Để nhắc nhở chúng ta, Object.create tạo một đối tượng có một nguyên mẫu được chỉ định và tùy chọn cũng chứa các thuộc tính được chỉ định (ví dụ: Object.create (nguyên mẫu, tùy chọnDescriptorObjects)).

Object.create cũng cho phép chúng ta dễ dàng triển khai các khái niệm nâng cao như kế thừa vi phân trong đó các đối tượng có thể kế thừa trực tiếp từ các đối tượng khác. Chúng ta đã thấy trước đó rằng Object.create cho phép chúng ta khởi tạo các thuộc tính đối tượng bằng cách sử dụng đối số được cung cấp thứ hai. Ví dụ:

C:\Users\Administrator\Desktop\gulp\es6.js

Ở đây, các thuộc tính có thể được khởi tạo trên đối số thứ hai của Object.create bằng cách sử dụng một đối tượng theo nghĩa đen có cú pháp tương tự như cú pháp được sử dụng bởi các phương thức Object.defineProperties và Object.defineProperty mà chúng ta đã xem xét trước đó.

Cần lưu ý rằng các mối quan hệ nguyên mẫu có thể gây ra rắc rối khi liệt kê các thuộc tính của các đối tượng và (như Crockford khuyến nghị) gói nội dung của vòng lặp trong một kiểm tra hasOwnProperty ().

Nếu chúng ta muốn triển khai mẫu nguyên mẫu mà không trực tiếp sử dụng Object.create, chúng ta có thể mô phỏng mẫu theo ví dụ trên như sau:

Cách triển khai thay thế cuối cùng của mẫu Nguyên mẫu có thể như sau:

Command Pattern

Để minh họa Command pattern, chúng ta sẽ tạo một dịch vụ mua xe đơn giản.

Facade Pattern

Factory Pattern

Approach #1: Modify a VehicleFactory instance to use the Truck class

Approach #2: Subclass VehicleFactory to create a factory class that builds Trucks

Abstract Factories

Cũng hữu ích khi nhận thức được mô hình Nhà máy trừu tượng, nhằm mục đích gói gọn một nhóm các nhà máy riêng lẻ với một mục tiêu chung. Nó tách các chi tiết của việc triển khai một tập hợp các đối tượng khỏi cách sử dụng chung của chúng.

Một nhà máy trừu tượng nên được sử dụng khi một hệ thống phải độc lập với cách tạo ra các đối tượng mà nó tạo ra hoặc nó cần phải làm việc với nhiều loại đối tượng.

Một ví dụ vừa đơn giản vừa dễ hiểu hơn là nhà máy sản xuất xe, nơi xác định các cách lấy hoặc đăng ký các loại xe. Nhà máy trừu tượng có thể được đặt tên là abstractVehicleFactory. Nhà máy Abstract sẽ cho phép định nghĩa các loại phương tiện như "ô tô" hoặc "xe tải" và các nhà máy bê tông sẽ chỉ triển khai các lớp đáp ứng hợp đồng xe (ví dụ: Vehicle.prototype.drive và Vehicle.prototype.breakDown).

Mixin Pattern

Trong các ngôn ngữ lập trình truyền thống như C ++ và Lisp, Mixins là các lớp cung cấp chức năng có thể dễ dàng được kế thừa bởi một lớp con hoặc một nhóm lớp con nhằm mục đích tái sử dụng hàm.

Sub-classing

Mixins

Sau đó, chúng ta có thể dễ dàng mở rộng nguyên mẫu của các hàm khởi tạo hiện có để bao gồm hành vi này bằng cách sử dụng một trình trợ giúp như phương thức Underscore.js _.extend ():

C:\Users\Administrator\Desktop\gulp\index.html

C:\Users\Administrator\Desktop\gulp\es6.js

Thay vào đó, ví dụ này sẽ chứng minh cách tăng cường một hàm tạo để bao gồm chức năng mà không cần phải sao chép quy trình này cho mọi hàm tạo mà chúng ta có thể có.

Decorator Pattern

Example 1: Decorating Constructors With New Functionality

Example 2: Decorating Objects With Multiple Decorators

Pseudo-classical Decorators

Interfaces

Abstract Decorators

Đây là giao diện chúng tôi sẽ xác định cho Macbook:

Để giúp chúng tôi dễ dàng thêm nhiều tùy chọn hơn nếu cần sau này, một lớp Abstract Decorator được định nghĩa với các phương thức mặc định được yêu cầu để triển khai giao diện Macbook, mà phần còn lại của các tùy chọn sẽ phân loại. Trình trang trí trừu tượng đảm bảo rằng chúng ta có thể trang trí một lớp cơ sở một cách độc lập với bao nhiêu trình trang trí cần thiết trong các kết hợp khác nhau (hãy nhớ ví dụ trước đó chứ?) Mà không cần dẫn xuất một lớp cho mọi kết hợp có thể có.

Điều đang xảy ra trong ví dụ trên là Macbook Decorator chấp nhận một đối tượng (Macbook) để sử dụng làm thành phần cơ sở của chúng ta. Nó sử dụng giao diện Macbook mà chúng tôi đã xác định trước đó và đối với mỗi phương thức chỉ gọi cùng một phương thức trên thành phần. Bây giờ chúng ta có thể tạo các lớp tùy chọn của mình cho những gì có thể được thêm vào, chỉ bằng cách sử dụng Macbook Decorator.

Những gì chúng tôi đang làm ở đây là ghi đè các phương thức addCase () và getPrice () cần được trang trí và chúng tôi đạt được điều này bằng cách đầu tiên gọi các phương thức này trên macbook gốc và sau đó chỉ cần thêm một chuỗi hoặc giá trị số (ví dụ: 45,00) phù hợp với họ.

Vì đã có khá nhiều thông tin được trình bày trong phần này cho đến nay, chúng ta hãy cố gắng tập hợp tất cả lại trong một ví dụ duy nhất hy vọng sẽ làm nổi bật những gì chúng ta đã học được.

Decorators With jQuery

Last updated