6 hàm Killer trong JavaScript

JavaScript, như tôi thường nói, chứa đầy những điều bất ngờ. Nó không bao giờ ngừng làm chúng tôi kinh ngạc. Mỗi ngày, tôi học thêm một kỹ năng mới trong ngôn ngữ lập trình này. Một cái gì đó nhỏ nhưng có tác động đáng kể đến mã của bạn. Đó là một cái gì đó đáng để chia sẻ.

Trong bài viết này, tôi sẽ chỉ cho bạn sáu hàm JavaScript mà bạn có thể sử dụng trong quá trình phát triển hàng ngày của mình. Vì vậy, chúng ta hãy tiếp tục và tìm hiểu một cái gì đó mới!

1. Kiểm tra xem một Phần tử có hiển thị trong Chế độ xem không

IntersectionObserver là 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);

Để biết thêm thông tin về IntersectionObserver, hãy nhấp vào đây .

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 có thể đọc thêm về ở đây .navigator.userAgent

3. Ẩn các phần tử

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

Nó rất hữu ích khi hiển thị danh sách dài các phần tử, các phần tử KHÔNG có trong chế độ xem (có thể được kiểm tra bằng cách sử dụng IntersectionObserver) có thể được ẩn để tăng hiệu suất.

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

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

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

Bạn có thể sao chép sâu bất kỳ đối tượng nào bằng cách chuyển đổi đối tượng đó thành chuỗi và quay lại đối tượng. Điều này sẽ hoạt động, không chỉ với các đối tượng mà còn với các kiểu dữ liệu tổng hợp khác cũng như Mảng.

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

6. chức năng chờ đợi

JavaScript gửi kèm một setTimeouthàm, nhưng nó không trả về một Promiseđối tượng, khiến nó khó sử dụng trong asynchàm. Vì vậy, chúng ta phải viết hàm chờ / ngủ của riêng mình .

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

Cảm ơn vì đã đọc!

Nội dung khác tại PlainEnglish.io . Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi . Theo dõi chúng tôi trên Twitter và LinkedIn . Tham gia bất hòa cộng đồng của chúng tôi .