10 thủ thuật Javascript có thể bạn chưa biết

Thứ Bảy, 16/04/2016

Với các lập trình viên JavaScript, những thủ thuật hay, đơn giản, dễ sử dụng dưới đây có thể giúp cải thiện quá trình thiết kế web của mình.

1) Luôn nhớ, 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 !=). Chúng tôi 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

[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

2) Use strict!

Xét tính hỗ trợ của trình duyệt, việc thêm lệnh “Use strict” thuộc ECMAScript 5 và được Safari 5.1+, Chrome 13+ và IE10 hỗ trợ. Khi thêm “Use strict”, trình duyệt có thể khắc phục một số lỗi coding như: tạo biến toàn cục (global variable); truy cập arguments.callee hay arguments.caller. Cách này giúp lập trình viên quản lý lỗi nhỏ/lớn dễ dàng hơn khi chương trình gặp trục trặc. “Use strict” có thể áp dụng với một phạm vi chức năng hoặc cả một file hoàn chỉnh.

Ví dụ:
1. (function(){
2. x = 1;
3. console.log(a);
4. })();
5. 
6. (function(){
7. "use strict";
8. 
9. y = 2;
10. })();
Bạn sẽ có kết quả.
1. > 1
2. > ReferenceError: b is not defined

Ví dụ:

1. (function(){

2. x = 1;

3. console.log(a);

4. })();

6. (function(){

7. "use strict";

9. y = 2;

10. })();

Bạn sẽ có kết quả.

1. > 1

2. > ReferenceError: b is not defined

3) Phương pháp xây dựng chuỗi (String) nhanh

Thay vì dùng câu lệnh “for” khi cần lặp (loop) qua array hay object, chuỗi code sau có thể hoàn thành nhiệm vụ nhanh hơn.

‘Dùng native methods (như join()) sẽ nhanh hơn phương pháp non-native, bất kể quá trình nào đang diễn ra sau lớp abstraction.’

– James Padolsey, james.padolsey.com

1 var arr = ['item a', 'item b', 'item c', ...];
2 var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

1 2	1 var arr = ['item a', 'item b', 'item c', ...]; 2 var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

4) 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ì dùng lệnh 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ử:
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
}

Thay vì dùng lệnh 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ử:

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

}

Immediately Invoked Function Expressions (IIFE) làm việc khi có cặp ngoặc đơn (‘) bao quanh anonymous function và hình thành function expression hay variable expression. Bạn sẽ sở hữu một function expression không tên với hiệu dụng riêng.

5) Ngăn nhiễm Global Scope bằng IIFE

Bằng kỹ thuật này, bạn hoàn toàn có thể tránh ra biến trong global scope. Kỹ thuật này thường được các thư viện, chuyên gia JavaScript và nhà phát triển JQuery chuyên dùng. IIFE cũng được khuyến khích sử dụng trong các ứng dụng cao cấp như main.js.

Áp dụng IIFE thế nào? Khi áp dụng lên global scope, IFFE sẽ giữ tất cả các biến cục bộ tại anonymous function, các biến ngoài global scope sẽ có thể block các biến xác định cùng tên khác.

// All the code is wrapped in the IIFE

 (function () {â¨
 var firstName = âJamesâ;

 â¨â¨function init () {
 â¨ doStuff (firstName);
 // code to start the application

 â¨}â¨
 

 function doStuff () {

 // Do stuff here

 }
 

 function doMoreStuff () {

 // Do more stuff here

 }
 

 // Start the applicationâ¨

 init ();â¨
 }) ();
You can also pass jQuery or any other object or variable via the parameter (the last 2 parentheses)

// All the code is wrapped in the IIFE

(function () {â¨

var firstName = âJamesâ;

â¨â¨function init () {

â¨ doStuff (firstName);

// code to start the application

â¨}â¨

function doStuff () {

// Do stuff here

}

function doMoreStuff () {

// Do more stuff here

}

// Start the applicationâ¨

init ();â¨

}) ();

You can also pass jQuery or any other object or variable via the parameter (the last 2 parentheses)

6) Thực thi logic phức tạp bằng IIFE

Đây cũng là một phương pháp mạnh mẽ khác, bạn có thể thực thi logic phức tạp mà không cần gán tên function. Hãy chú ý đến 2 anonymous function trong câu lệnh điều kiện.

r unnamedDocs = [], namedDocs = ["one_republic", "counting_stars"];
 

 function createDoc(documentTitle) {

 var docName = documentTitle
 

 ?
 

 (function (theName) {
 var newDocName = theName.toLocaleLowerCase().replace(" ", "_");
 namedDocs.push(newDocName);
 

 return newDocName;
 })(documentTitle)
 

 

 :
 

 

 (function () {
 var newUnnamedDoc = "untitled_" + Number(namedDocs.length + 1);
 unnamedDocs.push(newUnnamedDoc);
 return newUnnamedDoc;
 })();
 

 

 return docName;
 }
 createDoc("MyTechLogy_is_great"); // over_the rainbow

 createDoc(); // untitled_4

r unnamedDocs = [], namedDocs = ["one_republic", "counting_stars"];

