Hướng dẫn how do you implement modules in javascript? - làm thế nào để bạn triển khai các mô-đun trong javascript?

Một mô -đun là một hàm hoặc một nhóm các chức năng tương tự. Chúng được nhóm lại với nhau trong một tệp và chứa mã để thực thi một tác vụ cụ thể khi được gọi vào một ứng dụng lớn hơn.

Bạn tạo các mô -đun để tổ chức và cấu trúc cơ sở mã của bạn tốt hơn. Bạn có thể sử dụng chúng để chia các chương trình lớn thành các phần mã nhỏ hơn, dễ quản lý hơn và độc lập hơn, thực hiện một hoặc một vài nhiệm vụ liên quan.

Các mô -đun nên được:

1. Độc lập/khép kín: Một mô-đun phải tách rời khỏi các phụ thuộc khác càng tốt. A module has to be as detached from other dependencies as possible.
2. Cụ thể: Một mô -đun cần có khả năng thực hiện một hoặc một nhóm các tác vụ liên quan. Bản chất cốt lõi của việc tạo ra chúng ở nơi đầu tiên là tạo ra các chức năng riêng biệt. Một mô -đun, một (loại) nhiệm vụ. A module needs to be able to perform a single or a related group of tasks. The core essence of creating them in the first place is to create separate functionalities. One module, one (kind of) task.
3. Có thể tái sử dụng: Một mô -đun phải dễ dàng tích hợp vào các loại chương trình khác nhau để thực hiện nhiệm vụ của mình. A module has to be easy to integrate into various kinds of programs to perform its task.

Để giải thích rõ hơn, hãy để tôi cho bạn một sự tương tự:

Giả sử chúng ta muốn xây dựng một ngôi nhà khổng lồ từ mặt đất lên. Tất cả các công cụ chúng ta cần để thiết lập tòa nhà đều được đóng đinh chỉ trong một phòng.

Trong tình huống như vậy, việc tổ chức các công cụ theo đúng cách để chúng ta có thể bắt đầu xây dựng sẽ khó khăn.

Thay vì có các phụ thuộc riêng biệt được cắm vào chỉ trong một phòng, thay vào đó chúng ta nên tổ chức từng bộ công cụ liên quan và nhóm chúng vào các phòng khác nhau. Mỗi phòng là độc lập và khép kín với các công cụ giải quyết các nhiệm vụ cụ thể.

Chúng tôi có thể đưa ra các nhãn như: "Những công cụ này là để lợp", "những công cụ này là để đặt gạch", "những công cụ này là để đào nền", v.v."these tools are for roofing", "these tools are for brick laying", "these tools are for foundation digging" and so on.

Bất cứ khi nào chúng tôi muốn một công cụ thực hiện một nhiệm vụ cụ thể, chúng tôi sẽ biết chính xác nơi tìm thấy nó. Bằng cách đó, mọi thứ được tổ chức và định vị hơn nhiều.

Ngoài ra, giả sử chúng tôi đã xây dựng ngôi nhà và sau đó quyết định xây dựng một cái gì đó khác biệt. Chúng tôi vẫn sẽ có cùng một bộ công cụ. Điều này thực thi nguyên tắc tái sử dụng. Các mô-đun có thể tái sử dụng vì chúng khép kín.reusability. Modules are reusable because they are self-contained.

Ví dụ về một mô -đun

Bây giờ trong bối cảnh của mã, các mô -đun là rất quan trọng.

Hãy xem xét một minh họa đơn giản hóa này với ứng dụng thương mại điện tử cho phép mọi người và doanh nghiệp bán sản phẩm trực tuyến. Chương trình này thường sẽ bao gồm hai hoặc nhiều nhiệm vụ không liên quan. Ví dụ,

• một chương trình tạo tài khoản,
• một chương trình để xác nhận thông tin,
• Một chương trình khác để xử lý thanh toán
• Một chương trình khác để tính toán xếp hạng người dùng

và như thế.

Thay vì có tất cả các chương trình không liên quan đó cùng nhau trong một mô -đun/tệp, việc tạo một số tệp hoặc mô -đun, tốt hơn là tạo ra một số tệp hoặc mô -đun, cho mỗi tác vụ đó. Trong trường hợp như vậy, các mô -đun trở thành phụ thuộc.

