# ES6 Modules and CommonJS (Oke) Một ví dụ quý hơn vàng :(((
Sử dụng từ khóa import && export trong javascript :(((
index.html
```
Document
```
custom.js
```
// custom.js
export const addTextToBody = text => {
const div = document.createElement('div')
div.textContent = text
document.body.appendChild(div)
}
export class Human {
show() {
console.log("Human: Hello world!")
}
}
```
## Ở đây tôi có sử dụng hai từ khóa mà trước đó tôi tìm mãi không được :))
```
export, import :)
```
Hoặc ví dụ tiếp theo
{% embed url="" %}
{% file src="" %}
## Hướng dẫn sử dụng ECMAScript Module
**Xem thêm các chuyên mục:**
* [Các hướng dẫn ECMAScript, Javascript](https://o7planning.org/vi/12171/ecmascript-javascript)
Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:
* [langlearning.net](http://langlearning.net/)
1- ES Module2- Các cú pháp ES Import3- NodeJS - CommonJS Module4- ES6 Module trong NodeJS4Shares
### 1- ES Module
**ECMAScript 6** giới thiệu **ES6 Module Syntax** giúp các lập trình viên module hóa (modularize) code của họ. Nói một cách đơn giản bạn có thể viết code của bạn trên các tập tin riêng rẽ. Trên tập tin này bạn có thể xuất khẩu ( **export**) những thứ cần thiết dưới dạng các **module**, các tập tin khác có thể nhập khẩu ( **import**) các **module** của tập tin đó để sử dụng.**Module** và **import/export** là ý tưởng tuyệt vời giúp bạn dễ dàng quản lý và bảo trì code trong các ứng dụng lớn. Code mà bạn viết trong một tập tin được bảo hộ chỉ những gì bạn xuất khẩu dưới dạng một **module** mới có thể được truy cập từ một tập tin khác.Để đơn giản, ở đây tôi tạo ra 2 tập tin **es6-module-file.js & es6-file1.js**.
* **es6-module-file.js**: Tập tin này định nghĩa ra các hằng số, hàm, các lớp,... Một vài thứ trong chúng được đóng gói trong cùng một **module** và xuất khẩu **module** này ra bên ngoài.
* **es6-file1.js**: Là một tập tin nhập khẩu một vài **module** của tập tin **es6-module-file.js** để sử dụng.
se6-module-file.js?
| 12345678910111213141516171819202122232425262728293031323334 | `// Constantsconst` `HELLO =` `"Hello Everybody";const` `BYE =` `"Goodbye!";` `// Private function (Do not export this function)function` `doSomething() { console.log("Do Something");}` `// A Functionlet` `sayHello =` `function(name) { if(name) { console.log("Hello "` `+ name); }` `else` `{ console.log(HELLO); }}` `// A Functionlet` `sayGoodbye =` `function(name) { if(name) { console.log("Goodbye "` `+ name); }` `else` `{ console.log(BYE); }}` `// Export a Moduleexport` `{HELLO, BYE, sayHello, sayGoodbye};` `// Export as default Module.// IMPORTANT!!: Allow at most one 'default'export` `default` `{sayHello, sayGoodbye};` |
| ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Tập tin **es6-file1.js** nhập khẩu một vài **module** của tập tin **es6-module-file.js**:es6-file1.js?
| 12345678910 | `// Import *import` `* as myModule from` `'./es6-module-file.js';` `console.log( myModule.HELLO );` `// Hello Everybodyconsole.log( myModule.BYE );` `// Goodbye!` `myModule.sayHello("Tom") ;` `// Hello Tom` `myModule.sayGoodbye("Tom") ;// Goodbye Tom` |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Để thử nghiệm ví dụ, cách đơn giản nhất là tạo một tập tin **HTML**, chẳng hạn **test1.html**:
> Chú ý: Bạn phải sử dụng **\` `` ` Show informations in the Console.` `