Serials Javascript Style Guide – Naming Conventions

Naming Conventions

Descriptive

Tránh sử dụng tên 1 ký tư, thay vào đó hãy mô tả bằng tên có ý nghĩa. eslint: id-length

// bad
function q() {
  // ...
}

// good
function query() {
  // ...
}

camelCase

Sử dụng camelCase khi đặt tên objects, functions, và instances. eslint: camelcase

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

PascalCase

Chỉ sử dụng PascalCase khi đặt tên constructors hoặc classes. eslint: new-cap

// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

Leading underscore

Không đặt tên với bắt đầu hoặc kết thúc có dấu gạch dưới. eslint: no-underscore-dangle

Tại sao ư? Vì JavaScript không có khái niệm về các điều khoản riêng tư với properties hoặc methods. Mặc dù dấu gạch dưới ở đầu thường quy ước là “private”, trên thực tế, thì toàn bộ lại là public. Việc này có thể khiến các developers khác hiểu sai rằng sẽ không thể thay đổi hoặc việc test là không cần thiết.

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';

// good, in environments where WeakMaps are available
// see https://kangax.github.io/compat-table/es6/#test-WeakMap
const firstNames = new WeakMap();
firstNames.set(this, 'Panda');

Self this

Không gán biến bởi this. Hãy sử dụng hàm mũi tên hoặc Function#bind.

// bad
function foo() {
  const self = this;
  return function () {
    console.log(self);
  };
}

// bad
function foo() {
  const that = this;
  return function () {
    console.log(that);
  };
}

// good
function foo() {
  return () => {
    console.log(this);
  };
}

Filename matches export

Bạn nên đặt tên file trùng với tên mà nó sẽ export default.

// file 1 contents
class CheckBox {
  // ...
}
export default CheckBox;

// file 2 contents
export default function fortyTwo() { return 42; }

// file 3 contents
export default function insideDirectory() {}

// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export

// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly

// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
// ^ supports both insideDirectory.js and insideDirectory/index.js

camelCase default export

Sử dụng camelCase khi bạn export-default function. Tên file nên đồng nhất với tên function.

function makeStyleGuide() {
  // ...
}

export default makeStyleGuide;

PascalCase singleton

Sử dụng PascalCase khi bạn muốn export constructor / class / singleton / function library / bare object.

const AirbnbStyleGuide = {
  es6: {
  },
};

export default AirbnbStyleGuide;

Acronyms and Initialisms

Viết hoa tất cả hoặc viết thường tất cả các từ viết tắt và initialisms.

Tại sao ư? Đơn giản cho nó dễ đọc thôi.

// bad
import SmsContainer from './containers/SmsContainer';

// bad
const HttpRequests = [
  // ...
];

// good
import SMSContainer from './containers/SMSContainer';

// good
const HTTPRequests = [
  // ...
];

// also good
const httpRequests = [
  // ...
];

// best
import TextMessageContainer from './containers/TextMessageContainer';

// best
const requests = [
  // ...
];

Uppercase

Có thể viết hoa 1 hằng số với các lý do sau:

Được export
Là const
Đáng tin cậy và không bao giờ sửa đổi.

Tại sao ư? Việc này giúp cho lập trình viên hiểu được rằng UPPERCASE_VARIABLES là đáng tin cậy và không sửa đổi.

Đối với const thì chỉ nên sử dụng trong trường hợp export thôi. Còn đặt tên với const thì không cần thiết phải viết hoa.

Khi export object thì phần đầu sẽ là viết hoa (ví dụ: EXPORTED_OBJECT.key) để hiểu rằng các thuộc tính lồng nhau sẽ không sửa đổi.

// bad
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';

// bad
export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';

// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';

// ---

// allowed but does not supply semantic value
export const apiKey = 'SOMEKEY';

// better in most cases
export const API_KEY = 'SOMEKEY';

// ---

// bad - unnecessarily uppercases key while adding no semantic value
export const MAPPING = {
  KEY: 'value'
};

// good
export const MAPPING = {
  key: 'value'
};

Tổng hợp Serial Javascript Style Guide