Sau đó, từ ứng dụng hoặc chương trình chính, bạn chỉ cần nhập/tải các phụ thuộc (tức là các mô -đun bạn cần) và thực hiện chúng cho phù hợp. Kết quả là, ứng dụng chính của bạn trở nên sạch hơn và tối thiểu hơn.

Giả sử bạn cần xử lý thanh toán trong một số ứng dụng khác trong cơ sở mã, ví dụ, việc sử dụng lại chức năng tương tự rất dễ dàng. Không cần sao chép và dán hoặc mã hóa một chức năng mới từ đầu.

Một mô -đun trong JavaScript chỉ là một tệp chứa mã liên quan.

Trong JavaScript, chúng tôi sử dụng các từ khóa import và export để chia sẻ và nhận các chức năng tương ứng trên các mô -đun khác nhau.

• Từ khóa export được sử dụng để tạo một biến, hàm, lớp hoặc đối tượng & nbsp; có thể truy cập vào các mô -đun khác. Nói cách khác, nó trở thành một mã công cộng.
• Từ khóa import được sử dụng để mang mã công khai từ một mô -đun khác.

Chúng ta hãy xem một ví dụ đơn giản về điều này:

function getPower(decimalPlaces) {
	return 10 ** decimalPlaces;
}

function capitalize(word) {
	return word[0].toUpperCase() + word.slice(1);
}

function roundToDecimalPlace(number, decimalPlaces = 2) {
	const round = getPower(decimalPlaces);
	return Math.round(number * round) / round;
}

export { capitalize, roundToDecimalPlace };

Mô -đun này có ba chức năng được xác định trong đó:

• import { capitalize, roundToDecimalPlace } from './main';
  
  function displayTotal(name, total) {
  	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
  }
  
  displayTotal('kingsley', 20.4444444);
  // "Kingsley, your total cost is: 20.44"
  
  export { displayTotal };

  2: Hàm này có được sức mạnh của một số

• import { capitalize, roundToDecimalPlace } from './main';
  
  function displayTotal(name, total) {
  	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
  }
  
  displayTotal('kingsley', 20.4444444);
  // "Kingsley, your total cost is: 20.44"
  
  export { displayTotal };

  3: Chức năng này viết hoa chữ cái đầu tiên trong một từ

• import { capitalize, roundToDecimalPlace } from './main';
  
  function displayTotal(name, total) {
  	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
  }
  
  displayTotal('kingsley', 20.4444444);
  // "Kingsley, your total cost is: 20.44"
  
  export { displayTotal };

  4: Hàm này làm tròn một số nhất định cho một số vị trí thập phân được chỉ định.

Vào cuối tệp, bạn có thể thấy rằng hai trong số ba chức năng đã được xuất. Nói cách khác, chúng trở thành các chức năng công cộng có thể được sử dụng bởi bất kỳ kịch bản nào khác.

Để xuất hai chức năng trong số ba chức năng, bạn sử dụng từ khóa export, theo sau là một đối tượng chứa các chức năng bạn muốn có thể truy cập được. Khi bạn làm điều này, các chức năng có thể được truy cập bởi bất kỳ chương trình nào trong cơ sở mã đó yêu cầu chúng.

Hãy xem cách chúng ta có thể sử dụng chúng:

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

Mô-đun

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

Chúng tôi đã làm điều này bằng cách sử dụng từ khóa import theo sau tên của các chức năng chúng tôi muốn nhập từ mô -đun, trong trường hợp của chúng tôi là

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

Điều gì sẽ xảy ra nếu bạn chỉ muốn nhập chức năng

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

Đơn giản - chỉ nhập

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

import { capitalize } from './main';

