Các mẫu thiết kế phổ biến javascript

Design Pattern là một khái niệm được thừa nhận rộng rãi trong ngành công nghệ phần mềm về những lợi ích mà nó mang lại cho các lĩnh vực tái sử dụng mã và khả năng bảo trì. Là một nhà phát triển phần mềm, bạn có thể sẽ vấp phải thuật ngữ này tại một thời điểm. Không có gì đáng ngạc nhiên, thậm chí không biết điều đó, rất có thể bạn đã triển khai chúng ở đâu đó trong hành trình phát triển

Một mẫu thiết kế được sử dụng để xác định các giải pháp tái sử dụng có thể được áp dụng cho các sự cố lặp lại mà các nhà phát triển phần mềm thường gặp phải trong quá trình thiết kế phần mềm. Chúng đại diện cho các giải pháp đã được thử nghiệm qua thời gian và các phương pháp hay nhất được các nhà phát triển phần mềm hướng đối tượng áp dụng theo thời gian

Blog này sẽ là hướng dẫn của bạn về mọi thứ bạn cần biết về các mẫu thiết kế JavaScript phổ biến. Điều kiện tiên quyết duy nhất là bạn phải có kiến ​​thức cơ bản về JavaScript và các khái niệm Lập trình hướng đối tượng

Bắt đầu với quan điểm lịch sử, chúng tôi sẽ khám phá sâu về các mẫu thiết kế JavaScript phổ biến khác nhau từ chế độ xem hướng đối tượng. Cuối cùng, bạn sẽ quen với các mẫu thiết kế JavaScript khác nhau cùng với ý tưởng cơ bản về cách triển khai chúng

Hãy bắt đầu với hướng dẫn của chúng tôi về các mẫu thiết kế JavaScript

Lịch sử của Design Pattern

Kể từ khi ra đời, khái niệm về mẫu thiết kế đã xuất hiện trong thế giới lập trình. Nhưng nó đã không được chính thức hóa cho đến năm 1994 khi một trong những tác phẩm có ảnh hưởng nhất được xuất bản có tên là “Mẫu thiết kế. Elements Of Reusable Object-Oriented Software” – được viết bởi Erich Gamma, Richard Helm, Ralph Johnson, và John Vlissides – một nhóm được biết đến với cái tên Gang of Four (hay GoF)

Trong cuốn sách này, 23 mẫu thiết kế hướng đối tượng được giới thiệu. Kể từ đó, “cách tiếp cận theo mẫu” trở nên phổ biến trong ngành công nghệ phần mềm và sau đó, hàng chục mẫu khác đã được phát hiện

Mẫu thiết kế là gì?

Các mẫu thiết kế có thể được coi là kế hoạch chi tiết được tạo sẵn được áp dụng để giải quyết một vấn đề thiết kế cụ thể. Nó không phải là một đoạn mã hoàn chỉnh có thể được áp dụng trực tiếp vào chương trình của bạn. Nhưng đúng hơn, nó giống như một khuôn mẫu hoặc mô tả có thể cung cấp cho bạn ý tưởng về cách tiếp cận vấn đề và các giải pháp truyền cảm hứng. Do đó, mã cho hai kịch bản lập trình riêng biệt, triển khai cùng một mẫu có thể khác nhau

Bây giờ, nếu bạn đang thắc mắc làm thế nào một mẫu được phát hiện, thì thật đơn giản. Khi cùng một giải pháp được lặp đi lặp lại nhiều lần, cuối cùng ai đó sẽ nhận ra nó, đặt tên cho nó và sau đó mô tả chi tiết giải pháp đó. Đó là cách một mẫu được phát hiện. Chắc chắn, họ đã không được rèn qua đêm

Một mẫu thiết kế thường bị nhầm lẫn với các thuật toán

Cấu trúc của một Design Pattern

Như đã đề cập trong phần hướng dẫn mẫu thiết kế JavaScript ở trên, tác giả của mẫu thiết kế cung cấp tài liệu. Mặc dù không có thỏa thuận chặt chẽ giữa cộng đồng mẫu về cấu trúc mẫu tài liệu, sau đây là các phần thường có mặt

Thuật ngữ

Sự miêu tả

ý định

Mô tả chức năng của mẫu – vấn đề và giải pháp

Động lực

Giải thích thêm về vấn đề và cách mô hình giải quyết vấn đề đó

Cấu trúc

Tập hợp các biểu đồ của các lớp và đối tượng mô tả các phần của mẫu và cách chúng liên quan với nhau

Mã số

Ví dụ bằng bất kỳ ngôn ngữ phổ biến nào để hiểu rõ hơn về ý tưởng

Một số phần khác là Khả năng áp dụng, Cộng tác, Hậu quả, v.v.

Tại sao các mẫu?

Như đã đề cập trước đây, chúng tôi đã sử dụng các mẫu hàng ngày. Họ giúp chúng tôi giải quyết các vấn đề thiết kế định kỳ. Nhưng có cần thiết phải dành thời gian học chúng không?

1. Tránh phát minh lại bánh xe

Hầu hết các vấn đề thiết kế thường gặp phải đều đã có giải pháp được xác định rõ ràng có liên quan đến một mẫu. Các mẫu là giải pháp đã được chứng minh có thể tăng tốc độ phát triển

2. Bảo trì Codebase

Các mẫu giúp triển khai DRY (Không lặp lại chính mình) – khái niệm giúp ngăn cơ sở mã của bạn phát triển lớn và khó sử dụng

3. Dễ dàng tái sử dụng

Việc sử dụng lại các mẫu hỗ trợ ngăn ngừa các sự cố nhỏ có thể gây ra sự cố lớn trong quy trình phát triển ứng dụng. Điều này cũng cải thiện khả năng đọc mã cho các lập trình viên và kiến ​​trúc sư quen thuộc với các mẫu

