Chuẩn dưới đây do mình đúc kết từ nhiều project và tổng hợp kinh nghiệm từ bạn bè.

Cách đặt tên

với biến và function thì đặt tên theo phong cách pascal myVariableName, isShow(). Đối với class thì đặt theo phong cách camel MyClass

Namespaces thì theo kiểu camel window.TranKyPhat

Đối với trường hợp 1 số framework như Angular, JQuery, thì có sử dụng dấu $, để thể hiện biến, function đó phụ thuộc vào framework

//JQuery
var $myDiv = $("#myDiv");

//AngularJS
$scope, $watch, $filter

Tên đặt cho biến, function phải thể hiển được chức năng, nhiệm vụ của nó.

// Quá tệ: a, aa không biết a là gì
var a = 1,
aa = function(aaa) {
return '' + aaa;
};
// Tốt
var count = 1,
toString = function(num) {
return '' + num;
};

Hằng (constant)

Đối với constant thì khi đặt tên phải in hoa hết chữ cái, và sử dụng code const thay vì var

// Bad
MAX_HEIGHT_SIZE= 43;
// Good, phải có code const
const MAX_HEIGHT_SIZE= 43;
// Good
window.TranKyPhat.MAX_HEIGHT_SIZE= 42;
// Good
Math.PI

Một lưu ý về biến trong vòng lặp, vì khi chạy trên trình duyệt, các variable của javascript sẽ được đem lên trên đầu code, nên khai báo biến bên ngoài, rồi gọi lại trong vòng lặp sẽ đúng với cách thức hoạt động của trình duyệt

// Bad
function iterate() {
var limit = 10;
for (var x = 0; x < limit; x++) {
console.log(x);
}
}
// Good
// Phải khai báo biến x bên ngoài trước
function iterate() {
var limit = 10,
x = 0;
for (x = 0; x < limit; x++) {
console.log(x);
}
}

Khai báo và sử dụng biến

Sử dụng đúng từ khóa với mỗi loại biến khác nhau

var: biến toàn cục

let: biến sử dụng cục bộ trong 1 block code

const: sử dụng khai báo hằng

// Bad
foo = 'bar';
// Good
var foo = 'bar';
let foo = 'bar';
const foo = 'bar';

Ví dụ về varlet

function varTest() {
  var x = 31;
  if (true) {
    var x = 71;  // same variable!
    console.log(x);  // 71
  }
  console.log(x);  // 71
}

function letTest() {
  let x = 31;
  if (true) {
    let x = 71;  // different variable
    console.log(x);  // 71
  }
  console.log(x);  // 31
}

Khi cần khai báo nhiều biến khác nhau thì chỉ nên dùng một biến var, và đưa mỗi biến xuống 1 dòng khác nhau.

// Bad
var foo = "foo";
var note = makeNote('Welcome to Tran Ky Phat Website');
// Good
var foo = "foo",
note = makeNote('Welcome to Tran Ky Phat Website');

Đối với biến không có giá trị khởi tạo thì đặt ở cuối

var foo = "foo",
//không có giá trị khởi tạo, để ở những dòng cuối
baz;

Không gán giá trị của biến trong lệnh điều kiện (IF), vì điều này thường dẫn đến lỗi

// Bad because it is easily misread as an equality test.
if (foo = bar) {...}

Không nên gán 1 biến bằng 1 phép toán mà chính nó lại tồn tại trong đó, vì điều này sẽ gây khó khăn cho debug

// Bad
function addByOne(num) {
var num = num + 1;
return num;
}
// Good: Sử dụng 1 biến mới để gán lại sẽ tốt hơn
function addByOne(num) {
var newNum = num + 1;
return newNum;
}

Không dùng delete hoặc gán biến bằng undefined để xóa 1 object, chỉ dùng delete khi xóa 1 property khỏi object

/**Không dùng cái này để xóa, vì undefined có nghĩa là không có giá trị, nghĩa là *vẫn cấp phát bộ nhớ cho nó
*/
this.unwanted = undefined;

/**
* gọi lệnh delete chậm hơn là gán nó bằng null
* chỉ được dùng khi xóa 1 property khỏi object
*/
delete this.unwanted;

// Good
this.unwanted = null;

Các khoảng cách dòng

Khoảng cách dòng nên được dùng để phân chia các đoạn code có liên quan với nhau

// Bad
var = wheels;

wheels.clean()

car.apply(wheels);

truck.drive();