function warn(name) {
	return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

N/B: Hiểu cách thức cấu trúc tệp hoạt động rất quan trọng khi làm việc với các mô -đun. Trong ví dụ trên, chúng tôi chỉ đơn giản là nhập từ một tệp tồn tại trong cùng một thư mục, đó là lý do tại sao chúng tôi sử dụng ký hiệu

import { capitalize } from './main';

function warn(name) {
	return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

5.

Nếu bạn muốn nhập mọi chức năng công khai từ một mô -đun khác, hãy sử dụng từ khóa Asterisk

import { capitalize } from './main';

function warn(name) {
	return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

import * as mainfunctions from './main';

function warn(name) {
return `I am warning you, ${mainfunctions.capitalize(name)}!`;
}
warn('kingsley');
// I am warning you, Kingsley!

export { warn };

Mẹo: Nếu bạn đang nhập mọi thứ từ một mô-đun, bạn nên sử dụng Asterisk thay vì đánh vần rõ ràng tất cả các chức năng từng chức năng.: If you're importing everything from a module, you should use the asterisk instead of explicitly spelling out all the functions one-by-one.

Bạn có thể nhận thấy từ khóa

import { capitalize } from './main';

function warn(name) {
	return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

import { capitalize } from './main';

function warn(name) {
	return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

Cho đến nay, chúng tôi chỉ xem xét các ví dụ trong đó xuất khẩu xảy ra ở cuối tệp. Nhưng bạn có thể xuất bằng một hàm, biến hoặc lớp bằng cách đăng ký từ khóa export ngay trước định nghĩa của nó, như vậy:

function getPower(decimalPlaces) {
	return 10 ** decimalPlaces;
}

export function capitalize(word) {
	return word[0].toUpperCase() + word.slice(1);
}

export function roundToDecimalPlace(number, decimalPlaces = 2) {
	const round = getPower(decimalPlaces);
	return Math.round(number * round) / round;
}

Nếu bạn so sánh điều này với ví dụ đầu tiên, bạn sẽ nhận thấy sự khác biệt cú pháp này:

• Trong ví dụ đầu tiên, từ khóa export đã được sử dụng để xuất hai hàm ở cuối tập lệnh. Trong ví dụ trên, từ khóa export được gắn vào cả hai chức năng khi chúng được xác định.

Tuy nhiên, cả hai đều cung cấp cùng một kết quả:

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

Xuất khẩu mặc định

Nếu bạn muốn xuất cả ba chức năng nhưng có ý định biến một trong số chúng là mặc định (có lẽ vì bạn rất có thể sử dụng chức năng duy nhất đó), bạn chỉ cần sử dụng từ khóa

import * as mainfunctions from './main';

function warn(name) {
return `I am warning you, ${mainfunctions.capitalize(name)}!`;
}
warn('kingsley');
// I am warning you, Kingsley!

export { warn };

Từ khóa mặc định làm cho việc nhập một chức năng dễ dàng hơn. Hãy xem xét ví dụ sau:

export function getPower(decimalPlaces) {
	return 10 ** decimalPlaces;
	}

export default function capitalize(word) {
	return word[0].toUpperCase() + word.slice(1);
	}

export function roundToDecimalPlace(number, decimalPlaces = 2) {
	const round = getPower(decimalPlaces);
	return Math.round(number * round) / round;
	}

Như bạn có thể thấy, chúng tôi đã thực hiện

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

Giả sử chúng tôi muốn nhập chức năng

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
	return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };

import capitalize from './main';

function warn(name) {
	return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

Nếu bạn muốn nhập chức năng mặc định cùng với bất kỳ chức năng nào khác, bạn sẽ trộn hàm 'mặc định' trần 'với các chức năng khác trong niềng răng xoăn:

import capitalize, { getPower } from './main';

function warn(name) {
	return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

Gói lên

Các mô-đun là độc lập và khép kín các đoạn mã. Bạn tạo chúng bằng cách chia một chương trình lớn hơn thành các phần logic hoặc phụ thuộc.

Các mô -đun nên độc lập, chuyên môn và có thể tái sử dụng.

Bạn sử dụng các từ khóa import và export để trao đổi chức năng giữa các mô -đun trong JavaScript.

Bạn sử dụng từ khóa

import * as mainfunctions from './main';

function warn(name) {
return `I am warning you, ${mainfunctions.capitalize(name)}!`;
}
warn('kingsley');
// I am warning you, Kingsley!

export { warn };

Với điều này, chúng tôi đã đề cập đến những điều cơ bản của các mô -đun trong JavaScript.

Tôi hy vọng bạn có một cái gì đó có giá trị từ bài viết này. Tôi viết các bài viết liên quan đến lập trình mỗi tuần trên blog cá nhân của tôi

Cảm ơn bạn đã đọc.

P/S: Nếu bạn đang học JavaScript, tôi đã tạo một ebook dạy 50 chủ đề trong JavaScript với các ghi chú kỹ thuật số vẽ tay. Kiểm tra nó ở đây.: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.