Hướng dẫn should i use modules in javascript? - tôi có nên sử dụng các mô-đun trong javascript không?

Một nền tảng về các mô -đun

Các chương trình JavaScript bắt đầu khá nhỏ - hầu hết việc sử dụng trong những ngày đầu là thực hiện các tác vụ kịch bản bị cô lập, cung cấp một chút tương tác với các trang web của bạn khi cần thiết, vì vậy các tập lệnh lớn thường không cần thiết. Nhanh chóng chuyển tiếp một vài năm và giờ đây chúng tôi có các ứng dụng hoàn chỉnh được chạy trong các trình duyệt với rất nhiều JavaScript, cũng như JavaScript được sử dụng trong các bối cảnh khác (ví dụ Node.js).

Do đó, nó đã có ý nghĩa trong những năm gần đây để bắt đầu suy nghĩ về việc cung cấp các cơ chế để chia các chương trình JavaScript thành các mô -đun riêng biệt có thể được nhập khi cần thiết. Node.js đã có khả năng này trong một thời gian dài, và có một số thư viện và khung JavaScript cho phép sử dụng mô-đun (ví dụ: các hệ thống mô-đun chung và AMD khác như RequestJS, và gần đây là Webpack và Babel).

Tin tốt là các trình duyệt hiện đại đã bắt đầu hỗ trợ chức năng mô -đun tự nhiên, và đây là những gì bài viết này là tất cả về. Đây chỉ có thể là một điều tốt-trình duyệt có thể tối ưu hóa việc tải các mô-đun, làm cho nó hiệu quả hơn so với việc phải sử dụng thư viện và thực hiện tất cả các chuyến đi thêm phía máy khách và các chuyến đi tròn thêm.

Việc sử dụng các mô -đun JavaScript bản địa phụ thuộc vào các câu lệnh

/js-examples/module-examples/basic-modules/modules/square.js

/js-examples/module-examples/basic-modules/modules/square.js

Tính tương thích của trình duyệt web

Giới thiệu một ví dụ

Để chứng minh việc sử dụng các mô -đun, chúng tôi đã tạo ra một tập hợp các ví dụ đơn giản mà bạn có thể tìm thấy trên GitHub. Các ví dụ này cho thấy một tập hợp các mô -đun đơn giản tạo ra một phần tử

/js-examples/module-examples/basic-modules/modules/square.js

Đây là những điều khá tầm thường, nhưng đã được giữ một cách có chủ ý đơn giản để chứng minh các mô -đun rõ ràng.

Lưu ý: Nếu bạn muốn tải xuống các ví dụ và chạy chúng cục bộ, bạn sẽ cần chạy chúng thông qua một máy chủ web cục bộ. If you want to download the examples and run them locally, you'll need to run them through a local web server.

Cấu trúc ví dụ cơ bản

Trong ví dụ đầu tiên của chúng tôi (xem các mô-đun cơ bản), chúng tôi có cấu trúc tệp như sau:

index.html
main.js
modules/
    canvas.js
    square.js

Lưu ý: Tất cả các ví dụ trong hướng dẫn này về cơ bản có cùng một cấu trúc; Trên đây sẽ bắt đầu trở nên khá quen thuộc. All of the examples in this guide have basically the same structure; the above should start getting pretty familiar.

Hai mô -đun của thư mục mô -đun được mô tả dưới đây:

• /js-examples/module-examples/basic-modules/modules/square.js
  

  7 - Chứa các chức năng liên quan đến việc thiết lập Canvas:

  • /js-examples/module-examples/basic-modules/modules/square.js
    

    8 - Tạo một khung vẽ với một

    /js-examples/module-examples/basic-modules/modules/square.js
    

    9 và

    const myCanvas = create('myCanvas', document.body, 480, 320);
    const reportList = createReportList(myCanvas.id);
    
    const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
    reportArea(square1.length, reportList);
    reportPerimeter(square1.length, reportList);
    

    0 được chỉ định bên trong một trình bao bọc

    const myCanvas = create('myCanvas', document.body, 480, 320);
    const reportList = createReportList(myCanvas.id);
    
    const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
    reportArea(square1.length, reportList);
    reportPerimeter(square1.length, reportList);
    

    1 với một ID được chỉ định, tự nó được thêm vào bên trong một phần tử cha được chỉ định. Trả về một đối tượng chứa bối cảnh 2D của Canvas và ID của trình bao bọc.

  • const myCanvas = create('myCanvas', document.body, 480, 320);
    const reportList = createReportList(myCanvas.id);
    
    const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
    reportArea(square1.length, reportList);
    reportPerimeter(square1.length, reportList);
    

    2 - Tạo một danh sách không được đặt hàng được thêm vào bên trong một phần tử trình bao bọc được chỉ định, có thể được sử dụng để xuất dữ liệu báo cáo vào. Trả về ID của danh sách.

