Giới thiệu về Mô-đun ES

Mô-đun ES là tiêu chuẩn ECMAScript để làm việc với các mô-đun. Mặc dù Node.js đã sử dụng tiêu chuẩn CommonJS từ nhiều năm nay, nhưng trình duyệt này chưa bao giờ có hệ thống mô-đun, vì mọi quyết định quan trọng như hệ thống mô-đun phải được chuẩn hóa đầu tiên bởi ECMAScript và sau đó được thực hiện

Giới thiệu về Mô-đun ES

Mô-đun ES là tiêu chuẩn ECMAScript để làm việc với các mô-đun.

Trong khiNode.jsđã sử dụng tiêu chuẩn CommonJS trong nhiều năm, trình duyệt chưa bao giờ có hệ thống mô-đun, vì mọi quyết định chính như hệ thống mô-đun phải được chuẩn hóa trước bởi ECMAScript và sau đó được trình duyệt thực hiện.

Quá trình tiêu chuẩn hóa này đã hoàn thành vớiES6và các trình duyệt bắt đầu triển khai tiêu chuẩn này để cố gắng giữ cho mọi thứ được liên kết tốt, hoạt động theo cùng một cách và hiện tại Mô-đun ES được hỗ trợ trong Chrome, Safari, Edge và Firefox (kể từ phiên bản 60).

Các mô-đun rất tuyệt, vì chúng cho phép bạn đóng gói tất cả các loại chức năng và hiển thị chức năng này với các tệp JavaScript khác, dưới dạng thư viện.

ES Modules Support

Cú pháp mô-đun ES

Cú pháp để nhập một mô-đun là:

import package from 'module-name'

trong khi CommonJS sử dụng

const package = require('module-name')

Mô-đun là một tệp JavaScripthàng xuất khẩumột hoặc nhiều giá trị (đối tượng, hàm hoặc biến), sử dụngexporttừ khóa. Ví dụ: mô-đun này xuất một hàm trả về một chuỗi chữ hoa:

chữ hoa.js

export default str => str.toUpperCase()

Trong ví dụ này, mô-đun xác định mộtxuất mặc định, vì vậy nó có thể là một chức năng ẩn danh. Nếu không, nó sẽ cần một cái tên để phân biệt với các mặt hàng xuất khẩu khác.

Hiện nay,bất kỳ mô-đun JavaScript nào kháccó thể nhập chức năng được cung cấp bởi uppercase.js bằng cách nhập nó.

Một trang HTML có thể thêm một mô-đun bằng cách sử dụng<script>gắn thẻ với đặc biệttype="module"thuộc tính:

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

Lưu ý: nhập mô-đun này hoạt động giống như mộtdefertải tập lệnh. Xemtải JavaScript hiệu quả với trì hoãn và không đồng bộ

Điều quan trọng cần lưu ý là bất kỳ tập lệnh nào được tải bằngtype="module"được tải vàochế độ nghiêm ngặt.

Trong ví dụ này,uppercase.jsmô-đun xác định mộtxuất mặc định, vì vậy khi chúng tôi nhập nó, chúng tôi có thể gán cho nó một cái tên mà chúng tôi muốn:

import toUpperCase from './uppercase.js'

và chúng ta có thể sử dụng nó:

toUpperCase('test') //'TEST'

Bạn cũng có thể sử dụng một đường dẫn tuyệt đối để nhập mô-đun, để tham chiếu các mô-đun được xác định trên một miền khác:

import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

Đây cũng là cú pháp nhập hợp lệ:

import { toUpperCase } from '/uppercase.js'
import { toUpperCase } from '../uppercase.js'

Đây không phải là:

import { toUpperCase } from 'uppercase.js'
import { toUpperCase } from 'utils/uppercase.js'

Nó hoặc tuyệt đối, hoặc có./hoặc là/trước tên.

Các tùy chọn nhập / xuất khác

Chúng tôi đã thấy ví dụ này ở trên:

export default str => str.toUpperCase()

Điều này tạo ra một bản xuất mặc định. Tuy nhiên, trong một tệp, bạn có thể xuất nhiều thứ, bằng cách sử dụng cú pháp sau:

const a = 1
const b = 2
const c = 3

export { a, b, c }

Một mô-đun khác có thể nhập tất cả các lần xuất đó bằng

import * from 'module'

Bạn chỉ có thể nhập một vài trong số những lần xuất đó, sử dụngchuyển nhượng cơ cấu:

import { a } from 'module'
import { a, b } from 'module'

Bạn có thể đổi tên bất kỳ lần nhập nào, để thuận tiện, bằng cách sử dụngas:

import { a, b as two } from 'module'

Bạn có thể nhập tệp xuất mặc định và bất kỳ tệp xuất không mặc định nào theo tên, như trong cách nhập React phổ biến này:

import React, { Component } from 'react'

Bạn có thể xem ví dụ về Mô-đun ES tại đây:https://glitch.com/edit/#!/flavio-es-modules-example?path=index.html

CORS

Các mô-đun được tìm nạp bằng cách sử dụngCORS. Điều này có nghĩa là nếu bạn tham chiếu các tập lệnh từ các miền khác, chúng phải có tiêu đề CORS hợp lệ cho phép tải trên nhiều trang web (nhưAccess-Control-Allow-Origin: *)

Điều gì về trình duyệt không hỗ trợ mô-đun?

Sử dụng kết hợptype="module"nomodule:

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

Phần kết luận

Mô-đun ES là một trong những tính năng lớn nhất được giới thiệu trong các trình duyệt hiện đại. Chúng là một phần của ES6 nhưng chặng đường để thực hiện chúng còn dài.

Bây giờ chúng ta có thể sử dụng chúng! Nhưng chúng ta cũng phải nhớ rằng có nhiều mô-đun sẽ ảnh hưởng đến hiệu suất trên các trang của chúng ta, vì đó là một bước nữa mà trình duyệt phải thực hiện trong thời gian chạy.

Webpackcó lẽ sẽ vẫn là một người chơi lớn ngay cả khi ES Modules cập bến trình duyệt, nhưng việc có một tính năng được xây dựng trực tiếp bằng ngôn ngữ như vậy là rất lớn đối với việc thống nhất cách các mô-đun hoạt động phía máy khách và cả trên Node.js.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: