前端开发常用代码片段分享

在前端开发的世界里，掌握一些常用的代码片段可以大大提高开发效率。以下为大家分享一些实用的前端代码片段。

1. 图片懒加载

function lazyLoad() {
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    var img = images[i];
    if ((img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0) && getComputedStyle(img).display!= 'none') {
      if (img.dataset.src) {
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
      }
    }
  }
}

window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);

这个代码片段实现了图片的懒加载，当图片进入可视区域时才加载，有效提升页面加载速度。

2. 平滑滚动到页面顶部

document.getElementById('scrollTopBtn').addEventListener('click', function() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

通过添加一个按钮，点击时平滑滚动到页面顶部，提供更好的用户体验。

3. 表单验证

function validateForm() {
  var name = document.forms["myForm"]["fname"].value;
  if (name == "") {
    alert("名字必须填写");
    return false;
  }
}

简单的表单验证，确保必填字段不为空。

4. 动态添加和删除元素

var div = document.createElement('div');
div.innerHTML = '这是新添加的元素';
document.body.appendChild(div);

var elementToRemove = document.getElementById('elementId');
if (elementToRemove) {
  elementToRemove.parentNode.removeChild(elementToRemove);
}

可以方便地动态操作页面元素。

5. 本地存储

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
var data = localStorage.getItem('key');

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

本地存储用于在浏览器中保存数据，方便下次访问时使用。

这些前端开发常用的代码片段能够帮助开发者更高效地完成项目开发。不断积累和运用这些代码片段，将使前端开发工作更加轻松和高效。当然，前端开发的世界广阔无垠，还有更多精彩的代码技巧等待我们去探索和发现。