Serials Javascript Style Guide – Modules

Modules

10.1 Use them

Luôn sử dụng module (import/export).

Tại sao ư? Modules là tương lại vì vậy hãy bắt đầu sử dụng ngay bây giờ.

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import { es6 } from './AirbnbStyleGuide';
export default es6;

10.2 No wildcard

Không sử dụng wildcard imports.

Tại sao ư? Điều này đảm bảo bạn có 1 default export duy nhất.

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

10.3 No export from import

Không export trực tiếp từ import.

Tại sao ư? Một dòng là ngắn gọn đấy nhưng để cho nhất quán thì hãy tách biệt các thành phần cần import và export ra.

// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';

// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;

10.4 No duplicate imports

eslint: no-duplicate-imports

Tại sao ư? Sẽ rất khó maintain nếu như import nhiều lần từ cùng 1 path.

// bad
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';

// good
import foo, { named1, named2 } from 'foo';

// good
import foo, {
  named1,
  named2,
} from 'foo';

10.5 No mutable exports

Không export các giá trị có thể thay đổi được. eslint: import/no-mutable-exports

Tại sao ư? Nói chung là nên tránh sự thay đổi để dễ maintain và tránh bug. Tốt nhất chỉ nên export các tham chiếu hằng.

// bad
let foo = 3;
export { foo };

// good
const foo = 3;
export { foo };

10.6 Prefer default export

Nếu mà một module chỉ có 1 export thì khuyến khích sử dụng default export. eslint: import/prefer-default-export

Tại sao ư? Nó dễ đọc và dễ maintain.

// bad
export function foo() {}

// good
export default function foo() {}

10.7 Import first

eslint: import/first

Tại sao ư? Vì import ưu tiên sử dụng nên hãy để ở trên đầu tránh các bug không mong muốn.

// bad
import foo from 'foo';
foo.init();

import bar from 'bar';

// good
import foo from 'foo';
import bar from 'bar';

foo.init();

10.8 Multiline imports over newlines

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';

// good
import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';

10.9 No webpack loader syntax

Không load Webpack khi import. eslint: import/no-webpack-loader-syntax

Tại sao ư? Vì nếu sử dụng cú pháp Webpack trong khi import sẽ ghép mã tới 1 đóng gói module. Khuyến khích sử dụng cú pháp tải trong file webpack.config.js.

// bad
import fooSass from 'css!sass!foo.scss';
import barCss from 'style!css!bar.css';

// good
import fooSass from 'foo.scss';
import barCss from 'bar.css';

Tổng hợp Serial Javascript Style Guide