10个日常开发必备的 JavaScript 代码片段

news2024/12/24 2:51:58

在 Web 开发领域，开发效率是关键。为什么每次开始新项目时都要重新发明轮子？今天，本文汇总整理了一些方便日常开发使用的 JavaScript 代码片段，超越了 Lodash 和 day.js 等常见代码片段，提升你的开发效率，减少工作时长。

让我们开始吧！

1. 检测元素外的点击

厌倦了复杂的检查以查看点击是否落在目标元素之外？使用 contains 方法简化事情，以更简洁的方式隐藏模式或折叠菜单：

复制

document.addEventListener('click', function (evt) {
     // isClickedOutside is true if the clicked element is outside 'ele'
     const isClickedOutside = !ele.contains(evt.target);
   });

2. 快速打开官方网站

需要查阅第三方库的文档或存储库？这些命令将快速带您到达那里：

复制

# Open the homepage
   npm home PACKAGE_NAME
   npm home react


# Open the repository
   npm repo PACKAGE_NAME
   npm repo react

3. 一次性事件监听器

对于只想处理一次的事件，可以利用 once 选项，而不是手动删除监听器：

复制

const handler = function (e) {};
   ele.addEventListener('event-name', handler, { once: true });

4. 将秒数格式化为 HH:mm:ss

显示音频或视频的时长时，以用户友好的 HH:mm:ss 格式显示秒数：

复制

const formatSeconds = (s) =>
     [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)]
       .join(':')
       .replace(/\b(\d)\b/g, '0$1')

对于相对时间显示，如“几秒前”或“5 分钟前”，请探索 timeago.js 库！

5. 将 URL 参数转换为对象

虽然 query-string 是一个流行的库，但可以直接使用 URLSearchParams API 实现相同的功能：

复制

const getUrlParams = (query) =>
     Array.from(new URLSearchParams(query)).reduce(
       (p, [k, v]) =>
         Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }),
       {}
     )


// Get query parameters
   getUrlParams(location.query)
   // { a: ['1', '4'], b: '2', c: '3' }
   getUrlParams('?a=1&b=2&c=3&a=4') 
   // Get hash parameters
   getUrlParams(location.hash.split('?')[1])

6. 安全打开新标签页

打开新标签页看似微不足道，但需要注意安全。在外部链接时，使用 noopener noreferrer 来防止恶意网站通过 window.opener.location 重定向您的网站。这同样适用于 window.open。

复制

<a target="_blank" rel="noopener noreferrer">...</a>


// window.open defaults rel to 'opener', so set it explicitly
   window.open('https://google.com', 'google', 'noopener,noreferrer')

警告：以下代码片段存在安全漏洞！

复制

<a target="_blank" rel="opener">
...</a>
window.opener.location = 'http://fake.website.here';

7. 预览上传的图像

使用 FileReader API 直接在浏览器中显示用户上传图像的预览：

复制

function readImage() {
     const fileReader = new FileReader()
     const file = document.getElementById('uploaded-file').files[0]


    if (file) {
       fileReader.readAsDataURL(file)
     }


     fileReader.addEventListener(
       'load',
       () => {
         const result = fileReader.result
         const resultContainer = document.getElementById('result')
         const img = document.createElement('img')
         img.src = result
         resultContainer.append(img)
       },
       { once: true }
     )
   }

8. 下载文件

使用 <a> 标签的下载属性触发下载。请记住，这对于同源文件可靠地起作用，并且在 IE 和移动设备上可能会受到限制：

复制

<a href="/path/to/file" download>Download</a>

或者，使用 JavaScript 生成临时的 <a> 标签：

复制

function download(url) {
     const link = document.createElement('a')
     link.download = 'file name'
     link.href = 'url'


     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
}

对于静态文件，在服务器上设置适当的 Content-Disposition 标头也可以触发下载：

复制

Content-Disposition: attachment; filename="filename.jpg"

除了文件下载之外，还可以使用 Blob 对象和 createObjectURL 方法创建和下载文本或 JSON 文件：

复制

const data = JSON.stringify({ 'message': 'Hello Word' });


const blob = new Blob([data], { type: 'application/json' });
 // Create a URL for the blob
 const url = window.URL.createObjectURL(blob);
 // Download the URL using the 'download' function above
 ...


 // Release the URL object
 window.URL.revokeObjectURL(url);

9. 记忆函数结果

使用记忆法缓存计算量大的函数的结果：

复制

const memoize = (fn) =>
     (
       (cache = Object.create(null)) =>
       (arg) =>
         cache[arg] || (cache[arg] = fn(arg))
     )()

10. 多行省略号...

使用 CSS 用省略号截断文本内容，无论是单行还是多行：

复制

.truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }


.truncate-multi {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2; 
     overflow: hidden;
   }