Hiện tại, **ES Modules** đã được [support bởi khá nhiều các trình duyệt](https://caniuse.com/#feat=es6-module). Điều đó nghĩa là bạn có thể sử dụng ES Modules trực tiếp trên trình duyệt mà không cần phải cài đặt Node.js cùng với các công cụ như [Browserify](http://browserify.org/), [RequireJS](https://requirejs.org/), [Webpack](https://webpack.js.org/),... Sau đây, mình sẽ tìm hiểu về ES Modules và cách sử dụng nó trực tiếp trên trình duyệt. Mời bạn theo dõi bài viết! ## Cơ bản về ES Modules ES Modules (hay còn gọi là "JavaScript Modules", "JS Modules" hay "ECMAScript modules") là một tính năng mới của trình duyệt cho phép bạn làm việc với modules. Nhờ vậy, bạn có thể chia nhỏ chương trình ra thành các modules, với mỗi module có một chức năng riêng biệt. Trong một module, bạn có thể sử dụng từ khoá [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) để export bất kỳ kiểu dữ liệu nào như: biến số với var, let hay const, class, [function](/bai-viet/javascript/ham-trong-javascript),... Sau đó, bạn sử dụng từ khoá [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) để sử dụng chúng ở một file khác. Sử dụng ES Modules có một số lợi ích như: - Giúp module hoá chương trình. Qua đó, việc xây dựng, kiểm thử và bảo trì code sẽ tốt hơn. - Hỗ trợ **dynamic import()** giúp download modules khi cần thiết. Nhờ vậy, thời gian load trang sẽ giảm xuống. Nói vậy thì cách sử dụng ES Modules có gì khác với JavaScript thông thường? ## ES Modules với JavaScript thông thường Bởi vì, ES Modules là một tính năng mới (từ ES6) dành cho các trình duyệt hiện đại. Do đó, nó luôn luôn được sử dụng ở chế độ [Strict mode](/bai-viet/javascript/mo-so-loi-loi-strict-mode). Tiếp theo, comment code theo kiểu HTML không được support ở modules, mặc dù nó vẫn hợp lệ ở JS thông thường. Ví dụ: ```js /* * Sử dụng comment kiểu HTML trong JavaScript thông thường, * không sai, nhưng không nên dùng. */ const x = 42;

ES6 Modules trên trình duyệt

Bình luận