Giaosucan's blog - Chia sẻ kiến thức theo cách bá đạo

Ticker

20/recent/ticker-posts

Tuyệt chiêu JavaScript

Nếu bạn là một coder chuyên nghiệp, thì chắc chắn bạn sẽ rất quen thuộc với khái niệm front end developer. Những người lập trình web, phần tương tác với người dùng (front-end).
Khác với kĩ sư về AI, deep learning, phải cần máy tính cấu hình khủng, cài Mathlab bản quyền, Python, tính toán phức tạp, thì với front end developer, chỉ cần một PC “cùi bắp”, một editor free như Notepad++, và thành thạo HTML, CSS, và đặc biệt là JavaScript...
Tuy nhiên, để trở thành một front end developer “thần thánh”, có thể code ra những dòng code “thần sầu” cỡ như John Resig (người tạo ra Jquery), Miško Hevery (creator của Angular JS), thì đòi hỏi bạn thật sự có những kiến thức lập trình chuyên sâu về JavaScript như JS design pattern, Closures, Object Literal

Javascript
Bài viết này sẽ chia sẻ cho các bạn những tip trick, những thủ thuật hay trong JavaScript, tuy không thể trở thành chuyên gia JS như ở trên những cũng đủ trở thành 1 coder “gõ code bình thiên hạ”

Sử dụng design pattern

Các ngôn ngữ chuyên về hướng đối tượng như Java, C# thì việc implement các pattern như Singelon, Factory pattern,.. khá dễ dàng. Nhưng Javascript thì tương đối “dị”, cú pháp cách coding sẽ có nhiều nét khác biệt có thể khiến cho coder rơi vào trạng thái “Lạc trôi”, không biết code thế nào cho đúng
Ví dụ đơn giản về khai báo object trong Javascript
Java, C# thì cách khai báo thông thường là dùng từ khóa class Obj {} nhưng JS thì code khác hẳn
var SonTung = {
type: "Singer",
song: "Lạc Trôi",
nickname: "tùng núi"
};
và cách access thuộc tính của object
SonTung.type
SonTung ["type "]
Bạn có thể code Singleton Pattern trong JS theo cách như sau
var SonTung = {
firstName: Tung,
lastName: 'MTP',
song: 'chung ta khong luoc duoc rau',
sing: function (name) {
return this.firstName + ' ' + this.lastName + 'sing' + name;
}
};
Và bạn có thể call method của singelon SonTrung như sau SonTung.sing(name)
Đây chỉ là một ví dụ đơn giản về Singelon trong JS, bạn thấy cách code rất khác biệt theo lối truyền thống của Java, C#
Ngoài ra còn rất nhiều design pattern khác như MVC, decortor, observar. Tóm lại là muôn hình vạn trạng

Sử dụng Object constructor

