tek4

Module trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8164 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-41.png" alt="Module trong JavaScript" width="752" height="442" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ t&igrave;m hiểu về c&aacute;c Module trong JavaScript c&ugrave;ng với sự trợ gi&uacute;p của c&aacute;c v&iacute; dụ dẫn chứng.</p> <h1>Module trong JavaScript</h1> <p>Khi chương tr&igrave;nh ph&aacute;t triển lớn dần hơn, n&oacute; c&oacute; thể chứa nhiều đoạn m&atilde; kh&aacute;c nhau. Thay v&igrave; đặt tất cả v&agrave;o trong một tệp duy nhất, ta c&oacute; thể sử dụng c&aacute;c module để t&aacute;ch biệt c&aacute;c đoạn m&atilde; trong c&aacute;c tệp ri&ecirc;ng biệt theo từng chức năng của ch&uacute;ng. Điều n&agrave;y l&agrave;m cho đoạn m&atilde; được sắp xếp tổ chức v&agrave; dễ duy tr&igrave; hơn.</p> <p>Module l&agrave; một tệp chứa đoạn m&atilde; để thực hiện một nhiệm vụ cụ thể. Một Module c&oacute; thể chứa c&aacute;c biến, h&agrave;m, lớp,&hellip;</p> <p>Giả sử, một tệp c&oacute; t&ecirc;n l&agrave; tek4.js chứa đoạn m&atilde; sau:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">export function phep_chia(a, b) { &nbsp;&nbsp;&nbsp; return a / b; }</pre> <p>B&acirc;y giờ, để sử dụng m&atilde; trong file tek4.js trong một tệp kh&aacute;c, ta c&oacute; thể sử dụng đoạn m&atilde; như sau:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">import { phep_chia } from 'tek4.js'; let kq = phep_chia(4, 2); console.log(kq);</pre> <p>Ở đ&acirc;y, h&agrave;m phep_chia() trong tek4.js được xuất bằng từ kh&oacute;a export. Sau đ&oacute;, ch&uacute;ng t&ocirc;i đ&atilde; nhập h&agrave;m phep_chia() trong một tệp kh&aacute;c bằng c&aacute;ch sử dụng từ kh&oacute;a import. Để nhập c&aacute;c h&agrave;m, đối tượng,... ta cần bao bọc ch&uacute;ng xung quanh dấu ngoặc nhọn{}.</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Ta chỉ c&oacute; thể truy cập c&aacute;c h&agrave;m, đối tượng,,,. được xuất từ Module. Ta cần sử dụng từ kh&oacute;a export cho h&agrave;m, đối tượng cụ thể, v.v. để nhập ch&uacute;ng v&agrave; sử dụng ch&uacute;ng trong c&aacute;c tệp kh&aacute;c.</span></strong></p> <h2>Xuất nhiều đối tượng</h2> <p>Ta cũng c&oacute; thể xuất nhiều đối tượng từ một Module.</p> <p>V&iacute; dụ: Trong tệp tek4.js bao gồm nội dung như sau.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">export const a = 'Lập tr&igrave;nh Javascript'; export function phep_chia(a, b) { &nbsp;&nbsp;&nbsp; return a / b; }</pre> <p>Trong tệp ch&iacute;nh, ta sử dụng đoạn m&atilde; như sau.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">import { a, phep_chia } from './tek4.js'; console.log(a); let b = phep_chia(4, 2); console.log(b);</pre> <h2>Đổi t&ecirc;n cho Module khi th&ecirc;m v&agrave;o chương tr&igrave;nh</h2> <p>Nếu c&aacute;c đối tượng (biến, h&agrave;m, v.v.) m&agrave; ta muốn nhập đ&atilde; c&oacute; trong tệp ch&iacute;nh, chương tr&igrave;nh c&oacute; thể sẽ kh&ocirc;ng hoạt động như mong muốn. Trong trường hợp n&agrave;y, chương tr&igrave;nh lấy gi&aacute; trị từ tệp ch&iacute;nh thay v&igrave; tệp được nhập.</p> <p>Để tr&aacute;nh xung đột, ta c&oacute; thể đổi t&ecirc;n c&aacute;c h&agrave;m, đối tượng,... n&agrave;y trong qu&aacute; tr&igrave;nh xuất hoặc trong qu&aacute; tr&igrave;nh nhập.</p> <h3>1. Đổi t&ecirc;n trong file xuất</h3> <p>Ta c&oacute; thể đổi t&ecirc;n trong file xuất ra c&aacute;c h&agrave;m hoặc c&aacute;c biến trong JavaScript (Hay ch&iacute;nh l&agrave; c&aacute;c Module).</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">export { &nbsp;&nbsp;&nbsp; phep_chia as divide, &nbsp;&nbsp;&nbsp; phep_cong as add };</pre> <p>Ta sẽ thực hiện nhập c&aacute;c đối tượng như sau</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">import { divide, add } from './tek4.js';</pre> <p>Tại đ&acirc;y, trong khi xuất h&agrave;m từ tệp tek4.js, c&aacute;c t&ecirc;n mới được cấp cho h&agrave;m. Do đ&oacute;, khi nhập h&agrave;m đ&oacute;, t&ecirc;n mới được sử dụng để tham chiếu đến h&agrave;m.</p> <h3>2. Đổi t&ecirc;n trong file nhập</h3> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">import { phep_chia as divide, phep_cong as add } from './tek4</pre> <p>Ở đ&acirc;y, khi nhập h&agrave;m, c&aacute;c t&ecirc;n mới sẽ được sử dụng cho t&ecirc;n h&agrave;m. B&acirc;y giờ ta c&oacute; thể sử dụng c&aacute;c t&ecirc;n mới để tham chiếu c&aacute;c h&agrave;m n&agrave;y.</p> <h2>Xuất đối tượng mặc định</h2> <p>Ta cũng c&oacute; thể thực hiện xuất c&aacute;c đối tượng mặc định của Module.</p> <p>V&iacute; dụ: Trong tệp tek4.js c&oacute; nội dung như sau.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">export default function phep_chia(a, b) { &nbsp;&nbsp;&nbsp; return a/b; } export const ID = 100;</pre> <p>Khi ta thực hiện import trong một file kh&aacute;c,</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">import divide from './tek4.js';</pre> <p>Trong khi thực hiện xuất mặc định:</p> <ul> <li>divide được nhập từ tek4.js. V&igrave; divide kh&ocirc;ng c&oacute; trong tek4.js, đối tượng xuất mặc định (trong trường hợp n&agrave;y l&agrave; h&agrave;m phep_chia()) được xuất với t&ecirc;n l&agrave; divide.</li> <li>Ta c&oacute; thể sử dụng trực tiếp đối tượng xuất mặc định m&agrave; kh&ocirc;ng cần th&ecirc;m dấu ngoặc nhọn {}.</li> </ul> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Một tệp c&oacute; thể chứa nhiều đối tượng xuất. Tuy nhi&ecirc;n, ta chỉ c&oacute; thể c&oacute; một đối tượng xuất mặc định trong một tệp.</span></strong></p> <h2>Lợi &iacute;ch của việc sử dụng Module trong JavaScript</h2> <ul> <li>Đoạn m&atilde; dễ được quản l&yacute; hơn v&igrave; c&aacute;c đoạn m&atilde; kh&aacute;c nhau c&oacute; c&aacute;c chức năng kh&aacute;c nhau nằm trong c&aacute;c tệp kh&aacute;c nhau.</li> <li>Đoạn m&atilde; c&oacute; thể được sử dụng lại nhiều lần. Ta c&oacute; thể định nghĩa một Module v&agrave; sử dụng n&oacute; nhiều lần trong c&aacute;c chương tr&igrave;nh kh&aacute;c nhau t&ugrave;y theo nhu cầu.</li> </ul> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về module trong JavaScript. Hy vọng mọi người c&oacute; thể &aacute;p dụng v&agrave;o trong chương tr&igrave;nh của m&igrave;nh. Mọi người h&atilde;y tiếp tục theo d&otilde;i c&aacute;c b&agrave;i tiếp theo v&agrave; cập nhật c&aacute;c b&agrave;i tiếp theo về lập tr&igrave;nh JavaScript tr&ecirc;n <a href="http://tek4.vn">tek4</a> nh&eacute;!</p> <p>P/s: Cảm ơn mọi người đ&atilde; tin tưởng tek4!</p>