7 khái niệm Javascript cơ bản không thể bỏ qua

Những khái niệm Javascript cơ bản cần phải biết

1. Promises

Javascript là một ngôn ngữ lập trình có tính năng bất đồng bộ. Vậy làm thế nào để kiểm soát được luồng chạy của ứng dụng theo ý muốn? Người ta đã tạo ra khái niệm Callback.

Tuy nhiên, nếu bạn dùng callback quá nhiều sẽ gặp phải callback hell. Đó là một vấn đề rất xấu, khiến cho mã nguồn trở nên khó hiểu, khó sửa đổi và dễ có lỗi.

Để giải quyết callback hell, người ta đã phát triển Promises.

Promise là một cách đặc biệt trong Javascript để bạn thực hiện các công việc bất đồng bộ mà không bị callback hell hay pyramid of doom.

Promises là trọng tâm của thế giới lập trình bất đồng bộ Javascript. Bạn cần hiểu rõ cách hoạt động và sử dụng đúng của nó để xây dựng các ứng dụng javascript hiện đại cơ bản.

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 })

2. Async/Await

Viết code sử dụng promises làm cho mã nguồn sáng sủa hơn nhiều. Nhưng nếu không chú ý thì vẫn có thể rơi vào promises hell. “Đừng đổi chó lấy chó”.

Hơn nữa, nếu bạn quen với ngôn ngữ lập trình tuần tự như PHP, Java… thì việc học Javascript sẽ khó khăn lắm.

Do đó, Async/Await được tạo ra. Từ khóa Async/Await giúp mã nguồn Javascript chạy theo thứ tự từ trên xuống dưới. Nhờ vậy, bạn có thể viết code bất đồng bộ một 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.

 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

Bạn cần nắm vững những khái niệm Javascript cơ bản này vì chúng rất quan trọng. Mình khuyên bạn nên dành thời gian để tìm hiểu sâu hơn về chúng.

Javascript là ngôn ngữ không dễ học nhưng rất thú vị khi đã nắm được.

Javascript có nhiều tiềm năng trong tương lai, nên mình mong bạn sẽ yêu thích ngôn ngữ này.