• const myCanvas = create('myCanvas', document.body, 480, 320);
  const reportList = createReportList(myCanvas.id);
  
  const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
  reportArea(square1.length, reportList);
  reportPerimeter(square1.length, reportList);
  

  3 - chứa:

  • const myCanvas = create('myCanvas', document.body, 480, 320);
    const reportList = createReportList(myCanvas.id);
    
    const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
    reportArea(square1.length, reportList);
    reportPerimeter(square1.length, reportList);
    

    4 - Một hằng số chứa chuỗi 'hình vuông'.

  • const myCanvas = create('myCanvas', document.body, 480, 320);
    const reportList = createReportList(myCanvas.id);
    
    const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
    reportArea(square1.length, reportList);
    reportPerimeter(square1.length, reportList);
    

    5 - Vẽ một hình vuông trên một tấm bạt được chỉ định, với kích thước, vị trí và màu sắc được chỉ định. Trả về một đối tượng chứa kích thước, vị trí và màu của hình vuông.

  • const myCanvas = create('myCanvas', document.body, 480, 320);
    const reportList = createReportList(myCanvas.id);
    
    const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
    reportArea(square1.length, reportList);
    reportPerimeter(square1.length, reportList);
    

    6 - Viết khu vực của một hình vuông vào một danh sách báo cáo cụ thể, với độ dài của nó.

  • const myCanvas = create('myCanvas', document.body, 480, 320);
    const reportList = createReportList(myCanvas.id);
    
    const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
    reportArea(square1.length, reportList);
    reportPerimeter(square1.length, reportList);
    

    7 - Viết chu vi của một hình vuông vào một danh sách báo cáo cụ thể, với độ dài của nó.

Sang một bên - .mjs so với .js

Trong suốt bài viết này, chúng tôi đã sử dụng các tiện ích mở rộng

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

• Nó tốt cho sự rõ ràng, tức là nó làm rõ các tệp nào là mô -đun và cái nào là JavaScript thông thường.
• Nó đảm bảo rằng các tệp mô -đun của bạn được phân tích cú pháp như một mô -đun bởi RunTimes như Node.js và các công cụ xây dựng như Babel.

Tuy nhiên, chúng tôi quyết định tiếp tục sử dụng

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

<script type="module" src="main.js">script>

<script type="module" src="main.js">script>

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

<script type="module" src="main.js">script>

