Giới thiệu về Hệ thống mô-đun trong JavaScript

Giới thiệu về Hệ thống mô-đun trong JavaScript

Khái niệm về mô-đun xuất phát từ mô hình lập trình mô-đun. Mô hình này đề xuất rằng phần mềm nên được bao gồm các thành phần riêng biệt, có thể hoán đổi cho nhau được gọi là “mô-đun” bằng cách chia nhỏ các chức năng của chương trình thành các tệp độc lập có thể hoạt động riêng biệt hoặc được kết hợp trong một ứng dụng.





LÀM VIDEO TRONG NGÀY

Mô-đun là một tệp độc lập đóng gói mã để triển khai một số chức năng nhất định và thúc đẩy khả năng tái sử dụng và tổ chức.



Ở đây bạn sẽ trình bày về các hệ thống mô-đun được sử dụng trong các ứng dụng JavaScript, bao gồm mẫu mô-đun, hệ thống mô-đun CommonJS được sử dụng trong hầu hết các ứng dụng Node.js và hệ thống Mô-đun ES6.





Mô-đun

Trước khi giới thiệu các mô-đun JavaScript gốc, mẫu thiết kế mô-đun được sử dụng như một hệ thống mô-đun để phân bổ các biến và chức năng vào một tệp duy nhất.

Điều này được thực hiện bằng cách sử dụng các biểu thức hàm được gọi ngay lập tức, thường được gọi là IIFE. IIFE là một chức năng không thể sử dụng lại chạy ngay sau khi nó được tạo.



Đây là cấu trúc cơ bản của IIFE:

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

Khối mã ở trên mô tả IIFE được sử dụng trong ba ngữ cảnh khác nhau.



IIFE được sử dụng vì các biến được khai báo bên trong một hàm được phạm vi đến hàm, khiến chúng chỉ có thể truy cập bên trong hàm và vì các hàm cho phép bạn trả về dữ liệu (làm cho chúng có thể truy cập công khai).

Ví dụ:



const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar");

Khối mã ở trên là một ví dụ về cách các mô-đun được tạo trước khi giới thiệu các mô-đun JavaScript gốc.

Khối mã trên chứa IIFE. IIFE chứa một chức năng mà nó có thể truy cập được bằng cách trả về. Tất cả các biến được khai báo trong IIFE đều được bảo vệ khỏi phạm vi toàn cục. Do đó, phương pháp ( sayName ) chỉ có thể truy cập thông qua chức năng công cộng, callSayName .

Lưu ý rằng IIFE được lưu vào một biến, foo . Điều này là do, nếu không có biến trỏ đến vị trí của nó trong bộ nhớ, các biến sẽ không thể truy cập được sau khi tập lệnh chạy. Mô hình này có thể do JavaScript đóng .

Hệ thống mô-đun CommonJS

Hệ thống mô-đun CommonJS là một định dạng mô-đun được nhóm CommonJS xác định để giải quyết các vấn đề về phạm vi JavaScript bằng cách thực thi từng mô-đun trong không gian tên của nó.

Hệ thống mô-đun CommonJS hoạt động bằng cách buộc các mô-đun phải xuất rõ ràng các biến mà chúng muốn hiển thị cho các mô-đun khác.

Hệ thống mô-đun này được tạo ra cho JavaScript phía máy chủ (Node.js) và như vậy, không được hỗ trợ theo mặc định trong các trình duyệt.

Để triển khai các mô-đun CommonJS trong dự án của bạn, trước tiên bạn phải khởi tạo NPM trong ứng dụng của mình bằng cách chạy:

npm init -y

Các biến được xuất sau hệ thống mô-đun CommonJS có thể được nhập như vậy:

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module");

Các mô-đun được nhập vào CommonJS bằng cách sử dụng yêu cầu câu lệnh đọc tệp JavaScript, thực thi tệp đã đọc và trả về hàng xuất khẩu sự vật. Các hàng xuất khẩu đối tượng chứa tất cả các xuất hiện có trong mô-đun.

Bạn có thể xuất một biến sau hệ thống mô-đun CommonJS bằng cách sử dụng các xuất được đặt tên hoặc xuất mặc định.

Xuất khẩu được đặt tên

Xuất khẩu đã đặt tên là xuất khẩu được xác định bằng tên mà chúng đã được chỉ định. Xuất khẩu được đặt tên cho phép xuất nhiều mô-đun, không giống như xuất mặc định.

Ví dụ:

làm thế nào để spam một số email ẩn danh 
//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

Trong khối mã ở trên, bạn đang xuất hai hàm được đặt tên ( myExport và khácXuất khẩu ) bằng cách gắn chúng vào hàng xuất khẩu sự vật.

Tương tự, bạn có thể xuất các hàm như sau:

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
};

Trong khối mã ở trên, bạn đặt hàng xuất khẩu phản đối các chức năng được đặt tên. Bạn chỉ có thể chỉ định hàng xuất khẩu phản đối một đối tượng mới thông qua mô-đun sự vật.

