JavaScript is the most critical part of Web development, and speeding up JS development is speeding up.

The article contains code snippets, without any side effects, can be safely copied to use.

1. Verify that an element is visible

When developing a web page, it is often necessary to know whether an element has entered a “viewport,” or whether the user can see it. The IntersectionObserver API can be used.

Reference: IntersectionObserver API usage tutorial – Ruan Yifeng’s blog

const callback = (entries) = > {
  entries.forEach((entry) = > {
    if (entry.isIntersecting) {
      // 'entry.target' is a 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);
Copy the code

The options parameter allows you to customize the Observer behavior. The threshold attribute is commonly used. It defines the visible percentage of elements that need to appear in the visible area when an Observer is triggered.

2. Identify the device

We usually use the window. The navigator. UserAgent for current equipment details for identification.

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

console.log(detectDeviceType());
Copy the code

3. Hide elements

There are two common ways to hide elements in CSS:

  1. You can usestyle.visibilityToggles the visibility of elements.
  2. If you want to remove the element from the entire render stream, usestyle.displayProperties.
const hideElement = (element, removeFromFlow = false) = > {
  removeFromFlow
    ? (element.style.display =  none )
    : (element.style.visibility =  hidden );
};
Copy the code

If you do not remove the element from the render flow but hide the visibility, the element will still be drawn and will take up space in the view.

When rendering a long list, the style.display attribute is used to hide elements that are not in the visible area in conjunction with the above API IntersectionObserver, which can greatly improve rendering performance.

4. Obtain the query parameter of the URL

The URL interface is used to parse, construct, normalize, and encode URLs. It makes it easy to retrieve query parameters from links.

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

5. Simple deep copy

JSON method is used to convert first to string and then to object

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

6.waitmethods

Although we have a setTimeout method to wait and execute asynchronously, this method does not return a Promise and is not very convenient to use in async functions, so we can implement a wait method ourselves.

const wait = (ms) = > new Promise((resolve) = > setTimeout(resolve, ms));

const asyncFunc = async() = > {await wait(1000);
  console.log( async );
};

asyncFunc();
Copy the code

❤ ️ support

If this article has been helpful to you, please support me by clicking 👍. Your “likes” are the motivation for my creation

Welcome to pay attention to the public account “Xiao Li’s Front-end cabin”. I am currently working in a big factory in the first line, and I will share and summarize my thinking and experience of front-end work in depth from time to time to help you become a better front-end.