Ch&agrave;o mừng bạn đến với series Design Pattern trong TypeScript, series giới thiệu một số design pattern hữu &iacute;ch trong ph&aacute;t triển web bằng TypeScript.
Design pattern rất quan trọng đối với nh&agrave; ph&aacute;t triển web v&agrave; th&agrave;nh thạo ch&uacute;ng c&oacute; thể gi&uacute;p ta viết code tốt hơn. Trong b&agrave;i viết n&agrave;y, Tek4 sẽ sử dụng TypeScript để giới thiệu Factory Method Pattern.
Factory method pattern, gọi ngắn gọn l&agrave; factory pattern, t&ecirc;n kh&aacute;c l&agrave; polymorphic factory pattern, thuộc nh&oacute;m creational pattern.
Trong factory method pattern, lớp cha chịu tr&aacute;ch nhiệm x&aacute;c định giao diện chung để tạo đối tượng product, trong khi lớp con tạo c&aacute;c đối tượng product cụ thể. Mục đ&iacute;ch của việc n&agrave;y l&agrave; để tr&igrave; ho&atilde;n việc khởi tạo lớp product cho lớp con của factory. Đ&oacute; l&agrave;, th&ocirc;ng qua lớp con của factory để x&aacute;c định lớp product cụ thể n&agrave;o n&ecirc;n được khởi tạo.
<img style="width: 700px;" src="https://tek4.vn/public_files/beda382d-5a25-4c4f-8aa2-b59825c566ab" alt="process" />
Ảnh tr&ecirc;n m&ocirc; phỏng quy tr&igrave;nh mua xe của người d&ugrave;ng. Bytefer v&agrave; Chris1993 lần lượt đặt h&agrave;ng c&aacute;c mẫu SuperX01 v&agrave; SuperX02 từ nh&agrave; m&aacute;y SuperX01 v&agrave; SuperX02, sau đ&oacute; nh&agrave; m&aacute;y sản xuất c&aacute;c mẫu tương ứng v&agrave; giao sản phẩm cho người d&ugrave;ng sau khi ho&agrave;n thiện kh&acirc;u sản xuất.
H&atilde;y xem c&aacute;ch sử dụng factory method để m&ocirc; tả quy tr&igrave;nh sản xuất một mẫu &ocirc; t&ocirc; trong nh&agrave; m&aacute;y sản xuất xe.
Để hiểu r&otilde; hơn về đoạn code sau, trước ti&ecirc;n h&atilde;y xem sơ đồ UML tương ứng:
<img style="width: 700px;" src="https://tek4.vn/public_files/c16794ce-a5a4-400e-811b-666da417071b" alt="UML diagram" />
Factory method pattern bao gồm:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Product (Vehicle): sản phẩm trừu tượng</li>
<li style="font-weight: 400;" aria-level="1">Concrete Product (SuperX01): sản phẩm thực</li>
<li style="font-weight: 400;" aria-level="1">Factory (VehicleFactory): nh&agrave; m&aacute;y trừu tượng</li>
<li style="font-weight: 400;" aria-level="1">ConcreteFactory (SuperX01Factory): nh&agrave; m&aacute;y thực</li>
</ul>
Tiếp theo, ch&uacute;ng ta khai b&aacute;o lớp trừu tượng <code>Vehicle</code> v&agrave; hai lớp con tương ứng l&agrave; <code>SuperX01</code> v&agrave; <code>SuperX02</code> để biễu diễn c&aacute;c mẫu xe.
<pre class="language-python"><code>abstract class Vehicle {
 abstract run(): void;
}
class SuperX01 extends Vehicle {
 run(): void {
 console.log("SuperX01 start");
 }
}
class SuperX02 extends Vehicle {
 run(): void {
 console.log("SuperX02 start");
 }
}</code></pre>
Sau đ&oacute;, ta khai b&aacute;o lớp <code>VehicleFactory</code> để biểu diễn nh&agrave; m&aacute;y sản xuất xe. Lớp trừu tượng chứa phương thức trừu tượng <code>productionVehicle</code>, được gọi l&agrave; factory method.
<pre class="language-python"><code>abstract class VehicleFactory {
 abstract produceVehicle(): Vehicle;
}</code></pre>
Dựa tr&ecirc;n lớp trừu tượng <code>VehicleFactory</code>, ta khai b&aacute;o c&aacute;c lớp factory <code>SuperX01Factory</code> v&agrave; <code>SuperX02Factory</code> để sản xuất mẫu xe SuperX01 v&agrave; SuperX02:
<pre class="language-python"><code>class SuperX01Factory extends VehicleFactory {
 produceVehicle(): Vehicle {
 return new SuperX01();
 }
}
class SuperX02Factory extends VehicleFactory {
 produceVehicle(): Vehicle {
 return new SuperX02();
 }
}</code></pre>
Sau khi tạo c&aacute;c lớp factory <code>SuperX01Factory</code> v&agrave; <code>SuperX02Factory</code>, ch&uacute;ng ta c&oacute; thể bắt đầu sản xuất &ocirc; t&ocirc;:
<pre class="language-python"><code>const superX01Factory = new SuperX01Factory();
const superX02Factory = new SuperX02Factory();
const superX01Vehicle = superX01Factory.produceVehicle();
const superX02Vehicle = superX02Factory.produceVehicle();
superX01Vehicle.run();
superX02Vehicle.run();</code></pre>
Khi bạn chạy th&agrave;nh c&ocirc;ng đoạn code tr&ecirc;n, terminal sẽ xuất ra kết quả sau:
<pre class="language-python"><code>SuperX01 start
SuperX02 start</code></pre>
Cuối c&ugrave;ng, h&atilde;y t&oacute;m tắt c&aacute;c t&igrave;nh huống sử dụng của mẫu phương ph&aacute;p gốc:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Trong factory method pattern, lớp factory trừu tượng chỉ cần cung cấp một giao diện để tạo product v&agrave; lớp con x&aacute;c định đối tượng cụ thể sẽ được tạo, sử dụng t&iacute;nh đa h&igrave;nh hướng đối tượng v&agrave; nguy&ecirc;n tắc thay thế Liskov, khi chương tr&igrave;nh đang chạy, đối tượng của lớp con sẽ ghi đ&egrave; đối tượng của lớp cha, gi&uacute;p cho hệ thống dễ mở rộng hơn.</li>
</ul>

Admin

Design Pattern: Factory Method Pattern trong TypeScript

Cùng tác giả

Admin

Có liên quan