Mã của bạn sẽ gặp lỗi nếu bạn cố gắng thực hiện theo cách này:

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

Có hai cách bạn có thể nhập các bản xuất đã đặt tên:

1. Nhập tất cả các bản xuất dưới dạng một đối tượng duy nhất và truy cập chúng một cách riêng biệt bằng cách sử dụng ký hiệu dấu chấm .

Ví dụ:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. Giảm cơ cấu xuất khẩu từ hàng xuất khẩu sự vật.

Ví dụ:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

Một điều phổ biến trong tất cả các phương pháp nhập, chúng phải được nhập bằng chính tên mà chúng đã được xuất.

Xuất mặc định

Xuất mặc định là xuất được xác định bằng bất kỳ tên nào bạn chọn. Bạn chỉ có thể có một lần xuất mặc định cho mỗi mô-đun.

Ví dụ:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo;

Trong khối mã ở trên, bạn đang xuất một lớp ( Foo ) bằng cách chỉ định lại hàng xuất khẩu phản đối nó.

Nhập các bản xuất mặc định tương tự như nhập các bản xuất đã đặt tên, ngoại trừ việc bạn có thể sử dụng bất kỳ tên nào bạn chọn để nhập chúng.

Ví dụ:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar();

Trong khối mã ở trên, xuất mặc định được đặt tên là Quán ba , mặc dù bạn có thể sử dụng bất kỳ tên nào mà bạn chọn.

Hệ thống mô-đun ES6

Hệ thống mô-đun ECMAScript Harmony, thường được gọi là mô-đun ES6, là hệ thống mô-đun JavaScript chính thức.

Các mô-đun ES6 được hỗ trợ bởi các trình duyệt và máy chủ, mặc dù bạn yêu cầu một chút cấu hình trước khi sử dụng chúng.

Trong các trình duyệt, bạn phải chỉ định loại hình như mô-đun trong thẻ nhập tập lệnh.

Như vậy:

//index.html 
<script src="./app.js" type="module"></script>

Trong Node.js, bạn phải đặt loại hình đến mô-đun trong của bạn package.json tập tin.

Như vậy:

//package.json 
"type":"module"

Bạn cũng có thể xuất các biến bằng hệ thống mô-đun ES6 bằng cách sử dụng các xuất được đặt tên hoặc xuất mặc định.

Xuất khẩu được đặt tên

Tương tự như các lần nhập được đặt tên trong các mô-đun CommonJS, chúng được xác định bằng tên mà chúng đã được chỉ định và cho phép xuất nhiều lần trên mỗi mô-đun.

Ví dụ:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

Trong hệ thống mô-đun ES6, các bản xuất đã đặt tên được xuất bằng cách đặt trước biến với xuất khẩu từ khóa.

Các bản xuất đã đặt tên có thể được nhập vào một mô-đun khác trong ES6 theo các cách tương tự như CommonJS:

  • Hủy cấu trúc các xuất bắt buộc từ hàng xuất khẩu sự vật.
  • Nhập tất cả các bản xuất dưới dạng một đối tượng và truy cập chúng một cách riêng biệt bằng cách sử dụng ký hiệu dấu chấm.

Dưới đây là một ví dụ về hủy cấu trúc:

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport()

Dưới đây là một ví dụ về nhập toàn bộ đối tượng:

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport()

Trong khối mã ở trên, dấu hoa thị ( * ) có nghĩa là 'tất cả'. Các như từ khóa chỉ định hàng xuất khẩu phản đối chuỗi theo sau nó, trong trường hợp này, foo .

Xuất mặc định

Tương tự như các bản xuất mặc định trong CommonJS, chúng được xác định bằng bất kỳ tên nào bạn chọn và bạn chỉ có thể có một bản xuất mặc định cho mỗi mô-đun.

Ví dụ:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Xuất mặc định được tạo bằng cách thêm mặc định từ khóa sau xuất khẩu từ khóa, theo sau là tên của lần xuất.

Nhập các bản xuất mặc định tương tự như nhập các bản xuất đã đặt tên, ngoại trừ việc bạn có thể sử dụng bất kỳ tên nào bạn chọn để nhập chúng.

Ví dụ:

//otherModule.js 
import Bar from "./main.js";

Xuất khẩu hỗn hợp

Tiêu chuẩn mô-đun ES6 cho phép bạn có cả xuất khẩu mặc định và xuất khẩu được đặt tên trong một mô-đun, không giống như CommonJS.

Ví dụ:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Tầm quan trọng của mô-đun

Việc chia mã của bạn thành các mô-đun không chỉ giúp chúng dễ đọc hơn mà còn giúp nó có thể tái sử dụng nhiều hơn và cũng có thể bảo trì được. Các mô-đun trong JavaScript cũng làm cho mã của bạn ít bị lỗi hơn, vì tất cả các mô-đun được thực thi ở chế độ nghiêm ngặt theo mặc định.