Thư viện được xem là trợ thủ đắc lực của các lập trình viên trong việc phát triển web. Đây là nơi lưu những đoạn code của function, object, class, giúp các lập trình viên có thể sử dụng và thực hiện những chức năng cụ thể. Dưới đây là 5 thư viện JavaScript dành cho các lập trình Front-end.

Vconsole

Việc debug trang web trên các thiết bị mobile rất khó, nhưng với “Vconsole” mọi thứ sẽ dễ dàng hơn rất nhiều. Vconsole cung cấp các Tính năng sau để giúp bạn gỡ lỗi trang web tốt hơn

  • Logs: console.log|info|error|…
  • Network: XMLHttpRequest, Fetch, sendBeacon
  • Element: HTML elements tree
  • Storage: Cookies, LocalStorage, SessionStorage
  • Execute JS command manually
  • Custom plugins

Day.js

Việc thao tác ngày và giờ trong JavaScript khá cồng kềnh và mất thời gian. Ví dụ nếu muốn in ra màn hình ngày giờ hiện tại, chúng ta cần viết một đoạn code dài hơn để thực hiện. 

May mắn thay, với Day.js bạn có thể thực hiện chỉ với 1 dòng code. Day.js là một thư viện JavaScript đơn giản để parses, validates, manipulates và hiển thị ngày – giờ cho các trình duyệt Moment.js-compatible API

Qs.js

Bạn có thường xuyên cần parameter của URL? và phải viết một function như thế này:

const formatSearch = () => {

  window.location.search.slice(1).split(‘&’).reduce((res, it) => {

    const [ key, value ] = it.split(‘=’)

    res[ key ] = value

    return res

  }, {})

}

// https://medium.com?name=fatfish&age=100

const search = formatSearch() // { name: ‘fatfish’, age: 100 }

// use qs.js to format

const search2 = qs.parse(window.location.search.slice(1)) // { name: ‘fatfish’, age: 100 }

Bây giờ, bạn có thể sử dụng qs.js để định dạng URL parameters thay vì mất thời gian ngồi code từng dòng.

// 1. url = https://medium.com

// 2. params = { name: ‘fatfish’, age: 100 }

const splitSearch = (url, params) => {

  const search = Object.entries(params).map((it) => it.join(‘=’)).join(‘&’)

  return `${url}?${search}`

}

const url = ‘https://medium.com’

const params = { name: ‘fatfish’, age: 100 }

console.log(splitSearch(url, params)) // https://medium.com?name=fatfish&age=100

// use qs.js to stringify url

console.log(`${url}?${qs.stringify(params)}`) // https://medium.com?name=fatfish&age=100

Js-cookie.js

Tất cả chúng ta đều biết rằng thao tác với cookie trong JavaScript không phải là điều đơn giản. Để cải thiện năng suấ, bạn nên dùng ‘js-cookie.js’. Đây là một API JavaScript đơn giản, nhẹ để xử lý cookie.

Lodash

Lodash là công cụ làm cho JavaScript trở nên dễ dàng hơn bằng cách loại bỏ rắc rối khi làm việc với mảng, số, đối tượng, chuỗi, v.v. Các phương thức mô-đun của Lodash rất phù hợp cho:

  • Iterate arrays, objects, & strings
  • Thao tác & kiểm tra giá trị
  • Tạo các composite functions

Như vậy, qua bài viết này, các lập trình viên front-end đã có thể bỏ túi được các thư viện phổ biến để có thể tối ưu hoá thời gian làm việc.