js
关注
分享
扫一扫
文章平均质量分 55
Harveyzo
一个正在成长的程序员
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
检测无后缀名的文件类型
一般情况下我们判断一个文件是什么类型都是通过看它的后缀名，例如xx.mp3xx.mp4xx.jpg，但是这并不准确！假如我把xx.wav文件的后缀手动改成了.mp3，但它的文件类型依旧是 wav，因为计算机是通过读取文件二进制的前几个字节来区分文件类型，对于大多数类型的文件，起始字节都是固定的，这些字节通常被称为 “魔数” （Magic Number）原创 2025-03-31 17:21:05 · 464 阅读 · 0 评论 -
解决 Video 中设置字幕出现的跨域问题
最近在写一个视频播放器，但是当我给视频添加字幕之后，出现了跨域问题，这里记录一下。以下是用于测试的视频和字幕的链接视频：https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4字幕：https://cdn.plyr.io/static/demo/thumbs/240p.vtt。原创 2025-02-10 16:33:16 · 556 阅读 · 0 评论 -
“万能” 的 reduce
reduce是 JavaScript 数组的一个高阶函数，它用于将数组的每个元素按照指定的方式进行归约（合并）操作。reducecallback回调函数，它执行数组的归约逻辑。初始累加器的值，可选，如果未提供初始值，则将使用数组的第一个元素作为初始值，然后从第二个元素开始进行归约。callback累加器（accumulator）：用于累积回调函数的返回值。它在每次调用回调函数时更新。当前值（current value）：正在处理的当前元素。原创 2025-01-23 10:03:58 · 345 阅读 · 0 评论 -
博客搭建 — 添加图片放大功能
Fancybox是一个流行的 JavaScript 图片和媒体轻盒效果库，用于在网页中展示图片、视频、内联内容和多媒体内容。它提供了一种优雅而灵活的方式来创建响应式的弹出窗口，使用户能够以漂亮的方式浏览和交互。原创 2025-01-22 09:45:37 · 1005 阅读 · 0 评论 -
博客搭建 — 站点优化之图片懒加载
图片懒加载是一种优化网页性能的技术，它延迟加载页面中的图片，只在用户需要时才进行加载，从而减少初始页面加载时的资源请求和传输量。不是浏览器识别的属性，浏览器遇到具有该属性的图片标签时不会加载图片。如果不更改属性，所有图片将立即加载，而不是延迟加载。脚本决定何时加载图像，而不是由浏览器决定。让该技术成为非常简单的实现策略。原创 2025-01-22 09:44:00 · 179 阅读 · 0 评论 -
前端如何实现分页
虽然在实际开发中，大多数分页都是由后端处理，但还是有小部分场景需要前端来实现分页。实现并不难，仅作为记录，方便下次拿来直接使用。list是用于切割出每页数据的原数组，不可更改，通过点击页码调用pagination方法生成一个新的数组。是用于展示在页面上的当前页数据。原创 2025-01-20 12:09:21 · 938 阅读 · 0 评论 -
前端如何排查内存泄漏
使用浏览器开发者工具（如 Chrome DevTools）进行内存分析。确保移除不再需要的事件监听器和定时器。避免在闭包中持有不再使用的对象引用。使用工具和日志来帮助识别和跟踪内存使用。通过持续关注这些方面，可以有效避免内存泄漏，保证应用的性能。原创 2024-12-31 18:24:25 · 2541 阅读 · 0 评论 -
解决跨域的几种方式
前端通过代理方式实现跨域，可以通过配置一个 Node.js 的 Express 代理服务器，然后在前端发送请求时，将请求发送至代理服务器，代理服务器再将请求转发至目标服务器，获取响应后再返回给前端。标签并添加到 DOM 中，指定 src 属性为带有 callback 参数的请求 URL，服务端会将响应数据以回调函数的参数形式返回，从而实现获取数据的目的。当响应数据返回后，客户端自行定义的回调函数会被触发。在同源域名下，通过服务端代理请求目标网站的资源，再将响应结果返回给客户端，从而实现跨域访问目标资源。原创 2023-09-09 12:23:25 · 541 阅读 · 0 评论 -
JavaScript — promise基本使用
Promise 简介Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。它能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来，这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。Promise 常见的几种用法首先定义几个 Promise 对象const p1 = new Promise((resolve, reject) => { setTimeout(reso原创 2021-08-09 21:15:04 · 2650 阅读 · 0 评论 -
Javascript — 数组常用方法
定义一个数组，接下来操作的数组都以这个为例const arr = [3, 10, 18, 20];forEach遍历数组中的每一项，跟 for 循环的作用是一样的arr.forEach(item => { console.log(item);});// 依次输出：3、10、18、20some依次遍历数组中的元素，若有满足条件的则返回 true，剩余的不会执行。若无满足条件的则返回 falseconst result = arr.some(item => { return原创 2021-08-29 09:31:42 · 194 阅读 · 0 评论 -
JavaScript — resize事件监听窗口变化
前言resize 事件是在浏览器窗口大小发生变化时触发，利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。接下来利用 resize 事件实现一个小案例：监听浏览器窗口变化，实时获取该窗口的宽度和高度。实现首先写一个获取窗口宽高的方法const getWindowInfo = () => { const windowInfo = { width: window.innerWidth, hight: window.innerHeight } console.log(wind原创 2021-08-26 21:12:10 · 37439 阅读 · 6 评论 -
JavaScript — 递归处理数据
介绍两种常用的递归处理数据的方法首先定义一组树形列表数据规定：树的最后一级 member 为空的即为成员（也可添加一个 type 标识来判断是否为成员）const memberList = [{ name: '研发部', member: [{ name: '前端', member: [{ name: '张三', age: 1.原创 2021-08-20 21:24:29 · 2130 阅读 · 0 评论 -
JavaScript — 原生js实现上传图片控件
一、修改原生 input 样式html 结构<div class="card"> <input id="upload" type="file" accept=".jpg" /> <div class="view"> <!-- 上传成功后 --> <div id="imgContainer" class="img-container"> <img id="img" /&原创 2021-08-18 20:00:42 · 3057 阅读 · 1 评论 -
JavaScript — MutationObserver接口
介绍MutationObserver 接口提供了监视对 DOM 树所做更改的能力。MutationObserver()，创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。使用写一个简单的例子，监听页面上 input 的显示与隐藏<body> <input id="input" /> <button id="hide">隐藏</button> <button id="show">原创 2021-08-14 11:15:36 · 471 阅读 · 0 评论 -
JavaScript — json文件的读取与写入
应用场景网站配置的导入与导出。当一个网站在测试服开发完成后上线到正式服，为了避免重复配置数据，采取代码的方式来减少一些不必要的人工操作。后台接口接收的是 json 格式而不是文件格式的时候，前端可以采用文件的形式来保存这些数据，在导入导出的时候做一下文件与数据之间的转换。导出 —— 数据写入文件保存导入 —— 文件上传，然后读取数据代码实现首先需要一个 上传文件的 input 框 和 两个按钮<body> <input type="file" accept=".j原创 2021-08-11 20:25:40 · 12087 阅读 · 6 评论 -
JavaScript — 转换日期
描述本文描述的是转换日期方法的实现， 这个方法接收两个参数，第一个参数是需要输出日期的格式，第二个参数是需要转换的日期。代码实现首先，先实现一种简单转换的方法function transDate(date) { const transTime = (t) => { return t < 10 ? `0${t}` : t }; const year = date.getFullYear(); const month = date.getMonth() + 1; const day原创 2021-07-28 21:04:42 · 3082 阅读 · 0 评论 -
JavaScript — 防抖与节流
并返回一个新函数。新函数在被连续调用的一段时间内只会执行一次，直到调用停止超过。这个防抖函数通常用于延迟用户输入事件的响应，以避免不必要的重复 API 请求或计算。，并返回一个新函数。新函数在被连续调用的一段时间内最多只会执行一次，直到延迟时间。，则说明上一个定时器还未触发，不需要再设置新的定时器。这个节流函数通常用于减少响应频率较高的事件的触发次数，例如浏览器的。这个函数接受两个参数：要执行的函数。这个函数接受两个参数：要执行的函数。在新函数内部，使用一个变量。计时器，并创建一个新的。原创 2021-07-14 22:14:25 · 159 阅读 · 0 评论