Javascript đã trở thành một ngôn ngữ phổ biến nhất trong giới lập trình. Javascript giờ đây không chỉ gói gọn lập trình web. Javascript xuất hiện từ lập trình ứng dụng web (Angular, VueJS, ReactJS…), server (Nodejs) cho đến lập trình ứng dụng di động (React Native).
Do vậy, bạn sẽ không phải hối hận khi lựa chọn Javascript làm ngôn ngữ đầu tiên khi bắt đầu học lập trình. Mình biết rằng, khi mới học Javascript từ căn bản đến nâng cao , bạn sẽ hơi bối rối vì đây là ngôn ngữ hướng sự kiện, bất đồng bộ.
Để các bạn đỡ mất thời gian, mình sẽ điểm lại 7 khái niệm Javascript cơ bản quan trọng nhất mà bạn nên đầu tư thời gian để hiểu.
Nội dung chính của bài viết
Những khái niệm Javascript cơ bản cần phải biết
1. Promises
Nhắc đến Javascript là nhắc đến khái niệm lập trình bất đồng bộ. Vậy phải làm sao để ứng dụng chạy đúng luồng mà bạn mong muốn? Khái niệm Callback ra đời.
Tuy nhiên, khi bạn sử dụng callback một cách vô tội vạ sẽ dẫn đến callback hell. Đây là một bad smell cực kì tệ, làm bộ source code trở nên khó đọc, khó bảo trì và dễ phát sinh bug.
==> Tìm hiểu Callback hell là gì?
Để giải quyết vấn đề callback hell, người ta lại nghĩ ra Promises.
Promises là trung tâm của thế giới lập trình bất đồng bộ Javascript. Hiểu được cách thức hoạt động và sử dụng nó một cách chính xác là điều cần thiết để xây dựng các ứng dụng javascript cơ bản hiện đại.
Mình sẽ lấy một ví dụ về Callback hell:
api.getUser('pikalong', function(err, user) {
if (err) throw err
api.getPostsOfUser(user, function(err, posts) {
if (err) throw err
api.getCommentsOfPosts(posts, function(err, comments) {
// vân vân và mây mây...
})
})
})
Và sử dụng Promise để xử callback hell như sau:
api.getUser('pikalong')
.then(user => api.getPostsOfUser(user))
.then(posts => api.getCommentsOfPosts(posts))
.catch(err => { throw err })
Bạn thấy code đẹp trai hơn chưa!
2. Async/Await
Mặc dù viết code sử dụng promises giúp mã nguồn trở nên trong sáng hơn rất nhiều. Tuy nhiên, nếu không cẩn thận thì vẫn có thể lại bị promises hell. “Tránh vỏ dưa lại gặp vỏ dừa”.
Ngoài ra, nếu bạn đã quen với ngôn ngữ lập trình tuần tự như PHP, Java… thì việc tiếp cận với Javascript sẽ trở thành cực hình.
Vì vậy, Async/Await ra đời. Từ khóa Async/Await giúp mã nguồn Javascript chạy tuần tự từ trên xuống dưới. Nhờ đó, bạn có thể viết mã không đồng bộ theo cách đồng bộ.
Đây là một ví dụ về Async/Await:
async function() {
try {
const user = await api.getUser('pikalong')
const posts = await api.getPostsOfUser(user)
const comments = await api.getCommentsOfPosts(posts)
console.log(comments)
} catch (err) {
console.log(err)
}
}
Cần lưu ý là kết quả trả về của async function luôn là một Promise.
Hiện tại thì cả Promise và Async/Await đều được hỗ trợ bởi tất cả các trình duyệt hiện đại (trừ IE11). Còn phía server (Nodejs), cả Promise và Async/Await đều được hỗ trợ bởi Nodejs phiên bản mới nhất.
3. Fetch
Để tạo một request từ client lên server lấy dữ liệu. Bạn có nhiều cách, sử dụng Ajax chẳng hạn. Ngoài ra, bạn cũng có thể sử dụng fetch().
Một ứng dụng hiện đại, có lẽ không thể thiếu phần kết nối tới server. Do đó, fetch() được sử dụng rất nhiều.
Fetch API là một API đơn giản cho việc gửi và nhận requesst bằng js. Fetch() giống với XMLHttpRequest, nhưng điểm hiện đại hơn là fetch() trả về một Promise.
Vì vậy, bạn có thể sử dụng fetch() kết hợp với Async/Await hay Promise để code được “sạch sẽ” hơn.
Để dễ hình dung, mình lấy một ví dụ đơn giản như sau:
async function getRedditJSON () {
const response = await fetch('https://www.reddit.com/.json')
return response.json()
}
getRedditJSON().then((data) => {
console.log(data)
})
4. Classes & Objects
Nếu trước kia, nhắc đến Javascript mà lại muốn viết hướng đối tượng thì thật buồn cười. Nhưng giờ thì đã khác. Rất nhiều framework javascript ra đời dựa trên component như ReactJs, VueJs… Đặc biệt, sự có mặt của TypeScript đã mang các khái niệm Interface, static type checking lên Javascript.
Với TypeScript, giờ bạn có thể viết code clean hơn, ứng dụng triết lý SOLID vào mã nguồn. Nếu bạn tò mò về cách ứng dụng triết lý SOLID trên Javscript thì đọc thêm bài viết này: SOLID trong Node.js
Chính vì điều này mà bạn cần phải hiểu và nắm vững các khái niệm về Classes/Objects giống như các ngôn ngữ Java.
import React from 'react';
export interface SampleComponentProps {
firstword: string,
secondword: string
}
export interface SampleComponentState {
phrase: string
}
class SampleComponent extends React.Component<SampleComponentProps, SampleComponentState> {
readonly state: SampleComponentState = {
phrase: ''
}
constructor(props: SampleComponentProps) {
super(props)
this.state = {
phrase: ${props.firstword} ${props.secondword}
}
}
render () {
const { phrase } = this.state
return (
<div>
<p>{phrase}</p>
</div>
)
}
}
export default SampleComponent;
Qua ví dụ trên, bạn biết được về Component, Classes, Objects, Contructors, và TypeScript interface.
5. Import/export
Như mình đã nói ở trên, ngày nay càng nhiều Javascript Framework ra đời và phổ biến dựa trên component. Điển hình là ReactJS của facebook, VueJS…
Và để sử dụng component trong dự án, bạn sẽ phải sử dụng Import/Export rất nhiều. Mặc dù, hai khái niệm này rất dễ. Nhưng cũng đừng chủ quan mà học lướt qua. Nếu bạn sử dụng đúng cách Impor/Export có thể cải thiện đáng kể hiệu xuất và kích thước ứng dụng.
6. Hiểu đúng từ khóa “This”
Khi bạn học lập trình ứng dụng web, bạn sẽ hiểu tầm quan trọng của lập trình bất đồng bộ.
Trong thế giới bất đồng bộ, context của mã thực thi bị thay đổi liên tục. Là developer, bạn sẽ dễ dàng hiểu hơn mã nguồn bất đồng bộ khi hiểu rõ cách thức từ khóa “this” hoạt động thế nào.
Bạn đã hiểu rõ về cách thức hoạt động của từ khóa “This” chưa? Nếu chưa thì mình khuyên bạn nên đọc những bài viết sau:
7. Events & Event Listeners
Đặc thù của ứng dụng web đó là luôn lắng nghe và phản hồi những tương tác của người dùng. Có rất nhiều cách để xử lý vấn đề này, trong đó kiểu thiết kế hướng sự kiện ra đời để xử lý event data và responsive action.
Ví dụ, mô hình MVC với 2-way databinding đã tồn tại trong thời gian dài. Với kiểu thiết kế này, Model sẽ được update cùng với View thông qua controller. Khi Model thay đổi thì toàn bộ View cũng sẽ thay đổi theo và ngược lại.
Với cách thiết kế này thì thực sự giúp bạn dễ dàng viết code thiết kế giao diện. Tuy nhiên, nhược điểm là khó debug khi giao diện phức tạp.
Triết lý hướng sự kiện ra đời để giải quyết điều đó. Với triết lý này, các thành phần trong View sẽ chỉ cập nhật khi xuất hiện action, và chỉ cập nhật bản thân nó mà không cập nhật toàn View.
Sẽ thật khập khiễng, khi bạn học về Javascript mà lại không biết về Event, Event Listeners. Khi tìm hiểu về Javascript cơ bản bạn sẽ thấy nhan nhản về Event. Kiểu như thế này:
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
#Tạm kết
Trên đây là những khái niệm Javascript cơ bản cực kì quan trọng. Vì vậy, mình khuyên chân thành bạn nên bỏ nhiều thời gian hơn chút để hiểu kỹ những khái niệm này.
Javascript là ngôn ngữ khó học nhưng đã biết thì cực thích.
Tương lai của javascript đang rất rộng mở, nên mình hi vọng các bạn sẽ thích ngôn ngữ này.
Hãy để lại cảm nhận của mình về Javascript ở bên dưới nhé!
Nhận sách Java Advanced Features
Java là ngôn ngữ lập trình phổ biến nhất thế giới, là hình mẫu của tư tưởng OOP. Nếu bạn muốn bắt đầu với Java thì đây là cuốn sách không thể bỏ qua. Với 63 ví dụ thực hành, cùng với cách viết ngắn gọn dễ hiểu sẽ giúp bạn hiểu rõ bản chất của Java.
Hiện Amazon đang bán với giá 16$, nhưng với VNTALKING thì miễn phí cho bạn. Còn chờ gì nữa?
Cảm ơn bạn, bài viết rất hay và hữu ích.
Hay và rất bổ ích, cám ơn bạn đã chia sẻ.