function createDoc(documentTitle) {

var docName = documentTitle

(function (theName) {

var newDocName = theName.toLocaleLowerCase().replace(" ", "_");

namedDocs.push(newDocName);

return newDocName;

})(documentTitle)

(function () {

var newUnnamedDoc = "untitled_" + Number(namedDocs.length + 1);

unnamedDocs.push(newUnnamedDoc);

return newUnnamedDoc;

})();

return docName;

}

createDoc("MyTechLogy_is_great"); // over_the rainbow

createDoc(); // untitled_4

7) Dùng IIFE để tránh fold over

Khi dùng IIFE, bạn có thể dừng các bug thường gặp có thể close over trong loops. Tác dụng phụ của bug có thể được xóa bỏ bởi:

function actorIDCreator (theActor) {
 var i;
 var uniqueID = 100;
 for (i = 0; i < theActor.length; i++) {
 theActor[i]["id"] = function (j) { // the j parametric variable is the i passed in on invocation of this IIFE

 return function () {
 return uniqueID + j; // each iteration of the for loop passes the current value of i into this IIFE and it saves the correct value to the array

 }
 } (i); // immediately invoke the function passing the i variable as a parameter

 }
 

 return theActor;
 }
 

 var actionActor = [{name:"Statham", id:0}, {name:"Berry", id:0}, {name:"Fox", id:0}];
 

 var createIdForActionActor = actorIDCreator (actionActor);
 

 var stathamID = createIdForActionActor [0];

 â¨console.log(stathamID.id()); // 100

 

 var flightID = createIdForActionActor [1];â¨console.log(flightID.id()); // 101

function actorIDCreator (theActor) {

var i;

var uniqueID = 100;

for (i = 0; i < theActor.length; i++) {

theActor[i]["id"] = function (j) { // the j parametric variable is the i passed in on invocation of this IIFE

return function () {

return uniqueID + j; // each iteration of the for loop passes the current value of i into this IIFE and it saves the correct value to the array

}

} (i); // immediately invoke the function passing the i variable as a parameter

}

return theActor;

}

var actionActor = [{name:"Statham", id:0}, {name:"Berry", id:0}, {name:"Fox", id:0}];

var createIdForActionActor = actorIDCreator (actionActor);

var stathamID = createIdForActionActor [0];

â¨console.log(stathamID.id()); // 100

var flightID = createIdForActionActor [1];â¨console.log(flightID.id()); // 101

8) Cẩn thận với typeof, instanceof và constructor

typeof: một loại từ khóa trong JavaScript được tạo ra để trả về 1 String ( kiểu của biến là gì). Luôn nhớ rằng, typeof null sẽ trả ‘object’, và như đa số kiểu object (như array), sẽ trả lại ‘object’.

var arr = ["x", "y", "z"];
typeof arr; // return "object"

1 2	var arr = ["x", "y", "z"]; typeof arr; // return "object"

constructor: một phần của internal prototype property, có thể hủy bằng code

arr.constructor(); //[]

1	arr.constructor(); //[]

instanceof: một toán tử trong JavaScript có thể kiểm tra tất cả chuỗi prototype. Hàm dựng được trả về sẽ là true nếu tìm được và false khi không tìm được.

arr instanceof Array // true

1	arr instanceof Array // true

9) Tạo thói quen tự đánh giá code

Nhiều người sẽ cảm thấy hơi bất tiện, nhưng tự đánh giá code càng nhiều, bạn sẽ nhận được ra càng nhiều thứ. Ví dụ như, sau một khoảng thời gian dài, hãy nhìn lại những đoạn code đã viết, bạn sẽ giật mình khi không còn nhớ code của mình làm được những gì!

1)// Cycle through array and echo out each name.
2)for(var p = 0, len = array.length; p < len; p++) {
3)console.log(array[p]);
4)}

1)// Cycle through array and echo out each name.

2)for(var p = 0, len = array.length; p < len; p++) {

3)console.log(array[p]);

4)}

10) Cuối cùng, đừng nên dùng lệnh ‘with’

Câu lệnh ‘With’ tưởng chừng như rất hay. Với ‘with’ coder có thể dùng shortcut truy cập intricate object. ví dụ như:

1) With (being.vehicle.car.bodyparts) {
2) doors = true;
3) tyres = true;
4) }

1) With (being.vehicle.car.bodyparts) {

2) doors = true;

3) tyres = true;

4) }

thay vì

1)being.vehicle.car.bodyparts.doors = true;
2)being.vehicle.car.bodyparts.tyres = true;

1 2	1)being.vehicle.car.bodyparts.doors = true; 2)being.vehicle.car.bodyparts.tyres = true;

Tjuy nhiên, coder sẽ rất lúng túng khi lập member mới. Theo tôi, bạn nên dùng var thay cho with

var i = being.vehicle.car.bodyparts;
i.doors = true;
i.tyres = true;

var i = being.vehicle.car.bodyparts;

i.doors = true;

i.tyres = true;

Trên đây là 10 thủ thuật bạn nên sử dụng với JavaScript. Nếu bạn có bất cứ phản đối nào, hay muốn chia sẻ thêm kinh nghiệm của bản thân, đừng ngần ngại comment bên dưới!

Chia sẻ bài viết ngay