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

5697

Bài viết được sự cho phép của tác giả Sơn Dương

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.

Để giải quyết vấn đề callback hell, người ta lại nghĩ ra Promises.

Promise là một cơ chế đặc biệt trong JavaScript giúp bạn thực hiện các tác vụ bất đồng bộ mà không bị callback hell hay pyramid of doom.

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!

Xem việc làm javascript đãi ngộ tốt trên TopDev

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.

  Xử lý bất đồng bộ với Promise.all trong JavaScript

  Tất tần tật về ASYNC/AWAIT trong JavaScript

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

Việc làm JavaScript Hồ Chí Minh dành cho bạn!

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.

Bài viết gốc được đăng tải tại vntalking.com

Xem thêm:

Tìm việc làm IT mới nhất trên TopDev

RELATED ARTICLESMORE FROM AUTHOR