Điều này là OK nếu bạn đang sử dụng một môi trường như vậy hoặc nếu bạn không nhưng bạn biết bạn đang làm gì và có quyền truy cập (tức là bạn có thể định cấu hình máy chủ của mình để đặt đúng

<script type="module" src="main.js">script>

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

Đối với mục đích học tập và tính di động, chúng tôi quyết định giữ

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

Nếu bạn thực sự đánh giá sự rõ ràng của việc sử dụng

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

Nó cũng đáng chú ý rằng:

• Một số công cụ có thể không bao giờ hỗ trợ

  const myCanvas = create('myCanvas', document.body, 480, 320);
  const reportList = createReportList(myCanvas.id);
  
  const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
  reportArea(square1.length, reportList);
  reportPerimeter(square1.length, reportList);
  

  9.
• Thuộc tính

  <script type="module">
    /* JavaScript module code here */
  script>
  

  5 được sử dụng để biểu thị khi một mô -đun được chỉ ra, như bạn sẽ thấy bên dưới.

Xuất các tính năng mô -đun

Điều đầu tiên bạn làm để có quyền truy cập vào các tính năng mô -đun là xuất chúng. Điều này được thực hiện bằng cách sử dụng câu lệnh

/js-examples/module-examples/basic-modules/modules/square.js

Cách dễ nhất để sử dụng nó là đặt nó trước bất kỳ mục nào bạn muốn xuất ra khỏi mô -đun, ví dụ:

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Bạn có thể xuất các chức năng,

<script type="module">
  /* JavaScript module code here */
script>

<script type="module">
  /* JavaScript module code here */
script>

<script type="module">
  /* JavaScript module code here */
script>

/js-examples/module-examples/basic-modules/modules/square.js

Một cách thuận tiện hơn để xuất tất cả các mục bạn muốn xuất là sử dụng một tuyên bố xuất duy nhất ở cuối tệp mô-đun của bạn, sau đó là một danh sách được phân tách bằng dấu phẩy các tính năng bạn muốn xuất được gói trong niềng răng xoăn. Ví dụ:

export { name, draw, reportArea, reportPerimeter };

Nhập các tính năng vào tập lệnh của bạn

Khi bạn đã xuất một số tính năng ra khỏi mô -đun của mình, bạn cần nhập chúng vào tập lệnh của mình để có thể sử dụng chúng. Cách đơn giản nhất để làm điều này như sau:

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Bạn sử dụng câu lệnh

/js-examples/module-examples/basic-modules/modules/square.js

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

Tuy nhiên, chúng tôi đã viết đường dẫn khác một chút - chúng tôi đang sử dụng cú pháp DOT (

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

Ví dụ:

/js-examples/module-examples/basic-modules/modules/square.js

trở thành

Bạn có thể thấy những dòng như vậy trong hành động trong

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

Lưu ý: Trong một số hệ thống mô -đun, bạn có thể bỏ qua phần mở rộng tệp và hàng đầu

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

/* render.js */
document.getElementById("main").innerText = text;

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

/* render.js */
document.getElementById("main").innerText = text;

Khi bạn đã nhập các tính năng vào tập lệnh của mình, bạn có thể sử dụng chúng giống như chúng được xác định bên trong cùng một tệp. Sau đây được tìm thấy trong

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

Lưu ý: Mặc dù các tính năng đã nhập có sẵn trong tệp, nhưng chúng chỉ đọc các chế độ xem của tính năng được xuất. Bạn không thể thay đổi biến đã được nhập, nhưng bạn vẫn có thể sửa đổi các thuộc tính tương tự như

<script type="module">
  /* JavaScript module code here */
script>

<script type="module">
  /* JavaScript module code here */
script>

<script type="module">
  /* JavaScript module code here */
script>

<script type="module">
  /* JavaScript module code here */
script>

Áp dụng mô -đun cho HTML của bạn

Bây giờ chúng tôi chỉ cần áp dụng mô -đun

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

Trước hết, bạn cần đưa

/* render.js */
document.getElementById("main").innerText = text;

/* render.js */
document.getElementById("main").innerText = text;

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

<script type="module" src="main.js">script>

Bạn cũng có thể nhúng tập lệnh của mô -đun trực tiếp vào tệp HTML bằng cách đặt mã JavaScript trong phần thân của phần tử

/* render.js */
document.getElementById("main").innerText = text;

<script type="module">
  /* JavaScript module code here */
script>

Tập lệnh mà bạn nhập các tính năng mô-đun về cơ bản đóng vai trò là mô-đun cấp cao nhất. Nếu bạn bỏ qua nó, ví dụ, Firefox cung cấp cho bạn một lỗi của "Cú pháp: Nhập khai báo khai chỉ có thể xuất hiện ở cấp cao nhất của một mô -đun".

Bạn chỉ có thể sử dụng các câu lệnh

/js-examples/module-examples/basic-modules/modules/square.js

/js-examples/module-examples/basic-modules/modules/square.js

Sự khác biệt khác giữa các mô -đun và tập lệnh tiêu chuẩn

• Bạn cần chú ý đến thử nghiệm cục bộ - nếu bạn cố gắng tải tệp HTML cục bộ (tức là với URL

  export const name = 'square';
  
  export function draw(ctx, length, x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, length, length);
  
    return { length, x, y, color };
  }
  

  01), bạn sẽ gặp lỗi CORS do các yêu cầu bảo mật mô -đun JavaScript. Bạn cần thực hiện thử nghiệm của bạn thông qua một máy chủ.
• Ngoài ra, lưu ý rằng bạn có thể nhận được các hành vi khác với các phần của tập lệnh được xác định bên trong các mô -đun trái ngược với các tập lệnh tiêu chuẩn. Điều này là do các mô -đun sử dụng chế độ nghiêm ngặt tự động.
• Không cần phải sử dụng thuộc tính

  export const name = 'square';
  
  export function draw(ctx, length, x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, length, length);
  
    return { length, x, y, color };
  }
  

  02 (xem

  /* render.js */
  document.getElementById("main").innerText = text;
  

  6 thuộc tính) khi tải tập lệnh mô -đun; Các mô -đun được hoãn lại tự động.