// Good
var = wheels;
wheels.clean()
car.apply(wheels);

truck.drive();

Dấu phẩy

Không được để dấu phẩy ở sau property cuối cùng của 1 object

// Bad
var foo = {
bar: 'baz',
foo: 'bar',
};
// Good
var foo = {
bar: 'baz',
foo: 'bar'
};

Không để dấu phẩy ở đầu đoạn code

//Bad
var fruits = [ 'grapes'
, 'apples'
, 'oranges'
, 'crackers'
, 'cheese'
, 'espresso'
];

//Good
var fruits = [ 'grapes',
 'apples',
 'oranges',
 'crackers',
 'cheese',
 'espresso'
];

Khoảng trắng

Sau dấu phẩy, nên có một khoảng trắng, và đối với object, mảng rỗng, thì không nên có khoảng trắng ở giữa.

// Bad
findUser(foo,bar,baz)
makeSoup( );
var foo = { };
var arr = [ ];

// Good
findUser(foo, bar, baz)
makeSoup();
var foo = {};
var arr = [];

Dấu ngoặc nhọn (Brackets and Braces)

Nên để dấu ngoặc nhọn ngay trên cùng với dòng bắt đầu block code

// Bad
if (hidden)
{
...
}
// Good
if (hidden) {
}

Bất kỳ block code nào, cho dù chỉ có 1 dòng cũng nên để dấu ngoặc nhọn

// Bad
if (condition) goTo(10);
// Good
if (condition) {
goTo(10);
}

Chuỗi (Strings)

Nên sử dụng dấu ngoặc đơn cho chuỗi thay vì dấu ngoặc kép

// Bad
var foo = "Bar";
// Good
var foo = 'Bar';

Functions

Luôn nhớ return đầy đủ từ trong ra ngoài đối với function có trả về giá trị

// Bad
var findFoo(isFoo){
if ( isFoo === 'Bar' ) {
return true;
}
}

// Good
var findFoo(isFoo) {
if ( isFoo === 'Bar' ) {
return true;
}
return false;
}

// Good
var findFoo = function(isFoo) {
if ( isFoo === 'Bar' ) {
return true;
}
return false;
}
// Bad - Runtime Error
iGoBoom();
var iGoBoom = function () {
alert('boom');
}
// Good
iGoBoom();
function iGoBoom() {
alert('boom');
}

Comments

Nên comment trên 1 dòng mới và đối với comment nhiều dòng nên dùng kiểu có dấu *

var findFoo = function(isFoo); // Đừng comment ở đây

// Không comment
// nhiều dòng bằng kiểu này

/**
* Nên dùng kiểu này để 
* comment nhiều dòng
*/

Objects

// Ok
var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
// Better
var person = {
firstName: "John",
lastName: "Doe"
}

Arrays

// Rườm rà
var arr = new Array();
// Như vậy tốt hơn
var arr = [];

Khác

var view = {
title: "Joe",
calc: function () {
return 2 + 4;
}
}, output;
// Bad
output = '<div><h5>' + title + '</h5><p>' + calc() + '</div>';
// Good
var output = Mustache.compilePartial('my-template', view);
Keep JavaScript out of the HTML:
// Bad
<button onclick="doSomething()" id="something-btn">Click Here</button>
// Good
var element = document.getElementById("something-btn");
element.addEventListener("click", doSomething, false);
// Good
;(function( window, document, undefined) {
// My Awesome Library
...
})(this, document);

Trong 1 số trường hợp dùng setTimeout tốt hơn là setInterval

// Nó sẽ tốn hơn 100 milisecond
setInterval(function () {
findFoo();
}, 100);
// khi findFoo hoàn thành thì được gọi ngay
;(function main() {
findFoo();
setTimeout(main, 100);
})();

Sử dụng use strict trong từng block thay vì toàn cục

// Bad
var bar = findLooseyGoosey();
"use strict";
var foo = findStrictly();
// Good
var bar = findLooseyGoosey();
;(function () {
"use strict";
var foo = findStrictly();
})();
var findStrictly = function() {
"use strict";
}

Không dùng dấu + để parse chuỗi sang number

var num = '1';
// Bad 
num = +num;
// Good 
num = Number(num);

Với năng lực hạn chế, đôi khi còn thiếu sót, mong các bạn góp ý.

Code Javascript theo chuẩn

Category: Uncategorized
0
4087 views

Join the discussion

Your email address will not be published. Required fields are marked *