2016-01-11 20 views
6

Đây là câu hỏi về quy ước. Tôi mới đến ES6 nhưng tôi đang cố gắng sử dụng hệ thống mô-đun. Được ưa thích/phổ biến hơn để xuất nhiều hàm từ một tệp hoặc xuất một đối tượng chứa các hàm này.Tốt hơn để xuất một đối tượng chứa hàm hoặc chỉ xuất nhiều hàm trong ES6 (Có quy ước không?)

Ví dụ:

utils.js

export function add(num1, num2) { 
    return num1 + num2; 
} 

export function minus(num1, num2) { 
    return num1 - num2; 
} 

và sử dụng nó như thế này:

import {add, minus} from 'utils.js'; 

vs

utils.js

const utils = { 
    add: (num1, num2) => { 
    return num1 + num2; 
    }, 

    minus: (num1, num2) => { 
    return num1 - num2; 
    } 
} 

export default utils; 

Trong tệp utils chứa hàm 50-100, có vẻ như cách thứ hai sẽ là người chiến thắng rõ ràng. Nhưng chỉ có một cái gì đó cảm thấy sai về nó với tôi, và tôi không biết tại sao.

Trả lời

12

Trong tương lai, nó có thể là tốt hơn để xuất khẩu nhiều chức năng, như tree shaking phép module bundlers để loại bỏ mã chết dựa vào việc nó được nhập khẩu hay không.

Nếu bạn xuất một đối tượng lớn, không phải lúc nào cũng có thể sử dụng phân tích tĩnh để cho biết cần giữ gìn chức năng nào và có thể loại bỏ an toàn.

Nếu bạn xuất nhiều hàm được đặt tên, thì trình bao gói mô-đun có thể phân tích AST rồi danh sách trắng một cách an toàn các hàm bạn đang thực sự nhập.

9

Nếu bạn có như bạn nói 50-100 chức năng mà bạn muốn để lộ thông qua utils của bạn tập tin sau đó tôi muốn nói đi với kim ngạch xuất khẩu tên

export function add() {} 

Kể từ khác mỗi khi nhập khẩu utils sẽ mất nơi bạn muốn nhập tất cả các chức năng. Điều này có thể là những gì bạn muốn đôi khi nhưng rất có thể sẽ chỉ có một số ít các chức năng có thể sử dụng cho bất kỳ mô-đun nhất định nào. Nếu bạn muốn tất cả các chức năng đơn giản import * as utils from './utils'; sẽ đủ.

Tuy nhiên, không có gì không nói rằng bạn có thể sử dụng cả hai mẫu nếu bạn muốn bảo vệ an toàn chống lại nó.

export function add() {}; 

const utils = { 
    add: add 
}; 
export default utils; 

Trên đây vừa hợp lệ vừa khá phổ biến.

Chỉ cần nhớ là Babel 6.x khi phát triển thư viện bằng cách sử dụng export default sẽ thực sự tạo đối tượng (đúng cách) chứa thuộc tính default mà đối tượng đã xuất của bạn sẽ được đính kèm.

import utils from './utils'; 

console.log(utils); 
// { default: yourUtilsObject } 
+1

Cảm ơn bạn! Bạn đã cho tôi chính xác lời giải thích mà tôi đang tìm kiếm. Tôi đã được bạn sử dụng cú pháp đầu tiên và tôi nghĩ rằng tôi sẽ tiếp tục nó. Không biết về điều mặc định. Cảm ơn vì điều đó. – charrondev

Các vấn đề liên quan