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
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
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.typeSonTung ["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
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
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
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
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
console.log(singers.slice(-1)); // [khanhphuong]var singers = ['sontung', 'hoangthuylinh', '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 showbizshowbizs.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”.
1 Nhận xét
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