Bài 10: Modules trong ES6

Đến tại thời điểm mình viết bài này thì chắc hẳn các bạn cũng đã nhìn thấy ở đâu đó có các dòng lệnh như:

import math from "lib/math"

Nếu bạn không hiểu thì cũng đừng có lo. Đây là một tính năng mới trong ES6 cực kỳ hay và công dụng và nó đã được áp dụng vào rất nhiều các javscript framework hiện nay. Bây giờ chúng ta hãy cùng tìm hiểu về nó.

1, Value Export/Import.

Trước đây khi chúng ta code javascript thì tất cả các file mà có khởi tạo biến, hàm ,… thì các file load sau nó đều có thể sử dụng.

VD: Mình có 3 file.

+ student.js

var student = {
    name: "Vũ Thanh Tài",
    age: 22,
    getName () {
        return this.name;
    }
}

+ main.js

console.log(student.name);

+ index.js

    
    


    
Ấn f12 để xem log nếu có
    
        

Thì khi chạy chương trình lên, chúng ta sẽ thấy object student vẫn được chấp nhận ở trong file main.js.

Nhưng giờ đây với ES6 thì chúng ta cũng đã có thể module hóa code javascript bằng cách sử dụng 2 keyword export và import với cú pháp như sau:

+ export:

export data;

Trong đó: data là những gì bạn muốn xuất ra cho các module khác có thể sử dụng.

+ import:

import name from path;

Trong đó:

• name là biến bạn muốn gán để nhận dữ liệu trả về từ module đó.
• path là đường dẫn chứa module bạn cần import.

Để dễ hiểu hơn thì mời mọi người cùng xem qua các ví dụ sau:

VD:

/*file module.js*/
var getName = function () {
    return "Vũ Thanh Tài";
}
var domain = "https://toidicode.com";
//xuát hàm getName
export getName;
//xuát biến domain
export domain;

/*file main.js*/
import * as name from "module.js";
//gọi hàm getName bên file module.js
name.getName();
//gọi biến domain
name.domain;

Trong ví dụ này dấu * có nghĩa là import tất cả những gì được xuất ra ở file module, còn as là gán cho nó thành một biến nào đó.

VD: Cũng với ví dụ trên, chúng ta cũng có thể chuyển nó về như sau:

/*file module.js*/
var getName = function () {
    return "Vũ Thanh Tài";
}
var domain = "https://toidicode.com";
export {getName, domain}

/*file main.js*/
import {getName, domain} from "module.js";
//gọi hàm getName bên file module.js
getName();
//gọi biến domain
domain;

2, Export default.

Ngoài những cách export như trên thì các bạn cũng có thể export default các giá trị, bằng các thêm keyword default vào ngay sau keyword export.

VD:

/*file module.js*/
var getName = function (name) {
    return name;
}

export default getName;

/*file main.js*/
import name from "module.js";
//gọi hàm getName bên file module.js
name("Vũ Thanh Tài");
//Vũ Thanh Tài

3, Chú ý.

Trên thực tế thì module trong ES6 chưa hỗ trợ chúng ta sử dụng thuần được, mà chúng ta phải sử dụng các library và tools hỗ trợ thêm như:

• systemjs.
• traceur. 
• es6-module-loader.
• …. (tùy sở thích mỗi người).

4, Lời kết.

-Nếu bạn muốn học được các javascript framework bậc cao như angular hay Vue.js,… thì bạn cần phải có kiến thức về module trong ES6.