12/08/2018, 14:47

Một vài mẹo JS bỏ túi cho Web Developer

Đây là một số mẹo nhỏ được tích góp từ kinh nghiệm bản thân cộng với các bài viết chia sẻ của một số Developer khác khi sử dụng javascript, hy vọng có thể phần nào giúp cho việc sử dụng js của bạn trở nên dễ dàng và thuận tiện hơn. 1. Tránh những lỗi không đáng có khi dùng default function Các ...

Đây là một số mẹo nhỏ được tích góp từ kinh nghiệm bản thân cộng với các bài viết chia sẻ của một số Developer khác khi sử dụng javascript, hy vọng có thể phần nào giúp cho việc sử dụng js của bạn trở nên dễ dàng và thuận tiện hơn.

1. Tránh những lỗi không đáng có khi dùng default function

Các default array function của javascript như map, forEach, filter,... sẽ bị lỗi nếu như trường hợp array của bạn null hoặc undefined (vd: nhận dữ liệu từ server), nó khá nguy hiểm nếu bạn nào quên, khiến ứng dụng mình tự nhiên đột tử. Các bạn nên kiểm tra trước khi gọi các function đó. Bạn có thể lồng nó vào scope của if hoặc gọn hơn thì viết như này:

var newArr = array && array.map(function(item){
    //DO SOMETHING
});

2. Sử dụng Ternary Operator cho gọn gàng

Hay dễ hiểu là sử dụng dấu ? : đấy ạ =)) Ternary operator tùy từng trường hợp có thể không được khuyến khích, nhưng bất kì lúc nào bạn cần tìm kiếm một giải pháp khiến code bạn trở nênngắn gọn hơn, bạn có thể ngay lập tức nghĩ đến nó.

$element.css('color', per$.isFirstTab ? 'red' : 'green');

3.Hãy dùng === thay cho ==

Trong JavaScript, ta có thể dùng hai loại toán tử so sánh bằng: === (hay !==) và == (hay !=). Mình khuyên bạn chỉ nên dùng cái trước thôi. Cụ thể hơn, nếu cả hai toán hạng (operands) có cùng kểu và giá trị, code === sẽ cho kết quả true trong khi code !== sẽ cho kết quả false. Nếu bạn áp dụng code == (hay !=), bạn sẽ gặp nhiều vấn đề liên quan đến các kiểu toán hạng khác nhau; code == (hay !=) sẽ cố ép giá trị (một cách vô ích) khi thực thi chuyển đổi kiểu tự động. Mặt khác toán tử === (hay !==) sẽ không chuyển đổi mà sẽ cân bằng giá trị và kiểu của toán hạng, nhanh hơn nhiều so với == (hay !=).

[10] === 10 // is false
[10] == 10 // is true
'10' == 10 // is true
'10' === 10 // is false
[] == 0 // is true
[] === 0 // is false
' == false // is true but true == "a" is false
' === false // is false

4.Tận dụng những hàm có sẵn

Thấy nhiều bạn cứ hay search for each map filter,… kèm với jquery. Đúng là jquery support chúng ta nhiều thứ nhưng nếu đọc tài liệu của javascript thì thật sự nó support chúng ta khá nhiều thứ để làm việc với object, array, string,… rồi. Nhiều khi chúng ta cũng chẳng cần phải sử dụng third party cho những vấn đề đó.

Các bạn có thể lên Molizza Developer Network để tham khảo cũng như có cái nhìn tổng quan về toàn bộ javascript trước khi làm một điều gì đó. Nhiều khi trong native đã có sẵn rồi.

5.Hạn chế sử dụng try-catch-finally trong vòng lặp

Lệnh try-catch-finally sẽ tạo biến mới trong phạm vi nhất định khi catch clause được áp dụng. Đều này sẽ gây caught exception object gán với một biến số. Thay vì như thế này:

var object = ['foo', 'bar'], i;
for (k = 0, len = object.length; k <len; k++) {
try {
// do something that throws an exception
}
catch (e) {
// handle exception
}
}

Bạn có thể thử thế này:

var object = ['foo', 'bar'], i;
try {
for (p = 0, len = object.length; p <len; p++) {
// do something that throws an exception
}
}
catch (e) {
// handle exception
}
0