• Các mô -đun chỉ được thực hiện một lần, ngay cả khi chúng đã được tham chiếu trong nhiều thẻ

  /* render.js */
  document.getElementById("main").innerText = text;
  

  6.
• Cuối cùng nhưng không kém phần quan trọng, chúng ta hãy làm rõ điều này - các tính năng mô -đun được nhập vào phạm vi của một tập lệnh duy nhất - chúng không có sẵn trong phạm vi toàn cầu. Do đó, bạn sẽ chỉ có thể truy cập các tính năng đã nhập trong tập lệnh mà chúng được nhập vào và bạn sẽ không thể truy cập chúng từ bảng điều khiển JavaScript, chẳng hạn. Bạn vẫn sẽ nhận được các lỗi cú pháp được hiển thị trong DevTools, nhưng bạn sẽ không thể sử dụng một số kỹ thuật gỡ lỗi mà bạn có thể dự kiến ​​sẽ sử dụng.

Các biến được xác định bởi mô-đun được xác định theo mô-đun trừ khi được gắn rõ ràng vào đối tượng toàn cầu. Mặt khác, các biến được xác định trên toàn cầu có sẵn trong mô-đun. Ví dụ: với mã sau:

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

/* render.js */
document.getElementById("main").innerText = text;

Trang vẫn sẽ hiển thị

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Xuất xuất mặc định so với xuất khẩu được đặt tên