4. Cho phép giao tiếp hiệu quả

Các mẫu thêm vào vốn từ vựng của nhà phát triển. Điều này cho phép các nhà phát triển giao tiếp bằng cách sử dụng các tên nổi tiếng, dễ hiểu cho các tương tác phần mềm, giúp giao tiếp nhanh hơn

5. Cải thiện kỹ năng hướng đối tượng của bạn

Giờ đây, ngay cả khi bạn chưa bao giờ gặp phải bất kỳ vấn đề nào trong số này, các mẫu học tập có thể cung cấp cho bạn thông tin chi tiết về các cách tiếp cận khác nhau để giải quyết vấn đề bằng cách sử dụng các nguyên tắc hướng đối tượng

Chỉ trích các mẫu

Theo thời gian, các mẫu thiết kế cũng đã nhận được nhiều lời chỉ trích. Hãy xem xét các lập luận phổ biến chống lại các mẫu

1. Tăng độ phức tạp

Việc sử dụng các mẫu không phù hợp sẽ tạo ra sự phức tạp không mong muốn. Đây là một vấn đề mà nhiều người mới gặp phải, những người cố gắng áp dụng mẫu bất cứ nơi nào họ có thể nghĩ ra, ngay cả trong những tình huống mà mã đơn giản hơn sẽ hoạt động tốt

2. Giảm mức độ liên quan

Trong “Các mẫu thiết kế trong ngôn ngữ động”, Peter Norvig chỉ ra rằng hơn một nửa số mẫu thiết kế trong cuốn sách năm 1994 (do GoF viết) là cách giải quyết cho các tính năng ngôn ngữ bị thiếu. Trong nhiều trường hợp, các mẫu chỉ trở thành bùn mang lại cho ngôn ngữ lập trình những siêu năng lực rất cần thiết mà nó thiếu sau đó.

Khi các tính năng, khung và thư viện ngôn ngữ phát triển, không có lý do gì để sử dụng một vài mẫu nữa

3. thiết kế lười biếng

Theo đề xuất của Paul Graham trong “Revenge of the Nerds” (2002), các mẫu là một dạng thiết kế lười biếng, khi nhà phát triển không tập trung vào yêu cầu của vấn đề trong tay. Thay vì tạo ra một thiết kế mới và thích hợp cho vấn đề, họ có thể chỉ sử dụng lại các mẫu thiết kế hiện có bởi vì họ nghĩ rằng họ nên

Cho đến nay, chúng ta đã biết các mẫu thiết kế là gì và cũng thảo luận về ưu điểm và nhược điểm của chúng. Bây giờ là lúc khám phá sâu về các loại mẫu thiết kế JS khác nhau có sẵn

Ghi chú. Trong các phiên sắp tới, chúng ta sẽ khám phá các triển khai JavaScript hướng đối tượng của cả các mẫu thiết kế cổ điển và hiện đại. Cần lưu ý rằng một số mẫu thiết kế cổ điển được đề cập trong sách GoF đã giảm mức độ liên quan theo thời gian. Do đó, chúng sẽ bị bỏ qua và các mẫu hiện đại từ các nguồn như Addy Osmani's Learn JavaScript Design Patterns sẽ được đưa vào

JavaScript là một trong những ngôn ngữ lập trình được yêu cầu nhiều nhất để phát triển web hiện nay. Vì chúng ta sẽ tập trung vào các mẫu thiết kế JavaScript trong bài viết này, chúng ta hãy tóm tắt nhanh các tính năng JavaScript thiết yếu sẽ giúp hiểu rõ hơn

a) Linh hoạt với các phong cách lập trình
JavaScript hỗ trợ các phong cách lập trình thủ tục, hướng đối tượng và chức năng.

b) Hỗ trợ các hàm hạng nhất
Điều này có nghĩa là các hàm có thể được truyền dưới dạng đối số cho các hàm khác giống như một biến.

c) Kế thừa dựa trên nguyên mẫu
Mặc dù JavaScript hỗ trợ các đối tượng nhưng không giống như các ngôn ngữ OOP khác, JavaScript không có khái niệm về lớp hoặc kế thừa dựa trên lớp ở dạng cơ bản. Thay vào đó, nó sử dụng thứ gọi là kế thừa dựa trên nguyên mẫu hoặc dựa trên cá thể.

Ghi chú. Trong ES6, mặc dù từ khóa “class” được giới thiệu, nhưng nó vẫn sử dụng kế thừa dựa trên nguyên mẫu trong mui xe

Để biết thêm về cách xác định “lớp” bằng JavaScript, hãy xem bài đăng hữu ích này của Stoyan Stefanov về ba cách để xác định lớp JavaScript

Danh mục Mẫu thiết kế

Dựa trên mục đích, các mẫu thiết kế JavaScript có thể được phân loại thành 3 nhóm chính

a) Mẫu thiết kế sáng tạo

Các mẫu này tập trung vào việc xử lý các cơ chế tạo đối tượng. Cách tiếp cận tạo đối tượng cơ bản trong chương trình có thể dẫn đến sự phức tạp thêm. Các mẫu thiết kế JS sáng tạo nhằm mục đích giải quyết vấn đề này bằng cách kiểm soát quá trình tạo

Một số mẫu thuộc danh mục này là – Constructor, Factory, Prototype, Singleton, v.v.

b) Mẫu thiết kế kết cấu

Những mẫu này liên quan đến thành phần đối tượng. Họ giải thích những cách đơn giản để tập hợp các đối tượng và lớp thành các cấu trúc lớn hơn. Chúng giúp đảm bảo rằng khi một phần của hệ thống thay đổi, toàn bộ cấu trúc của hệ thống không cần phải làm như vậy, giữ cho chúng linh hoạt và hiệu quả

