Đây là một phần mở rộng cho 7 Killer One-Liners của tuần trước trong JavaScript . Nếu bạn chưa đọc bài báo, bạn rất nên làm như vậy.

1. Kiểm tra xem một phần tử có hiển thị trong khung nhìn không

IntersectionObserverlà một cách tuyệt vời để kiểm tra xem một phần tử có hiển thị trong khung nhìn hay không .

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // `entry.target` is the dom element
      console.log(`${entry.target.id} is visible`);
    }
  });
};
const options = {
  threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById("btn");
const bottomBtn = document.getElementById("bottom-btn");
observer.observe(btn);
observer.observe(bottomBtn);

2. Phát hiện thiết bị

Bạn có thể sử dụng navigator.userAgentđể có được những thông tin chi tiết và phát hiện thiết bị đang chạy ứng dụng

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ? "Mobile"
    : "Desktop";
console.log(detectDeviceType());

Bạn chỉ có thể chuyển đổi chế độ hiển thị của một phần tử bằng cách sử dụng thuộc style.visibilitytính và trong trường hợp bạn muốn xóa nó khỏi luồng kết xuất , bạn có thể sử dụng thuộc style.displaytính.

const hideElement = (element, removeFromFlow = false) => {
  removeFromFlow
    ? (element.style.display = "none")
    : (element.style.visibility = "hidden");
};

4. Lấy các tham số từ URL

JavaScript làm cho việc tìm nạp parameterstừ bất kỳ địa chỉ nào trở thành một cuộc đi bộ trong công viên bằng cách sử dụng URLđối tượng.

const url = new URL(window.location.href);
const paramValue = url.searchParams.get("paramName");
console.log(paramValue);

Bạn có thể deep copybất kỳ đối tượng nào bằng cách chuyển đổi nó thành một chuỗi và quay lại một đối tượng .

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

JavaScript cung cấp một setTimeouthàm, nhưng nó không trả về một Promiseđối tượng, khiến nó khó sử dụng async functions. Vì vậy chúng ta phải viết hàm wait/ của riêng mình sleep.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const asyncFunc = async () => {
  await wait(1000);
  console.log("async");
};
asyncFunc();

Theo dõi tôi để biết các mẩu tin mới hàng tuần về lĩnh vực công nghệ

Cần một Freelancer phát triển Front-End được xếp hạng cao nhất để giảm bớt những rắc rối trong quá trình phát triển của bạn? Liên hệ với tôi trên Upwork

Bạn muốn xem những gì tôi đang làm? Kiểm tra Trang web Cá nhân của tôi và GitHub

Bạn muốn kết nối? Liên hệ với tôi trên LinkedIn

Tôi là một freelancer, người sẽ bắt đầu với tư cách là một Digital Nomad vào giữa năm 2022. Bạn muốn nắm bắt cuộc hành trình? Theo dõi tôi trên Instagram