Các nhà phát triển tập trung vào việc viết mã có thể đọc được, có thể bảo trì và có thể tái sử dụng. Một mẫu thiết kế đóng một vai trò quan trọng trong lĩnh vực này. Đây là một khái niệm được công nhận rộng rãi trong ngành thiết kế phần mềm do những lợi ích của nó.
Một trong những tính năng quan trọng nhất của việc viết mã có thể bảo trì là xác định các cấu trúc và chức năng định kỳ và tối ưu hóa chúng. Các mẫu thiết kế JavaScript cho phép các nhà phát triển viết mã có cấu trúc và tổ chức tốt
Ghi bàn
Bài viết này sẽ giúp bạn hiểu các mẫu thiết kế JavaScript phổ biến nhất. Chúng bao gồm các mẫu thiết kế sáng tạo, cấu trúc và hành vi
Mục lục
điều kiện tiên quyết
Các mẫu thiết kế trong JavaScript là một chủ đề thú vị và tương tác. Do đó, người đọc cần có hiểu biết thấu đáo về JavaScript và lập trình hướng đối tượng [OOP]
mẫu thiết kế là gì
Một mẫu thiết kế là một giải pháp được xác định rõ ràng được áp dụng cho các vấn đề thường xảy ra trong ngành công nghệ phần mềm
Nó là một minh họa hoặc một khuôn mẫu để giải quyết vấn đề có thể được sử dụng trong các điều kiện khác nhau. Một số vấn đề được giải quyết bằng các mẫu thiết kế bao gồm
- Tạo lớp học
- Khởi tạo một đối tượng
- Tương tác với đồ vật
- Viết mã tái sử dụng
Một số lợi ích của các mẫu thiết kế được nêu bật bên dưới
- Chúng cho phép một người viết mã có thể tái sử dụng và do đó, tiết kiệm thời gian
- Họ giúp giải quyết các vấn đề thiết kế phần mềm phổ biến
- Các mẫu thiết kế giúp tránh nhầm lẫn do các quy định có cấu trúc tốt
- Các mẫu thiết kế có khả năng bảo trì cao giúp giảm chi phí chung
Hạng mục mẫu thiết kế
Các mẫu thiết kế được phân thành nhiều loại. Tuy nhiên, các mẫu thiết kế sáng tạo, cấu trúc và hành vi là phổ biến nhất. Chúng ta sẽ thảo luận về ba mẫu thiết kế này
Các mẫu thiết kế sáng tạo
Các mẫu thiết kế này cung cấp các kỹ thuật tạo đối tượng giúp tăng tính linh hoạt và giảm độ phức tạp
Các mẫu thiết kế sáng tạo bao gồm
- phương pháp xuất xưởng
- nhà máy trừu tượng
- nhóm đối tượng
- Độc thân
- Nguyên mẫu
- Người xây dựng
Mẫu thiết kế kết cấu
Các mẫu này tập trung vào kiến trúc tổng thể bao gồm cấu trúc lớp và thành phần
Các mẫu thiết kế cấu trúc tổ chức các đối tượng và lớp thành một cấu trúc lớn hơn để nâng cao tính linh hoạt và hiệu quả. Họ cũng cải thiện khả năng đọc mã và khả năng bảo trì
Mục tiêu chính của các mẫu thiết kế cấu trúc là tăng chức năng của lớp mà không thay đổi thành phần của nó
Các mẫu thiết kế kết cấu bao gồm
- bộ chuyển đổi
- Cầu
- tổng hợp
- mặt tiền
- Người trang trí
- hạng ruồi
Các mẫu thiết kế hành vi
Các mẫu thiết kế hành vi cho phép giao tiếp hiệu quả và linh hoạt giữa các lớp và đối tượng
Các mẫu thiết kế hành vi bao gồm
- Chỉ huy
- chuỗi trách nhiệm
- Trình lặp
- người quan sát
- Thông dịch viên
- Chiến lược
- người hòa giải
Các mẫu thiết kế JavaScript
Chúng tôi đã học được rằng có rất nhiều mẫu thiết kế. Trong phần này, chúng ta sẽ khám phá và triển khai các mẫu thiết kế JavaScript phổ biến nhất
Các mẫu thiết kế sẽ thuộc ba loại mà chúng ta đã thảo luận ở trên
Bảy mẫu JavaScript phổ biến nhất là hàm tạo, singleton, nguyên mẫu, mô-đun, trang trí, trách nhiệm chuỗi và lệnh
mẫu xây dựng
Các hàm tạo OOP là các phương thức duy nhất khởi tạo các đối tượng của một lớp. Trong JavaScript, gần như mọi thứ đều là một đối tượng bao gồm các hàm
JavaScript hỗ trợ các hàm tạo đối tượng, như minh họa bên dưới
//creates a new object
var firstObject = {};
//creates a new object
var secondObject = Object.create[ Object.prototype ];
//creates a new object
var thirdObject = new Object[];
Dưới đây là một ví dụ về mẫu thiết kế hàm tạo
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
Ví dụ trên minh họa một mẫu thiết kế hàm tạo. Chúng tôi đã định nghĩa một lớp
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
Phương thức
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
mẫu đơn
Mẫu thiết kế Singleton kiểm soát việc khởi tạo một lớp thành một đối tượng. Một thể hiện của lớp mới chỉ được tạo khi không có thể hiện nào khác
Dưới đây là một ví dụ về mẫu đơn
var singleton = [function[] {
// singleton value which gets initialized only once
var instance;
function initialization[values]{
this.randomNumber = Math.random[];
values = values || {};
this.number = values.number || 7;
this.size = values.size || 12;
}
return {
getValue: function[values] {
// we initialize the singleton value only once
if [instance === undefined] {
instance = new
initialization[values];
}
return instance;
}
};
}][];
var insObject = singleton.getValue[{ "size": 10 }];
// prints number: 7, size: 10, and a random decimal value
console.log[insObject];
var insObject1 = singleton.getValue[{ "number": 10 }];
// // prints number: 7, size: 10, and a random decimal value as in first output
console.log[insObject1];
Từ ví dụ trên, số ngẫu nhiên và các giá trị khác được tạo luôn giống nhau
mẫu nguyên mẫu
Mẫu nguyên mẫu liên quan đến việc thiết kế các đối tượng dựa trên các mẫu có sẵn còn được gọi là nhân bản
Trong JavaScript, hãy coi đó là sự kế thừa nguyên mẫu nơi các đối tượng được tạo để hoạt động như nguyên mẫu của các thành phần khác
Dưới đây là một ví dụ để thực hiện mẫu này
________số 8
mẫu mô-đun
Các mô-đun là các phần nhỏ của mã độc lập và có thể tái sử dụng. Ngoài ra, mẫu mô-đun giúp đóng gói mã
Các mô-đun tạo các phương thức riêng tư và công khai. Các chức năng riêng tư là các thuộc tính của một thực thể nhất định chỉ có thể được truy cập trong một lớp cụ thể
Mặt khác, các phương thức công khai có thể được truy cập từ bất kỳ thực thể nào
Dưới đây là một ví dụ về việc triển khai mẫu mô-đun
var countApi = [function[]{
var counter = 0;
var inc = function[] {
counter++;
}
var dec = function[] {
counter--;
}
return {
increment: function[] {
inc[];
},
decrement: function[] {
dec[];
},
reset: function[] {
counter = 0;
},
getvalue: function[] {
return counter;
}
};
}][];
countApi.increment[];
countApi.increment[];
countApi.increment[];
countApi.decrement[];
countApi.reset[];
console.log[countApi.getvalue[]];
hoa văn trang trí
Mẫu thiết kế trang trí tập trung vào khả năng sử dụng lại mã ảnh hưởng đến hành vi của đối tượng. Nó cũng kết hợp các đặc điểm và hành vi mới cho các lớp và đối tượng được xác định trước
Hãy tạo một hàm để gán cho một đối tượng một chức năng hoặc hành vi chung
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
Mô hình chuỗi trách nhiệm
Mẫu chuỗi trách nhiệm chủ yếu hoạt động với các hệ thống cho phép yêu cầu của khách hàng đi qua một chuỗi sự kiện và được người xử lý nhận. Các yêu cầu sau đó được xử lý và chuyển từ chuỗi này sang chuỗi khác hoặc bị từ chối
Một ví dụ hoàn hảo của mô hình này là máy ATM. Khi chúng tôi rút tiền từ máy ATM, máy sẽ xử lý yêu cầu và phân phối số tiền trong một loạt các ghi chú được nhóm [$200, $100, $50, $20, $5, $1]
Dưới đây là một ví dụ về chuỗi mẫu trách nhiệm
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
Trong đoạn mã trên, một đối tượng được tạo yêu cầu số tiền rút. Điều này gọi một chuỗi các cuộc gọi cho đối tượng. Cuối cùng, ATM phân phối tổ hợp các ghi chú đáp ứng yêu cầu
mẫu lệnh
Mẫu thiết kế lệnh đóng gói các hành động dưới dạng đối tượng. Do đó, sẽ rất hữu ích nếu bạn muốn dịch ngược hoặc thực thi các đối tượng
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
Ví dụ dưới đây triển khai mẫu thiết kế lệnh
class Person {
constructor[firstName, secondName] {
this.firstName = firstName;
this.secondName = secondName;
this.fullName = function [] {
console.log[this.firstName + ' ' + this.secondName];
};
}
}
const Teacher = new Person['Freddy', 'Chris'];
Teacher.fullName[]; //Prints Freddy Chris in the console
Phần kết luận
Hướng dẫn này đi qua các mẫu thiết kế JavaScript và cách chúng giải quyết các vấn đề phổ biến và phức tạp một cách dễ dàng