Một số mẫu thuộc danh mục này là – Mô-đun, Trang trí, Mặt tiền, Bộ điều hợp, Proxy, v.v.

c) Các mẫu thiết kế hành vi

Các mẫu này tập trung vào việc cải thiện giao tiếp và phân công trách nhiệm giữa các đối tượng không giống nhau trong một hệ thống

Một số mẫu thuộc danh mục này là – Chuỗi trách nhiệm, Lệnh, Người quan sát, Trình lặp, Chiến lược, Mẫu, v.v.

Với sự hiểu biết về phân loại này, hãy kiểm tra từng mẫu thiết kế JavaScript

Mẫu thiết kế sáng tạo

1. Mô hình xây dựng

Mẫu hàm tạo là một trong những mẫu thiết kế JavaScript đơn giản, phổ biến và hiện đại nhất. Như tên gợi ý, mục đích của mẫu này là để hỗ trợ tạo hàm tạo

Theo lời của Addy-

“Constructor là một phương thức đặc biệt được sử dụng để khởi tạo một đối tượng mới được tạo sau khi bộ nhớ đã được cấp phát cho nó. Trong JavaScript, vì hầu hết mọi thứ đều là đối tượng, nên chúng ta thường quan tâm nhất đến hàm tạo đối tượng. ”

Thí dụ

Trong đoạn mã dưới đây, chúng ta đã định nghĩa một hàm/lớp Person với thuộc tính name và age.
Phương thức getDetails() sẽ in tên và tuổi của người đó theo định dạng –
“Tên là tuổi. ”

Cú pháp được cung cấp ở 2 định dạng – (a) cú pháp dựa trên chức năng truyền thống và (b) cú pháp lớp EC6

Sau đó, chúng ta khởi tạo một đối tượng cho lớp Person bằng cách gọi phương thức khởi tạo bằng cách sử dụng từ khóa mới và chuyển các giá trị thuộc tính tương ứng

//  a) Cú pháp dựa trên "hàm" truyền thống

