便捷实用的JavaScript工具箱: 优化项目性能与效率

1. 优化数据处理：让代码更加精简

1.1

function convertObjectArrayToKeyValue(array, key) {
  return array.reduce((acc, obj) => {
    acc[obj[key]] = obj;
    return acc;
  }, {});
}

1.2

function camelize(str) {
  return str.replace(/-([a-z])/g, function (g) {
    return g[1].toUpperCase();
  });
}

1.3

function isEmptyObject(obj) {
  return Object.keys(obj).length === 0;
}

2. 简化DOM操作：让页面更加灵动

2.1

function addClass(element, className) {
  if (element.classList) {
    element.classList.add(className);
  } else {
    element.className += " " + className;
  }
}

function removeClass(element, className) {
  if (element.classList) {
    element.classList.remove(className);
  } else {
    element.className = element.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ");
  }
}

2.2

function getScrollPosition(element) {
  return {
    x: element.scrollLeft,
    y: element.scrollTop,
  };
}

2.3

function triggerEvent(element, eventName, data) {
  let event;
  if (window.CustomEvent) {
    event = new CustomEvent(eventName, { detail: data });
  } else {
    event = document.createEvent("CustomEvent");
    event.initCustomEvent(eventName, true, true, data);
  }
  element.dispatchEvent(event);
}

3. 增强事件处理：让交互更加丝滑

3.1

function throttle(func, wait) {
  let timeout;
  return function () {
    if (!timeout) {
      func.apply(this, arguments);
      timeout = setTimeout(() => {
        timeout = null;
      }, wait);
    }
  };
}

3.2

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

3.3

function enableMultiTouchDrag(element) {
  let touchStart = {};
  let touchMove = {};
  let touchEnd = {};

  element.addEventListener("touchstart", function (e) {
    touchStart = e.touches[0];
  });

  element.addEventListener("touchmove", function (e) {
    touchMove = e.touches[0];
    element.dispatchEvent(
      new CustomEvent("drag", {
        detail: {
          startX: touchStart.clientX,
          startY: touchStart.clientY,
          moveX: touchMove.clientX,
          moveY: touchMove.clientY,
        },
      })
    );
  });

  element.addEventListener("touchend", function (e) {
    touchEnd = e.changedTouches[0];
    element.dispatchEvent(
      new CustomEvent("dragend", {
        detail: {
          startX: touchStart.clientX,
          startY: touchStart.clientY,
          endX: touchEnd.clientX,
          endY: touchEnd.clientY,
        },
      })
    );
  });
}

结语

作为技术博客撰写专家，我旨在运用简洁的语言与独到的观点，将JavaScript开发中的常用工具函数融汇到项目之中。这些工具涵盖了数据处理、DOM操作、事件处理等多个领域，它们能够提高项目的性能、提升代码的灵活性与可读性。希望您能够从中有所收获，在实战中灵活运用，构建出更加卓越的JavaScript项目！