Khai báo object constructor trong JS thì cũng tương tự như trong Java, và có một chút khác biệt
function Singer(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var SonTung = new Singer("Tung", "Nui");

Check Object có chứa property hay không

Tùng Sơn sau khi đi Thái về. muốn kiểm tra công chúa thủy tề có còn thuộc tính “manFunction” hay không, hãy sử dụng method hasOwnProperty
function Boy(manFunction) {
this.manFunction = manFunction;
}
var TungSon = new Boy("manly");
if (TungSon.hasOwnProperty('manFunction')) {
console.log('He still has');
} else {
console.log(' He lost');
}

Convert kiểu dữ liệu sang boolean

Nếu bạn cần kiểm tra nếu một vài biến tồn tại hoặc nếu nó có một giá trị hợp lệ hay không hay sử dụng toán tử phủ định đôi !!. Nó sẽ tự động chuyển đổi mọi kiểu dữ liệu về boolean và biến này sẽ trả về false chỉ khi nó có những giá trị như: 0, null, "", undefined hoặc NaN, ngược lại nó sẽ trả về true. Để hiểu hơn về cách nó hoạt động, hãy xem ví dụ đơn giản sau:
Bạn muốn kiểm gia nhận định sau
Hà Nội không có số đề
Sài Gòn khẳng định chưa hề đua xe
Hãy code như sau
function SaiGon(speed) {
this.speed = speed;
this.hasRacing = !!speed;
}
var saigon = new SaiGon(100);
console.log(saigon.hasRacing);

// true var saigon = new SaiGon(0);console.log(saigon.hasRacing); // false
Cách code trên sẽ gọn nhẹ hơn nhiều so với việc sử dụng if truyền thống
Hãy test thử trên https://jsfiddle.net/ để check kết quả nhé, và thực hành tương tự cho object Hanoi

Cache data

Một thói quen thường gặp theo kiểu “tay nhanh hơn não” của coder khi xử lý vòng for với array
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
Ở đoạn code trên, mỗi một vòng for, JS sẽ tính toán lại kích thước của mảng. Nếu array của bạn là một mảng gồm vài chục phần tử thì không vấn đề gì, nhưng khi mảng có hàng triệu phần tử thì lại trở thành vấn đề, do làm nó làm giảm performance
Cách hay nhất là lưu vào biến, một dạng cache data vào memory
var length = array.length;
for (var i = 0; i < length; i++) {
console.log(array[i]);
}

Sử dụng chức năng Developer tool của Chrome


Google Chrome Canary là một trình duyệt chrome chuyên dụng cho developer, bạn có thể làm mọi thứ như debug, print log, check performance,… với chức năng Developer Tool của Chrome
Hãy Ctrl + Shift + I để trải nghiệm chức năng này


Thủ thuật với kiểu mảng

Kiểu array trong JS là kiểu khá thông dụng, JS cung cấp rất nhiều method giúp bạn tùy biến với kiểu array như get phần tử, nối mảng, tìm kiếm,… lẩu thập cẩm
Sau đây là một vài tip trick nhỏ
Lấy phần tử cuối cùng của mảng
Sử dụng hàm slice với tham số âm
var singers = ['sontung', 'hoangthuylinh', 'khanhphuong'];
console.log(singers.slice(-1)); // [khanhphuong] 
Cắt ngắn độ dài của mảng
Một tip nhỏ để bạn có thể xóa phần tử của mảng, mà không phải code phức tạp là gán lại chiều dài của mảng
Ví dụ
Bạn có một mảng ShowBiz gồm nhiều nhân vật trong làng giải trí gồm 3 người
var showbizs = ['hari-won', 'thuy_top', 'tran_thanh'];
Do tran_thanh nhiều chiêu trò tạo scandal nên quyết định “loại”
showbizs.length = 2; // Cách gán này sẽ loại đi phần tử cuối cùng của mảng
như vậy thì showbizs lúc này chỉ còn
showbizs = ['hari-won', 'thuy_top'];
Nối mảng
Để nối hai mảng cách thông dụng nhất là dùng hàm concat, tuy nhiên cách này sẽ tạo ra một mảng mới, nên có thể tiềm ẩn lỗi memory leak trong trường hợp kích thước mảng quá lớn. Như vậy có một cách khác là gộp mảng thứ hai vào mảng thứ nhất để tiết kiệm bộ nhớ sử dụng push.apply
var showbizs = ['hari-won', 'thuy_top', 'tran_thanh'];
var singers = ['le_quyen', 'phi_nhun'];
//Bổ sung thêm 2 singers mới vào showbiz
showbizs.push.apply(showbizs, singers);
// Giờ showbizs có['hari-won', 'thuy_top', 'tran_thanh', 'le_quyen’, '
// phi_nhung’];
Lấy random item trong mảng
Bốc thăm trúng thưởng Viet lot
var vietlot = ['322',
'32222', '1223', '98223'
];
var win = vietlot[Math.floor(Math.random() * showbiz.length)];
Kiểm tra có phải là array không
function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
Duyệt array không cần dùng for
Đây là một tip trick khá hay mà it coder nào biết, sử dụng hàm map
var squares = [1, 2, 3, 4].map(function (val) {
console.log(val); // 1 ,2 ,3 ,4});
Trên đây chỉ là một vài tip trick về lập trình JavaScript có thể bạn chưa biết, và còn rất nhiều những thủ thuật lập trình khác nữa, phải trải qua nhiều thực hành trải nghiệm bạn mới có thể tích lũy được để trở thành một coder JS “siêu nhân”.

Đăng nhận xét

1 Nhận xét

  1. Vào bằng google chrome mobile bị lỗi phần show code kìa giáo sư ơi. Set overflow: scroll đi giáo sư :(

    Trả lờiXóa