chức năng Người (tên, tuổi) {

cái này. getDetails = function () {

bảng điều khiển. log(`${this. tên} là ${this. tuổi} tuổi. `);

//  b) Cú pháp "lớp" ES6

cái này. getDetails = function () {

bảng điều khiển. log(`${this. tên} là ${this. tuổi} tuổi. `);

//Tạo phiên bản mới của Person

const personOne = new Person('John',20);

ngườiMột. nhận được chi tiết(); . ”

2. Mô hình nhà máy

Mẫu Factory là một mẫu thiết kế JavaScript khác liên quan đến việc tạo đối tượng nhưng sử dụng một số loại giao diện chung. Theo cuốn sách của GoF, mẫu này có trách nhiệm sau

“Xác định một giao diện để tạo một đối tượng, nhưng hãy để các lớp con quyết định lớp nào sẽ khởi tạo. ”

Mẫu này thường được sử dụng khi chúng ta cần xử lý các nhóm đối tượng có chung các ký tự nhưng khác nhau thông qua các lệnh gọi tùy chỉnh phù hợp. Một ví dụ sẽ mang lại sự rõ ràng hơn

Ghi chú. Mặc dù định nghĩa đặc biệt đề cập rằng một giao diện cần được xác định, nhưng chúng tôi không có giao diện trong JavaScript. Do đó, chúng tôi sẽ triển khai nó bằng một cách khác

Thí dụ

Ở đây, hàm tạo shapeFactory chịu trách nhiệm tạo các đối tượng mới của các hàm tạo Hình chữ nhật, Hình vuông và Hình tròn. createShape() bên trong shapeFactory nhận các tham số, tùy thuộc vào tham số mà nó ủy thác trách nhiệm khởi tạo đối tượng cho lớp tương ứng

// Phương thức xuất xưởng để tạo các thể hiện hình dạng mới

cái này. createShape = function (shapeType) {

// Constructor để định nghĩa Rectangle mới

bảng điều khiển. log('Đây là hình chữ nhật');

// Constructor để định nghĩa Square mới

bảng điều khiển. log('Đây là Hình vuông');

// Constructor để định nghĩa Circle mới

bảng điều khiển. log('Đây là một hình tròn);

var factory = new shapeFactory();

//Tạo thể hiện của nhà máy lần lượt tạo hình chữ nhật, hình vuông, hình tròn

var hình chữ nhật = nhà máy. createShape('hình chữ nhật');

var vuông = nhà máy. createShape('hình vuông');

var vòng tròn = nhà máy. createShape('hình tròn');

3. mẫu thử nghiệm

Một đối tượng hỗ trợ nhân bản được gọi là nguyên mẫu. Sử dụng mẫu nguyên mẫu, chúng ta có thể khởi tạo các đối tượng mới dựa trên mẫu của một đối tượng hiện có thông qua nhân bản

Vì mẫu nguyên mẫu dựa trên kế thừa nguyên mẫu, chúng tôi có thể sử dụng các thế mạnh nguyên mẫu gốc của JavaScript. Trong các mẫu thiết kế JavaScript trước đây, chúng tôi đã cố gắng bắt chước các tính năng của các ngôn ngữ khác trong JavaScript, điều này không xảy ra ở đây

Thí dụ

Ở đây chúng ta có một lớp xe nguyên mẫu, được sao chép để tạo một đối tượng mới myCar bằng cách sử dụng tính năng Object.create được xác định bởi tiêu chuẩn ES5

// sử dụng đối tượng. tạo để tạo bản sao - theo khuyến nghị của tiêu chuẩn ES5

const myCar = Đối tượng. tạo (ô tô, { chủ sở hữu. { giá trị. 'John' } });

bảng điều khiển. nhật ký (myCar. __proto__ === xe hơi);

4. Mẫu đơn

Mẫu đơn là một mẫu thiết kế JavaScript sáng tạo hạn chế việc khởi tạo một lớp cho một đối tượng duy nhất. Nó tạo một thể hiện mới của lớp nếu một thể hiện không tồn tại và nếu đã tồn tại, nó chỉ trả về một tham chiếu đến nó. Nó còn được gọi là Mẫu nghiêm ngặt

Một mẫu đơn lẻ giải quyết hai vấn đề cùng một lúc, vi phạm Nguyên tắc chịu trách nhiệm duy nhất

• Đảm bảo rằng chỉ có một thể hiện duy nhất của một lớp
• Cung cấp một điểm truy cập toàn cầu cho trường hợp này

Một ví dụ thực tế sẽ là một đối tượng cơ sở dữ liệu duy nhất được chia sẻ bởi các phần khác nhau của chương trình. Không cần tạo một phiên bản mới của cơ sở dữ liệu khi một phiên bản đã tồn tại

Một nhược điểm của mẫu là khó khăn liên quan đến thử nghiệm. Có các đối tượng phụ thuộc ẩn, rất khó để kiểm tra

Thí dụ

var Singleton = (hàm () {

chức năng tạoDBInstance() {

var object = new Object("Tôi là đối tượng DataBase");

getDBInstance. hàm số () {

instance = createDBInstance();

var instance1 = Singleton. getDBInstance();

var instance2 = Singleton. getDBInstance();

bảng điều khiển. log("Cùng một instance?" + (instance1 === instance2));

chạy();

Mẫu thiết kế kết cấu

1. Mẫu bộ điều hợp

Bộ điều hợp là một mẫu thiết kế JavaScript có cấu trúc cho phép các đối tượng hoặc lớp có giao diện không tương thích cộng tác với nhau. Nó phù hợp với các giao diện của các lớp hoặc đối tượng khác nhau; . Nó còn được gọi là mẫu Wrapper

Một sự tương tự trong thế giới thực sẽ cố gắng kết nối máy chiếu với máy tính xách tay. Máy chiếu có thể có đầu cắm VGA và máy tính xách tay có thể có đầu cắm HDMI. Vì vậy, chúng tôi yêu cầu một bộ điều hợp có thể làm cho hai giao diện không liên quan này tương thích với nhau

Mẫu này sẽ bao gồm một lớp chịu trách nhiệm tham gia các giao diện/chức năng không tương thích

Thí dụ

Đoạn mã dưới đây hiển thị một hệ thống tính giá vé máy bay trực tuyến. Có một giao diện cũ thực hiện tính toán giá theo một cách. Có giao diện mới, cải tiến với các tính năng bổ sung như nhận dạng người dùng và tính toán ngẫu hứng

Một lớp bộ điều hợp được giới thiệu, cho phép chương trình máy khách tiếp tục hoạt động mà không có bất kỳ thay đổi API nào bằng cách khớp giao diện cũ với giao diện mới

cái này. request = function(bắt đầu, kết thúc, hành lý quá cân) {

//mã tính giá

hàm NewTicketPrice() {

cái này. login = function(credentials) { /* xử lý thông tin đăng nhập */ };

cái này. setStart = function(start) { /* set start point */ };

cái này. setDestination = function(destination) { /* setdestination */ };

cái này. tính toán = chức năng (hành lý quá cân) {

//mã tính giá

chức năng TicketAdapter (thông tin xác thực) {

giá var = giá NewTicketprice mới();

định giá. Thông tin đăng nhập);

lời yêu cầu. chức năng (bắt đầu, kết thúc, hành lý quá cân) {

định giá. setDestination(end);

trả lại giá. tính toán (hành lý quá cân);

giá var = giá vé mới();

thông tin đăng nhập var = { mã thông báo. "30a8-6ee1" };

bộ chuyển đổi var = TicketAdapter mới (thông tin xác thực);

//giá vé gốc và giao diện

giá var = định giá. request("Bern", "Luân Đôn", 20);

bảng điều khiển. log("Giá cũ. " + giá);

// giá vé mới với giao diện phù hợp

giá = bộ chuyển đổi. request("Bern", "Luân Đôn", 20);

bảng điều khiển. log("Giá mới. " + giá);

2. Mô hình tổng hợp

Composite là một mẫu thiết kế JavaScript cấu trúc cho phép bạn kết hợp các đối tượng thành cấu trúc cây và sau đó làm việc với các cấu trúc này như thể chúng là các đối tượng riêng lẻ. Theo cuốn sách của GoF, mẫu này sắp xếp các đối tượng thành các cấu trúc dạng cây để thể hiện các hệ thống phân cấp một phần-toàn bộ. Nó còn được gọi là mẫu thiết kế JS phân vùng

Ví dụ hoàn hảo của mô hình này sẽ là kiểm soát cây. Các nút của cây chứa một đối tượng riêng lẻ (nút lá) hoặc một nhóm các đối tượng (một cây con của các nút)

Các khung JS hiện đại như React và Vue sử dụng mẫu tổng hợp để xây dựng giao diện người dùng. Toàn bộ chế độ xem được chia thành các thành phần. Mỗi thành phần có thể chứa nhiều thành phần. Phương pháp này được ưa thích vì dễ phát triển và khả năng mở rộng so với ít đối tượng nguyên khối hơn. Mẫu tổng hợp làm giảm độ phức tạp của hệ thống bằng cách cho phép bạn làm việc với các đối tượng nhỏ và xây dựng chúng thành các đối tượng lớn hơn

Thí dụ

Cấu trúc tệp-thư mục (thư mục) được giải thích trong đoạn mã dưới đây. Ở đây một thư mục có thể có hai loại thực thể, một tệp hoặc một thư mục khác, có thể chứa các tệp hoặc thư mục, v.v.
Chúng ta có hai lớp – Tệp và Thư mục. Chúng tôi có thể thêm hoặc xóa các tệp trong Thư mục và cả getFileName và màn hình sẽ liệt kê tất cả các tên tệp trong thư mục.

Tập tin. nguyên mẫu. hiển thị = chức năng () {

Danh mục. nguyên mẫu. thêm = hàm (tệp) {

Danh mục. nguyên mẫu. xóa = hàm (tệp) {

cho (hãy để tôi = 0, chiều dài = điều này. các tập tin. chiều dài;

nếu (cái này. tệp [i] === tệp) {

Danh mục. nguyên mẫu. getFileName = function (index) {

trả lại cái này. tập tin[chỉ mục]. Tên;

Danh mục. nguyên mẫu. hiển thị = hàm() {

cho (hãy để tôi = 0, chiều dài = điều này. các tập tin. chiều dài;

bảng điều khiển. log("   ", cái này. getFileName(i));

thư mụcOne = Thư mục mới ('Thư mục Một');

thư mụcHai = Thư mục mới('Thư mục Hai');

thư mụcBa = Thư mục mới('Thư mục Ba');

fileOne = new File('File One');

fileTwo = new File('File Hai');

fileBa = new File('File Three');

thư mụcMột. thêm (fileOne);

thư mụcMột. thêm (fileTwo);

thư mụcHai. thêm (fileOne);

thư mụcba. thêm (fileOne);

thư mụcba. thêm (fileTwo);

thư mụcba. thêm(tệpBa);

thư mụcba. trưng bày();

3. Mẫu mô-đun

Mẫu mô-đun là một mẫu thiết kế JavaScript phổ biến khác để giữ cho mã của chúng tôi sạch sẽ, tách biệt và có tổ chức. Mô-đun là một đoạn mã độc lập có thể được cập nhật mà không ảnh hưởng đến các thành phần khác. Vì khái niệm công cụ sửa đổi quyền truy cập không được hỗ trợ trong JavaScript, các mô-đun giúp bắt chước hành vi của quyền truy cập riêng tư/công khai, do đó cung cấp khả năng đóng gói

Cấu trúc mã điển hình sẽ như thế này

// khai báo các biến và/hoặc hàm riêng

// khai báo các biến và/hoặc hàm công khai

Thí dụ

Ở đây chúng tôi có thể linh hoạt đổi tên như chúng tôi đã đổi tên addAnimal để thêm. Một điểm cần lưu ý là chúng ta không thể gọi removeAnimal từ môi trường bên ngoài vì nó phụ thuộc vào vùng chứa thuộc tính riêng tư

hàm AnimalContainter() {

// các biến và/hoặc hàm riêng

hàm removeAnimal(tên) {

chỉ số const = vùng chứa. indexOf(tên);

ném Lỗi mới ('Không tìm thấy động vật trong thùng chứa');

thùng đựng hàng. mối nối (chỉ mục, 1)

các biến và/hoặc hàm công khai

const container = AnimalContainter();

bảng điều khiển. nhật ký (thùng chứa. get()) //Array(3) ["Gà mái", "Dê", "Cừu"]

thùng đựng hàng. loại bỏ ('Cừu')

bảng điều khiển. nhật ký (thùng chứa. được());

4. Hoa văn trang trí

Trình trang trí là một mẫu thiết kế JavaScript có cấu trúc nhằm mục đích thúc đẩy tái sử dụng mã. Mẫu này cho phép hành vi được thêm vào một đối tượng riêng lẻ một cách linh hoạt mà không ảnh hưởng đến hành vi của các đối tượng khác trong cùng một lớp. Người trang trí cũng có thể cung cấp một giải pháp thay thế linh hoạt cho phân lớp để mở rộng chức năng

Vì JavaScript cho phép chúng ta thêm các phương thức và thuộc tính vào các đối tượng một cách linh hoạt, nên việc triển khai các mẫu thiết kế JavaScript này là một quá trình rất đơn giản. Hãy xem bài đăng của Addy Osmani để biết thêm về Người trang trí

Thí dụ

Hãy cùng xem cách thực hiện đơn giản

chức năng Phương tiện( Loại phương tiện ){

cái này. loại xe = loại xe. "xe ô tô";

cái này. giấy phép = "00000-000";

// Ví dụ thử nghiệm cho một phương tiện cơ bản

var testInstance = new Vehicle("xe" );

bảng điều khiển. nhật ký (testInstance);

// phương tiện giao thông. mẫu xe. mặc định, giấy phép. 00000-000

// Tạo một instance mới của xe để trang trí

var xe tải = xe mới("xe tải");

// Chức năng mới chúng tôi đang trang trí xe

xe tải. setModel = function(modelName){

xe tải. setColor = chức năng (màu) {

// Kiểm tra giá trị setters và gán giá trị hoạt động chính xác

// phương tiện giao thông. xe tải, mô hình. MÈO, màu sắc. màu xanh da trời

// Chứng tỏ "phương tiện" vẫn không thay đổi

var secondInstance = new Vehicle("xe" );

bảng điều khiển. nhật ký (trường hợp thứ hai);

// phương tiện giao thông. mẫu xe. mặc định, giấy phép. 00000-000

5. hoa văn mặt tiền

Các mẫu thiết kế JavaScript về mặt tiền bao gồm một mặt tiền, là một đối tượng hoạt động như một “mặt trước” cho một mã cấu trúc phức tạp hơn nhiều. Các nhà phát triển thường sử dụng mẫu này khi một hệ thống rất phức tạp hoặc khó hiểu để cung cấp giao diện đơn giản hơn cho máy khách. Điều này giúp tạo ra một lớp trừu tượng giữa những gì được hiển thị công khai và những gì được triển khai đằng sau bức màn

Thí dụ

Ở đây Thế chấp là mặt tiền cho Ngân hàng, Tín dụng và Bối cảnh

var Thế chấp = chức năng (tên) {

áp dụng cho. chức năng (số tiền) {

// truy cập nhiều hệ thống con

nếu (. Ngân hàng mới(). xác minh (cái này. tên, số tiền)) {

} khác nếu (. Tín dụng mới(). có được điều này. Tên)) {

} khác nếu (. bôi cảnh mơi(). kiểm tra điều này. Tên)) {

trả lại cái này. tên + " đã là " + kết quả +

" cho một " + số tiền + " thế chấp";

cái này. xác minh = chức năng (tên, số tiền) {

var Nền = hàm() {

cái này. kiểm tra = chức năng (tên) {

var thế chấp = thế chấp mới ("Joan Templeton");

kết quả var = thế chấp. apply For("$100,000");

6. Mẫu ủy quyền

Như tên cho thấy, Mẫu Proxy cung cấp một đại diện thay thế hoặc trình giữ chỗ cho một đối tượng khác để kiểm soát quyền truy cập, giảm chi phí và giảm độ phức tạp. Proxy có thể giao tiếp với mọi thứ - kết nối mạng, đối tượng lớn trong bộ nhớ, tệp hoặc một số tài nguyên khác đắt tiền hoặc không thể sao chép

Ở đây, chúng ta sẽ tạo một đối tượng proxy “thế chỗ” cho đối tượng ban đầu. Giao diện proxy sẽ giống với giao diện của đối tượng ban đầu để khách hàng thậm chí có thể không biết rằng họ đang xử lý proxy chứ không phải đối tượng thực. Trong proxy, chức năng bổ sung có thể được cung cấp, ví dụ: bộ nhớ đệm, kiểm tra một số điều kiện tiên quyết, v.v.

Có ba tình huống phổ biến trong đó mẫu Proxy được áp dụng

1. Proxy ảo là trình giữ chỗ cho các đối tượng tốn kém để tạo hoặc sử dụng nhiều tài nguyên
2. Một proxy từ xa kiểm soát quyền truy cập vào đối tượng từ xa
3. Một proxy bảo vệ kiểm soát quyền truy cập vào một đối tượng chính nhạy cảm. Quyền truy cập của người gọi được kiểm tra trước khi chuyển tiếp yêu cầu

Thí dụ

Đoạn mã sau sẽ giúp bạn nắm được ý chính của việc triển khai Proxy. Chúng tôi có API FlightListAPI bên ngoài để truy cập cơ sở dữ liệu Chi tiết chuyến bay. Chúng tôi sẽ tạo một FlightListProxy proxy sẽ hoạt động như một giao diện mà qua đó khách hàng có thể truy cập API

var FlightListAPI = function() {

FlightListAPI. nguyên mẫu = {

// lấy danh sách tổng thể các chuyến bay

bảng điều khiển. log('Đang tạo danh sách chuyến bay');

tìm kiếmchuyến bay. hàm (chi tiết chuyến bay) {

// tìm kiếm thông qua danh sách chuyến bay dựa trên tiêu chí

bảng điều khiển. log('Đang tìm chuyến bay');

thêm chuyến bay. hàm (dữ liệu chuyến bay) {

// thêm một chuyến bay mới vào cơ sở dữ liệu

bảng điều khiển. log('Thêm chuyến bay mới vào DB');

var FlightListProxy = function() {

// lấy tham chiếu đến đối tượng ban đầu

cái này. FlightList = new FlightListAPI();

Danh sách chuyến bayProxy. nguyên mẫu = {

trả lại cái này. danh sách chuyến bay. getFlight();

tìm kiếmchuyến bay. hàm (chi tiết chuyến bay) {

trả lại cái này. danh sách chuyến bay. searchFlight(chi tiết chuyến bay);

thêm chuyến bay. hàm (dữ liệu chuyến bay) {

trả lại cái này. danh sách chuyến bay. addFlight(dữ liệu chuyến bay);

bảng điều khiển. log("------Với Proxy----------")

const proxy = FlightListProxy mới()

bảng điều khiển. nhật ký (proxy. getFlight());

----------Với Proxy----------

Mẫu thiết kế hành vi

1. Mẫu Chuỗi Trách nhiệm

Đây là một mẫu thiết kế JavaScript hành vi tạo ra một chuỗi các đối tượng nhận cho một yêu cầu. Mô hình này thúc đẩy khớp nối lỏng lẻo. Chúng tôi có thể tránh ghép người gửi yêu cầu với người nhận và nhiều người nhận có thể xử lý yêu cầu

Các đối tượng nhận sẽ được liên kết với nhau và chúng có thể chọn thực hiện theo yêu cầu và/hoặc chuyển nó cho đối tượng nhận tiếp theo. Cũng dễ dàng thêm các đối tượng nhận mới vào chuỗi

Xử lý sự kiện trong DOM là một triển khai của mẫu Chuỗi trách nhiệm

Sau khi một sự kiện được kích hoạt, nó sẽ lan truyền qua hệ thống phân cấp DOM, gọi mọi trình xử lý sự kiện mà nó chạy vào cho đến khi nó tìm thấy “trình xử lý sự kiện” thích hợp và sau đó hành động trên nó

Thí dụ

Chúng ta hãy xem xét kịch bản của một máy ATM. Khi chúng tôi yêu cầu một số tiền để rút, máy sẽ xử lý yêu cầu và phân bổ số tiền dưới dạng kết hợp các mệnh giá tiền có sẵn ($100, $50, $20, $10, $5, $1)

Trong mã này khi yêu cầu một số tiền, một đối tượng Yêu cầu được tạo. Đối tượng này sau đó gọi một loạt lệnh gọi get, được nối với nhau, mỗi lệnh xử lý một mệnh giá cụ thể. Cuối cùng, người dùng nhận được số tiền dưới dạng kết hợp ghi chú thỏa mãn giá trị số tiền

var Request = function(số lượng) {

bảng điều khiển. log("Số tiền yêu cầu. " +cái này. số lượng);

số lượng var = Toán học. sàn (cái này. số tiền/hóa đơn);

cái này. số tiền -= số lượng * hóa đơn;

bảng điều khiển. log("Phân phối " + đếm + " $" + hóa đơn + " hóa đơn");

var request = new Request(378);

lời yêu cầu. nhận được (100). nhận được (50). lấy(20). lấy(10). nhận được (5). nhận được 1);

2. Mẫu lệnh

Mẫu lệnh là một mẫu thiết kế JavaScript hành vi nhằm đóng gói các hành động hoặc hoạt động dưới dạng đối tượng. Mẫu này hữu ích trong các tình huống mà chúng ta muốn tách rời hoặc phân chia đối tượng thực thi lệnh khỏi đối tượng đưa ra lệnh. Các đối tượng lệnh cho phép bạn tập trung xử lý các thao tác/hành động này

Bốn thành phần tham gia vào mẫu lệnh là lệnh, người nhận, người gọi và máy khách

• Lệnh – Một đối tượng lệnh biết về người nhận và gọi một phương thức của người nhận. Các giá trị cho các tham số của phương thức nhận được lưu trữ trong lệnh
• Máy khách – Trách nhiệm của máy khách là tạo đối tượng lệnh và chuyển nó cho người gọi
• Invoker – Invoker nhận đối tượng command từ client, và nhiệm vụ duy nhất của nó là gọi (hoặc gọi) một command
• Người nhận – Sau đó, người nhận nhận lệnh và tìm phương thức gọi dựa trên lệnh đã nhận

Thí dụ

Trong ví dụ của chúng tôi, đối tượng máy tính chứa bốn phương thức – cộng, trừ, chia và nhân. Các đối tượng lệnh xác định một phương thức thực thi, có trách nhiệm gọi một phương thức

hành hình. hàm (tên, đối số) {

trả lại máy tính [tên]. áp dụng (máy tính, []. lát cắt. cuộc gọi (đối số, 1));

bảng điều khiển. nhật ký (người quản lý. thực hiện ("thêm", 5, 2));

bảng điều khiển. nhật ký (người quản lý. thực hiện ("nhân", 2, 4));

3. Mẫu quan sát

Người quan sát là một mẫu thiết kế JavaScript hành vi cho phép bạn xác định cơ chế đăng ký để thông báo cho nhiều đối tượng (người quan sát) về bất kỳ sự kiện nào xảy ra với đối tượng (đối tượng) mà họ đang quan sát. Mẫu này còn được gọi là Pub/Sub, viết tắt của Publication/Subscription. Nó xác định sự phụ thuộc một-nhiều giữa các đối tượng, thúc đẩy khớp nối lỏng lẻo và tạo điều kiện cho thiết kế hướng đối tượng tốt

Mẫu người quan sát là nền tảng của lập trình hướng sự kiện. Chúng tôi viết các hàm xử lý sự kiện sẽ được thông báo khi một sự kiện nào đó xảy ra

Thí dụ

Chúng tôi đã thiết lập chức năng Chủ đề Nhấp chuột và mở rộng nó bằng cách sử dụng nguyên mẫu. Chúng tôi đã tạo các phương thức để đăng ký và hủy đăng ký các đối tượng đối với bộ sưu tập Người quan sát, được xử lý bởi hàm clickHandler. Ngoài ra, có một phương thức chữa cháy để truyền bất kỳ thay đổi nào trong đối tượng lớp Chủ đề tới Người quan sát đã đăng ký

cái này. người quan sát = [];

hủy đăng ký. chức năng (fn) {

cái này. người quan sát = cái này. người quan sát. lọc(

lửa. chức năng (của, Obj này) {

cái này. người quan sát. forEach(function(item) {

var clickHandler = function(item) {

bảng điều khiển. log("Đã kích hoạt. " +mục);

nhấp chuột. đăng ký (clickHandler);

nhấp chuột. hủy đăng ký (clickHandler);

nhấp chuột. đăng ký (clickHandler);

4. Mẫu lặp

Mẫu Iterator cho phép bạn truy cập và duyệt qua các phần tử của một đối tượng tổng hợp (bộ sưu tập) một cách tuần tự mà không để lộ biểu diễn cơ bản của nó. Mẫu này cho phép các nhà phát triển JavaScript thiết kế các cấu trúc vòng lặp linh hoạt và phức tạp hơn nhiều. Trong ES6, Iterator và Generator được giới thiệu, hỗ trợ thêm cho việc triển khai mẫu Lặp lại

Thí dụ

Đây là một mã chuyển tiếp đơn giản để lặp lại từ trước ra sau. Chúng ta đã định nghĩa hai phương thức cho Iterator – hasNext() và next()

const items = [1,"xin chào",false,99. số 8];

cái này. chỉ số = 0;

// trả về true nếu có phần tử tiếp theo

trả lại cái này. chỉ mục < cái này. mặt hàng. chiều dài;

trả lại cái này. mục [này. chỉ số ++]

//Khởi tạo đối tượng cho Iterator

const iterator =  new Iterator(items);

while(iterator. hasNext()){

bảng điều khiển. nhật ký (trình lặp. tiếp theo());

5. Mẫu Mẫu

Mẫu mẫu xác định khung của thuật toán đang hoạt động theo một số bước cấp cao. Các bước này được thực hiện bởi các phương thức trợ giúp bổ sung trong cùng một lớp với phương thức mẫu. Các đối tượng thực hiện các bước này giữ nguyên cấu trúc ban đầu của thuật toán nhưng có tùy chọn xác định lại hoặc điều chỉnh các bước nhất định

Thí dụ

Ở đây chúng ta có một kho dữ liệu lớp trừu tượng cung cấp giao diện để triển khai phương thức mẫu bằng cách xác định các bước nguyên thủy cho thuật toán. Và chúng tôi có một lớp MySQL cụ thể, thực hiện các bước nguyên thủy được định nghĩa trong lớp trừu tượng

// triển khai phương thức mẫu

var mySql = inherit(datastore);

// thực hiện các bước mẫu

mySql. kết nối = hàm() {

bảng điều khiển. nhật ký ("MySQL. bước kết nối");

bảng điều khiển. nhật ký ("MySQL. chọn bước");

mySql. ngắt kết nối = hàm() {

bảng điều khiển. nhật ký ("MySQL. bước ngắt kết nối");

6. Mô hình chiến lược

Các mẫu chiến lược cho phép một trong các nhóm thuật toán được chọn nhanh chóng khi chạy. Mẫu xác định một họ thuật toán, đóng gói từng thuật toán và làm cho chúng có thể hoán đổi cho nhau trong thời gian chạy mà không có sự can thiệp của máy khách

Thí dụ

Chúng tôi đã tạo một lớp Vận chuyển gói gọn tất cả các chiến lược khả thi để vận chuyển một bưu kiện – FedEx, UPS và USPS. Sử dụng mẫu này, chúng tôi có thể trao đổi chiến lược trong thời gian chạy và tạo đầu ra phù hợp

cái này. tính toán = gói => {

// phép tính  xảy ra ở đây

cái này. tính toán = gói => {

// phép tính  xảy ra ở đây

cái này. tính toán = gói => {

// phép tính  xảy ra ở đây

cái này. setStrategy = (công ty) => {

cái này. tính toán = (gói) =>{

trả lại cái này. Công ty. tính toán (gói);

gói const = {từ. 'Alabama', đến. 'Georgia', cân nặng. 1. 5};

const shipping = new Shipping();

Đang chuyển hàng. setStrategy(fedex);

bảng điều khiển. nhật ký ("Fedex. " +vận chuyển. tính toán (gói)); . 2. 99"

Chống mẫu

Mặc dù điều quan trọng là phải biết về các mẫu thiết kế, nhưng điều quan trọng không kém là phải biết về Anti-Pattern. Nếu một mẫu thiết kế có thể được coi là một phương pháp hay nhất, thì một mẫu chống ngược lại đại diện cho điều ngược lại

Thuật ngữ phản mẫu được đặt ra vào năm 1995 bởi Andrew Koenig. Theo Koenig, anti-pattern là một giải pháp tồi cho một vấn đề cụ thể dẫn đến một tình huống xấu.

Sau đây là một vài ví dụ về anti-patterns trong JavaScript

• Làm ô nhiễm không gian tên toàn cầu bằng cách xác định một số lượng lớn các biến trong bối cảnh toàn cầu
• Truyền chuỗi thay vì hàm cho setTimeout hoặc setInterval vì điều này kích hoạt việc sử dụng eval() nội bộ
• Sửa đổi nguyên mẫu của lớp Đối tượng (đây là một mẫu chống mẫu đặc biệt xấu)

Tóm lại, một anti-pattern là một thiết kế tồi đáng được ghi lại. Kiến thức về chúng sẽ giúp bạn nhận ra các anti-pattern như vậy trong mã của mình và do đó cải thiện chất lượng mã

Áp dụng các mẫu thiết kế và thử nghiệm

Khi một mẫu thiết kế đã được triển khai và xác thực, chúng tôi cần đảm bảo rằng mẫu thiết kế đó hoạt động liền mạch trên nhiều trình duyệt và phiên bản trình duyệt. LambdaTest là một nền tảng kiểm tra trình duyệt chéo để kiểm tra trình duyệt chéo thủ công và tự động. Nó bao gồm hơn 2000 phiên bản trình duyệt và trình duyệt thực, đồng thời cho phép kiểm tra hồi quy khả năng tương thích của trình duyệt trên tất cả các trình duyệt và phiên bản trình duyệt chính

Bạn cũng có thể tận dụng LT Browser, một công cụ thân thiện với nhà phát triển để thực hiện phân tích chi tiết các thử nghiệm phản hồi của các mẫu thiết kế của bạn trên các thiết bị và chế độ xem phổ biến

Phần kết luận

Các mẫu thiết kế đại diện cho một số thực tiễn tốt nhất được các nhà phát triển phần mềm hướng đối tượng có kinh nghiệm áp dụng. Chúng là những giải pháp đã được thử nghiệm qua thời gian cho các vấn đề thiết kế phần mềm khác nhau. Trong bài viết này, chúng ta đã khám phá các mẫu thiết kế phổ biến trong JavaScript. Ngoài ra, chúng tôi cũng đã thảo luận ngắn gọn về Anti-Pattern và cách chúng tôi có thể kiểm tra các trang web có các mẫu như vậy trên nền tảng LambdaTest. Hy vọng rằng chương này sẽ giúp bạn làm quen với các mẫu thiết kế JavaScript khác nhau. Để tìm hiểu sâu hơn về khái niệm này, hãy xem bài Tìm hiểu các mẫu thiết kế JavaScript của Addy Osmani

Mẫu thiết kế tốt nhất cho JavaScript là gì?

4 loại mẫu chính được sử dụng trong thiết kế là gì?

23 mẫu thiết kế là gì?

Mẫu thiết kế phổ biến nhất là gì?