Chức năng mà chúng tôi đã xuất cho đến nay bao gồm các lần xuất được đặt tên - mỗi mặt hàng (có thể là một hàm,

<script type="module">
  /* JavaScript module code here */
script>

<script type="module">
  /* JavaScript module code here */
script>

Ngoài ra còn có một loại xuất khẩu được gọi là xuất khẩu mặc định - điều này được thiết kế để dễ dàng có chức năng mặc định được cung cấp bởi một mô -đun và cũng giúp các mô -đun JavaScript tương tác với các hệ thống mô -đun AMD và AMD hiện có (như được giải thích độc đáo trong ES6 trong Độ sâu: Mô -đun của Jason Orendorff; tìm kiếm "Xuất mặc định").default export — this is designed to make it easy to have a default function provided by a module, and also helps JavaScript modules to interoperate with existing CommonJS and AMD module systems (as explained nicely in ES6 In Depth: Modules by Jason Orendorff; search for "Default exports").

Hãy xem xét một ví dụ khi chúng tôi giải thích cách thức hoạt động của nó. Trong các mô-đun cơ bản của chúng tôi

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Lưu ý việc thiếu niềng răng xoăn.

Thay vào đó, chúng tôi có thể dự phòng

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Trong tệp

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Một lần nữa, lưu ý việc thiếu niềng răng xoăn. Điều này là do chỉ có một xuất khẩu mặc định được phép cho mỗi mô -đun và chúng tôi biết rằng

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Tránh đặt tên xung đột

Cho đến nay, các mô -đun vẽ hình dạng vải của chúng tôi dường như đang hoạt động tốt. Nhưng điều gì xảy ra nếu chúng ta cố gắng thêm một mô -đun liên quan đến việc vẽ một hình dạng khác, như một vòng tròn hoặc hình tam giác? Những hình dạng này có thể sẽ có các chức năng liên quan như

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

May mắn thay, có một số cách để có được xung quanh này. Chúng tôi sẽ xem xét những điều này trong các phần sau.

Đổi tên nhập khẩu và xuất khẩu

Bên trong niềng xoăn

/js-examples/module-examples/basic-modules/modules/square.js

/js-examples/module-examples/basic-modules/modules/square.js

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Vì vậy, ví dụ, cả hai điều sau đây sẽ làm cùng một công việc, mặc dù theo một cách hơi khác:

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Hãy xem xét một ví dụ thực tế. Trong thư mục đổi tên của chúng tôi, bạn sẽ thấy cùng một hệ thống mô -đun như trong ví dụ trước, ngoại trừ việc chúng tôi đã thêm các mô -đun

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Bên trong mỗi mô -đun này, chúng tôi có các tính năng có cùng tên được xuất, và do đó, mỗi mô -đun có cùng một câu lệnh

/js-examples/module-examples/basic-modules/modules/square.js

export { name, draw, reportArea, reportPerimeter };

Khi nhập chúng vào

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Trình duyệt sẽ đưa ra một lỗi như "Cú pháp: REDECLATION của tên nhập" (Firefox).

Thay vào đó, chúng ta cần đổi tên nhập khẩu để chúng là duy nhất:

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Lưu ý rằng bạn có thể giải quyết vấn đề trong các tệp mô -đun thay thế, ví dụ:

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export { name, draw, reportArea, reportPerimeter };

Và nó sẽ hoạt động giống nhau. Phong cách bạn sử dụng là tùy thuộc vào bạn, tuy nhiên có thể có ý nghĩa hơn khi để mã mô -đun của bạn một mình và thực hiện các thay đổi trong nhập khẩu. Điều này đặc biệt có ý nghĩa khi bạn đang nhập từ các mô -đun bên thứ ba mà bạn không có quyền kiểm soát.

Tạo một đối tượng mô -đun

Phương pháp trên hoạt động tốt, nhưng nó hơi lộn xộn và dài dòng. Một giải pháp thậm chí còn tốt hơn là nhập các tính năng của mỗi mô -đun bên trong một đối tượng mô -đun. Mẫu cú pháp sau đây làm điều đó:

export { name, draw, reportArea, reportPerimeter };

Điều này lấy tất cả các xuất khẩu có sẵn bên trong

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export { name, draw, reportArea, reportPerimeter };

Một lần nữa, chúng ta hãy nhìn vào một ví dụ thực tế. Nếu bạn truy cập thư mục đối tượng mô-đun của chúng tôi, bạn sẽ thấy một ví dụ tương tự một lần nữa, nhưng viết lại để tận dụng cú pháp mới này. Trong các mô -đun, xuất khẩu đều ở dạng đơn giản sau:

export { name, draw, reportArea, reportPerimeter };

Mặt khác, nhập khẩu trông như thế này:

export { name, draw, reportArea, reportPerimeter };

Trong mỗi trường hợp, bây giờ bạn có thể truy cập các bản nhập của mô -đun bên dưới tên đối tượng được chỉ định, ví dụ:

export { name, draw, reportArea, reportPerimeter };

Vì vậy, bây giờ bạn có thể viết mã giống như trước đây (miễn là bạn bao gồm các tên đối tượng khi cần) và nhập khẩu là nhiều gọn gàng hơn.

Các mô -đun và các lớp

Như chúng tôi đã gợi ý trước đó, bạn cũng có thể xuất và nhập các lớp; Đây là một tùy chọn khác để tránh xung đột trong mã của bạn và đặc biệt hữu ích nếu bạn đã có mã mô-đun được viết theo kiểu hướng đối tượng.

Bạn có thể thấy một ví dụ về mô -đun vẽ hình dạng của chúng tôi được viết lại với các lớp ES trong thư mục lớp của chúng tôi. Ví dụ, tệp

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

export { name, draw, reportArea, reportPerimeter };

mà sau đó chúng ta xuất khẩu:

Trong

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

export { name, draw, reportArea, reportPerimeter };

Và sau đó sử dụng lớp để vẽ hình vuông của chúng tôi:

export { name, draw, reportArea, reportPerimeter };

Các mô -đun tổng hợp

Sẽ có những lúc bạn sẽ muốn tổng hợp các mô -đun cùng nhau. Bạn có thể có nhiều cấp độ phụ thuộc, nơi bạn muốn đơn giản hóa mọi thứ, kết hợp một số mô -đun con vào một mô -đun cha. Điều này là có thể bằng cách sử dụng cú pháp xuất của các biểu mẫu sau trong mô -đun cha:

export { name, draw, reportArea, reportPerimeter };

Ví dụ, xem thư mục tổng hợp mô-đun của chúng tôi. Trong ví dụ này (dựa trên ví dụ về lớp trước của chúng tôi), chúng tôi đã có một mô -đun bổ sung có tên là

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

const myCanvas = create('myCanvas', document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Trong mỗi mô hình con, xuất khẩu có cùng dạng, ví dụ:

Tiếp theo là phần tổng hợp. Bên trong

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Chúng lấy các lần xuất từ ​​các mô hình con riêng lẻ và hiệu quả chúng có sẵn từ mô -đun

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Lưu ý: Các lần xuất được tham chiếu trong

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Vì vậy, bây giờ trong tệp

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

với dòng đơn sau:

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Tải mô -đun động

Một bổ sung gần đây vào chức năng mô -đun JavaScript là tải mô -đun động. Điều này cho phép bạn tự động tải các mô -đun khi chúng cần thiết, thay vì phải tải mọi thứ lên phía trước. Điều này có một số lợi thế hiệu suất rõ ràng; Hãy đọc tiếp và xem nó hoạt động như thế nào.

Chức năng mới này cho phép bạn gọi

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Hãy xem xét một ví dụ. Trong thư mục mô-đun động-mô-đun động, chúng tôi đã có một ví dụ khác dựa trên ví dụ về các lớp của chúng tôi. Tuy nhiên, lần này chúng tôi không vẽ bất cứ thứ gì trên vải khi tải ví dụ. Thay vào đó, chúng tôi bao gồm ba nút - "Circle", "Square" và "Tam giác" - khi được nhấn, tự động tải mô -đun yêu cầu và sau đó sử dụng nó để vẽ hình dạng liên quan.

Trong ví dụ này, chúng tôi chỉ thực hiện các thay đổi đối với các tệp

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

Trong

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Sau đó, chúng tôi gắn một trình nghe sự kiện vào mỗi nút để khi nhấn, mô -đun có liên quan được tải động và sử dụng để vẽ hình dạng:

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Lưu ý rằng, vì việc thực hiện lời hứa trả về một đối tượng mô -đun, nên lớp sau đó được tạo thành một phân chia của đối tượng, do đó chúng ta cần truy cập vào hàm tạo với

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Một lợi thế khác của nhập khẩu động là chúng luôn có sẵn, ngay cả trong môi trường tập lệnh. Do đó, nếu bạn có thẻ

/* render.js */
document.getElementById("main").innerText = text;

/* render.js */
document.getElementById("main").innerText = text;

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Cấp cao nhất đang chờ đợi

Cấp cao nhất đang chờ đợi là một tính năng có sẵn trong các mô -đun. Điều này có nghĩa là từ khóa

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Chúng ta hãy xem một ví dụ. Bạn có thể tìm thấy tất cả các tệp và mã được mô tả trong phần này trong thư mục

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Đầu tiên chúng tôi sẽ khai báo bảng màu của chúng tôi trong một tệp

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Sau đó, chúng tôi sẽ tạo một mô -đun có tên

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Lưu ý dòng xuất khẩu cuối cùng ở đây.

Chúng tôi đang sử dụng từ khóa

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Hãy đưa mô -đun này vào tệp

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

/js-examples/module-examples/basic-modules/modules/square.js

Chúng tôi sẽ sử dụng

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

/js-examples/module-examples/basic-modules/modules/square.js

Điều này rất hữu ích vì mã trong

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title>
    <link rel="stylesheet" href="" />
  head>
  <body>
    <div id="main">div>
    <script>
      // A var statement creates a global variable.
      var text = "Hello";
    script>
    <script type="module" src="./render.js">script>
  body>
html>

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

/js-examples/module-examples/basic-modules/modules/square.js

export const name = 'square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

Xử lý sự cố

Dưới đây là một vài mẹo có thể giúp bạn nếu bạn gặp khó khăn trong việc làm cho các mô -đun của mình hoạt động. Hãy thêm vào danh sách nếu bạn khám phá thêm!

• Chúng tôi đã đề cập điều này trước đây, nhưng để nhắc lại:

  const myCanvas = create('myCanvas', document.body, 480, 320);
  const reportList = createReportList(myCanvas.id);
  
  const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
  reportArea(square1.length, reportList);
  reportPerimeter(square1.length, reportList);
  

  9 Các tệp cần được tải với loại MIME là

  <script type="module" src="main.js">script>
  

  2 (hoặc một loại khác nhau tương thích với JavaScript, nhưng

  <script type="module" src="main.js">script>
  

  2 được khuyến nghị "Máy chủ phản hồi với loại MIME không phải là JavaScript".
• Nếu bạn cố gắng tải tệp HTML cục bộ (tức là với URL

  export const name = 'square';
  
  export function draw(ctx, length, x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, length, length);
  
    return { length, x, y, color };
  }
  

  01), bạn sẽ gặp lỗi CORS do các yêu cầu bảo mật mô -đun JavaScript. Bạn cần thực hiện thử nghiệm của bạn thông qua một máy chủ. Các trang GitHub là lý tưởng vì nó cũng phục vụ các tệp

  const myCanvas = create('myCanvas', document.body, 480, 320);
  const reportList = createReportList(myCanvas.id);
  
  const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
  reportArea(square1.length, reportList);
  reportPerimeter(square1.length, reportList);
  

  9 với loại MIME chính xác.
• Vì

  const myCanvas = create('myCanvas', document.body, 480, 320);
  const reportList = createReportList(myCanvas.id);
  
  const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
  reportArea(square1.length, reportList);
  reportPerimeter(square1.length, reportList);
  

  9 là một phần mở rộng tệp không chuẩn, một số hệ điều hành có thể không nhận ra nó hoặc cố gắng thay thế nó bằng một thứ khác. Ví dụ: chúng tôi thấy rằng các macOS đã âm thầm thêm vào

  const myCanvas = create('myCanvas', document.body, 480, 320);
  const reportList = createReportList(myCanvas.id);
  
  const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
  reportArea(square1.length, reportList);
  reportPerimeter(square1.length, reportList);
  

  8 vào cuối các tệp

  const myCanvas = create('myCanvas', document.body, 480, 320);
  const reportList = createReportList(myCanvas.id);
  
  const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
  reportArea(square1.length, reportList);
  reportPerimeter(square1.length, reportList);
  

  9 và sau đó tự động ẩn tiện ích mở rộng tệp. Vì vậy, tất cả các tập tin của chúng tôi đã thực sự xuất hiện dưới dạng

  export const name = 'square';
  
  export function draw(ctx, length, x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, length, length);
  
    return { length, x, y, color };
  }
  

  78. Khi chúng tôi tắt tự động ẩn các phần mở rộng tệp và được đào tạo để chấp nhận

  const myCanvas = create('myCanvas', document.body, 480, 320);
  const reportList = createReportList(myCanvas.id);
  
  const square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
  reportArea(square1.length, reportList);
  reportPerimeter(square1.length, reportList);
  

  9, nó vẫn ổn.

Xem thêm

• Sử dụng các mô -đun JavaScript trên web, bởi Addy Osmani và Mathias Bynens
• Mô-đun ES: Một bài đăng trên blog của phim hoạt hình, hacks của Lin Clark
• ES6 theo chiều sâu: Mô -đun, bài đăng trên blog của Jason Orendorff
• Cuốn sách của Axel Rauschmayer Khám phá JS: Mô -đun

• " Trước