JavaScript常见的小知识 - 附示例

哈哈！如果你对 JavaScript 相关的前端知识感兴趣，那正好我将在此分享一些有用的小技巧和概念。以下是几个常见的前端小知识：

目录

 一、事件委托（Event Delegation）

        1、示例

                1）HTML

                2）JavaScript

        2、效果

 二、防抖（Debouncing）

        1、示例

                1）HTML

                2）JavaScript

        2、效果

  三、异步操作（Async/Await）

        1、示例

                1）JavaScript

        2、效果

  四、本地存储（LocalStorage）和会话存储（SessionStorage）

        1、示例

                1）JavaScript

        2、效果

  五、模板字面量（Template Literals）

        1、示例

                1）JavaScript

        2、效果

欢迎关注VX公众号：前端小知识营地

---

 一、事件委托（Event Delegation）

        在处理多个相似的事件时，使用事件委托可以提高性能和简化代码。通过将事件监听器添加到父元素上，利用事件冒泡机制来捕获子元素的事件，而不是直接为每个子元素添加事件监听器。

        1、示例

                1）HTML

<div id="parent">
  <button class="className">按钮</button>
</div>

                2）JavaScript

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target && event.target.matches('button.className')) {
    // 处理按钮点击事件
    console.log('处理按钮点击事件');
  }
});

        2、效果

 二、防抖（Debouncing）

        防抖是为了避免频繁触发某个事件（如输入框键盘输入、滚动等）。当连续触发时，只有在事件停止触发一段时间后，才会执行事件处理程序。常用于输入框的实时搜索。

        1、示例

                1）HTML

<input type="text" id="searchInput">

                2）JavaScript

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

const handleSearch = debounce(function() {
  console.log('搜索处理');
}, 300);

document.getElementById('searchInput').addEventListener('input', handleSearch);

        2、效果

  三、异步操作（Async/Await）

        使用 async 和 await 可以让异步代码像同步代码一样书写，避免回调地狱。

        1、示例

                1）JavaScript

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败', error);
  }
}

fetchData();

        2、效果

  四、本地存储（LocalStorage）和会话存储（SessionStorage）

        localStorage 和 sessionStorage 都可以用于存储数据，区别在于 localStorage 在浏览器关闭后数据仍然存在，而 sessionStorage 只在当前会话中有效。

        1、示例

                1）JavaScript

// 存储数据
localStorage.setItem('username', 'JohnDoe');

// 获取数据
let username = localStorage.getItem('username');
console.log(username);  // JohnDoe

// 删除数据
localStorage.removeItem('username');

        2、效果

  五、模板字面量（Template Literals）

        使用反引号（``）创建多行字符串和嵌入表达式，简化代码和增强可读性。

        1、示例

                1）JavaScript

const name = 'John';
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); Hello, my name is John and I am 30 years old.

        2、效果

欢迎关注VX公众号：前端小知识营地