![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS常见功能
文章平均质量分 53
whyfail
编程界崇尚以简洁优雅为美,很多时候,如果你觉得一个概念很复杂,那么很可能是你理解错了!
展开
-
JS将class转换为function
使用class关键字可以提供更简洁和现代的语法,而传统的构造函数和原型链方式则提供了更多的控制和灵活性。原创 2024-08-28 16:25:47 · 242 阅读 · 0 评论 -
Promise 详解:JavaScript 中的异步处理利器
在现代的 JavaScript 编程中,异步操作非常普遍。我们常常需要进行诸如网络请求、读取文件或处理定时器等任务,而这些任务的完成时间是不确定的。为了解决这个问题,JavaScript 引入了 `Promise`,一种处理异步操作的机制。本文将详细介绍 `Promise`,并展示其主要 API。原创 2024-07-09 09:55:51 · 265 阅读 · 0 评论 -
JS的迭代与递归
在JavaScript中,迭代和递归是两种常见的控制流程,用于处理重复任务和数据结构的遍历。理解并掌握这两种技术,不仅可以帮助我们编写高效的代码,还能让我们更好地解决复杂的问题。原创 2024-06-17 09:06:43 · 583 阅读 · 0 评论 -
Vue.observable — 最小化的跨组件状态存储器
Vue.observable,让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象原创 2024-04-29 15:19:02 · 112 阅读 · 0 评论 -
深入了解 JavaScript 中的 Promise 相关方法:all、race 和 allSettled
- `Promise.all()` 会在所有 Promise 实例成功完成时才成功,一旦有一个失败就会立即失败。- `Promise.race()` 会在任何一个 Promise 实例率先成功或失败时返回结果。- `Promise.allSettled()` 则会等待所有 Promise 实例结束后返回结果,无论是成功还是失败。原创 2024-04-07 14:42:27 · 554 阅读 · 0 评论 -
Threejs粒子水波纹效果
Threejs粒子水波纹效果原创 2024-03-12 15:46:23 · 652 阅读 · 0 评论 -
20 个提升效率的 JS 简写技巧
JavaScript 中有很多简写技巧,可以缩短代码长度、减少冗余,并且提高代码的可读性和可维护性。本文将介绍 20 个提升效率的 JS 简写技巧,助你告别屎山,轻松编写优雅的代码!原创 2023-10-10 20:45:00 · 154 阅读 · 0 评论 -
用nginx部署前端项目
前端项目nginx部署主要的配置基本上就是上面提到的这些。首先是location路由的四种写法;接着就是分清楚root和alias的区别;当项目较多时需要使用二级路由时,需要注意重定向的配置;如果你的项目文件较大,可以开启gzip压缩提升传输效率。转载 2023-08-28 21:30:00 · 378 阅读 · 0 评论 -
js中?.、??、??=的用法及使用场景
js中?.、??、??=的用法及使用场景转载 2023-08-25 22:00:00 · 173 阅读 · 0 评论 -
前端如何安全的渲染HTML字符串?
默认情况下,Sanitizer 实例仅用于防止 XSS 攻击。但是,在某些情况下,可能需要自定义配置的清理器。接下来,下面来看看如何自定义 Sanitizer API。如果想创建自定义的清理器配置,只需要创建一个配置对象,并在初始化 Sanitizer API 时将其传递给构造函数即可。// 清理结果由配置定制以下配置参数定义了清理器应如何处理给定元素的净化结果。:指定清理器应保留在输入中的元素。:指定清理器应从输入中删除但保留其子元素的元素。:指定清理器应从输入中删除,包括其子元素在内的元素。转载 2023-08-17 23:00:00 · 912 阅读 · 0 评论 -
你不知道的9个CSS伪元素
请注意,此API目前处于。CSS伪元素是一项强大的功能,它允许您在不需要额外的JavaScript代码的情况下对所选元素的特定部分进行样式设置。在本文中,我们将探讨9个鲜为人知的CSS伪元素,它们可以增强您的样式设置能力。伪元素以列表项的标记为目标,例如无序列表中的项目符号或有序列表中的数字。在上面的代码片段中,每个段落的第一个字母将以较大的字体大小显示,并且呈现红色。在上面的代码中,输入字段中的占位文本将以红色显示,并带有斜体字体样式。在上面的代码中,视频元素中的提示文本将具有白色文本颜色和黑色背景。翻译 2023-07-18 21:00:00 · 218 阅读 · 0 评论 -
Lodash 前端必备神器:学会这些技巧,让你代码量减半、效率翻倍!
Lodash 是一个流行的 JavaScript 实用工具库,提供了许多常用的函数和工具,能够方便地处理集合、字符串、数值、函数等多种数据类型,减少编写重复代码的时间和精力。Lodash 的 API 设计与 ES6 的新特性相似,同时兼容了更早的浏览器版本。Lodash 支持模块化加载,可以通过 npm 或在浏览器中直接引入来使用。Lodash 有多达 300 多个函数,每个函数都有详细的文档和示例,能够快速地满足各种编程需求。转载 2023-06-06 20:45:00 · 375 阅读 · 0 评论 -
合并对象的方法
展开运算符和方法都可以用于合并对象,但它们有不同的优缺点。展开运算符的优点是简洁性和创建新对象,适用于简单的对象合并。然而,它只进行浅拷贝,不支持深拷贝。方法的优点是灵活性和支持合并多个对象,适用于需要合并多个对象的情况。然而,它会修改目标对象,不支持嵌套对象的合并。根据具体的需求和个人偏好,选择合适的方法来合并对象。原创 2023-06-03 16:15:00 · 2437 阅读 · 0 评论 -
JavaScript 中更安全的 URL 读写
URL对于我们开发人员来讲,应该是非常熟悉了。在对URL进行参数拼接时,我们一般都会直接进行字符串拼接或使用模版字符串,因为这样非常方便,但是我们这样其实会在不知不觉中以不安全的方式编写 URL。?${??${??${??这样确实写起来非常方便,但你可能会在不知不觉中会你的程序带来一些问题。(如上代码就是一段有问题的代码)转载 2023-04-11 22:00:00 · 98 阅读 · 0 评论 -
JavaScript有关数据处理优化方式
筛选出连个数组相同项、筛选出书特定的key、多重条件判断优化原创 2023-03-31 20:00:00 · 287 阅读 · 0 评论 -
灭霸颗粒消失效果
灭霸颗粒消失效果。原创 2023-01-04 16:25:39 · 171 阅读 · 0 评论 -
关于浏览器缓存的处理
关于浏览器缓存的处理。原创 2023-01-03 14:44:08 · 523 阅读 · 0 评论 -
提升代码可读性,减少if-else的几个小技巧
相信大家或多或少都接触过拥有庞大if else的项目代码吧,多重嵌套的if else在维护的时候真的让人很恼火😡,有时候一个 bug 排查下来,严重感觉身体被掏空😿。本文并未有消灭或歧视if else的意思,if else的好用都知道,这里只是在某些特定场景为大家额外提供一种思路,增加我们代码的可读性🐳。转载 2022-10-17 10:08:08 · 492 阅读 · 0 评论 -
react-pdf预览pdf
react预览pdf原创 2022-08-30 20:15:18 · 4080 阅读 · 1 评论 -
使用CSS3的三行代码实现粘性置顶
使用CSS3的三行代码实现粘性置顶原创 2022-08-03 09:26:58 · 876 阅读 · 0 评论 -
onstorage:处理多个Tab标签的跨页面通信
一、场景当用户将同一个网站地址,打开多个Tab页面如:a、b、c、d,这四个页面中的token决定着登录用户的信息,当用户在d页面退出当前账号后到a、b、c页面时发现信息并没有同步,账号并没有同步,这时候请求数据还会异常,这种情况下就需要跨页面通信,保证信息的跨页面同步。二、onstorage该WindowEventHandlers.onstorage属性包含一个在storage事件触发时运行的事件处理程序。当更改存储区域时会发生这种情况(例如,存储新项目)。不能作用于sessionSto.原创 2022-04-12 13:51:04 · 1023 阅读 · 0 评论 -
闲聊防抖和节流
防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要掌握的。从滚动条监听的例子说起先说一个常见的功能,很多网站会提供这么一个按钮:用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现,那么我们现在抽象出这个功能需求:监听浏览器滚动事件,返回当前滚条与顶部的距离这个需求很简单,直接写:function showTop () { var scrollTop = document.body..原创 2020-05-10 18:29:16 · 1176 阅读 · 0 评论 -
图片懒加载方案
一、概述图片懒加载其实就是延迟加载,我们知道浏览器的可视范围是有限的,现在网页的内容越来越丰富了,一般网页的内容都是需要进行滚动才能完成浏览,如果网页有很多图片,然而图片是非常吃流量的,如果用户还没有看到网页下面的内容,在某种程度上我们就没必要这么快加载这些看不到的图片。二、监听scroll事件方案既然要滚动到网页下面才能预览到看不见的图片,因此一个要介绍的方法就是事件监听,监听scroll这个事件,鼠标滚动就触发,那么这里我们需要知道两个高度:第一个高度是窗口显示区的高度,可以用wind.原创 2022-01-23 22:33:34 · 846 阅读 · 0 评论 -
神奇的mix-blend-mode: difference
之前安装过CSDN的浏览器插件,右下角有一个DARK模式切换功能出于好奇,今天就想了解一下它的原理,结果发现了一个神奇的css属性:mix-blend-mode切换前切换后解析发现在body标签下多了几个标签:最后锁定在第二个div标签原理其实也很简单,在打开模式后,会在标签上多加几个class其中的.darkmode-layer这个class是这样的: position: fixed; pointer-events: none; background: #fff;..原创 2021-12-15 18:05:42 · 1542 阅读 · 0 评论 -
关于URLSearchParams方法获取URL参数
URLSearchParams使用这个方法获取URL参数const urlSearchParams = new URLSearchParams(window.location.search)const params = Object.fromEntries(urlstr.entries())console.log(params)原创 2021-11-11 17:34:57 · 963 阅读 · 0 评论 -
JS检测是否有企业微信应用程序
一、问题有一个小需求:让点击一个按钮弹出桌面的企业微信应用程序,如果没有,就跳转到下载页面。二、解决需要下载一个插件:protocolcheck.js 或者直接复制文章后面的代码。将该文件引入index.html中<script src="./protocolCheck.js"></script>点击事件定义为:const ___ = () => { window.protocolCheck("wxwork://", function (.原创 2021-11-08 14:45:07 · 1381 阅读 · 3 评论 -
JS实现根据Dom实现截图
JS实现截图保存pdf原创 2021-09-08 10:35:56 · 1783 阅读 · 2 评论 -
制作一个简单的可移动窗口
一个简单的可移动窗口React组件原创 2021-09-04 16:52:15 · 355 阅读 · 0 评论 -
好玩的console
好玩的consoleconsole有很多有趣的方法,有兴趣的可以在网上找找看看,我这里罗列的是一些比较常用的方法。一、console.log%c 占位符是最常用的。使用 %c 占位符时,对应的后面的参数必须是 CSS 语句,用来对输出内容进行 CSS 渲染。常见的输出方式有两种:文字样式、图片输出。console.log("%c好玩的console!","color: red; font-size: 20px"); 二、console.tablevar obj= { .原创 2021-08-02 13:30:47 · 210 阅读 · 0 评论 -
Axios获取请求时间
一、需求上传大型文件时候,接口请求等待时间很长,给用户进度展示。二、通过Axios库处理export async function uploadApi(values) { try { let config = { headers: { "Content-Type": "multipart/form-data", }, transformRequest: [ function (data) { r.原创 2021-07-08 11:21:31 · 2802 阅读 · 0 评论 -
JS如何获取上传视频时长
获取上传视频时长window.URL = window.URL || window.webkitURL;// file 为上传的视频二进制文件let file = ele.target.file;let video = document.createElement("video");video.preload = "metadata";video.src = URL.createObjectURL(file);video.onloadedmetadata = function () {.原创 2021-06-14 10:15:54 · 957 阅读 · 0 评论 -
获取input上传视频流时长
获取input上传视频流时长const changeFile = (ele) => { let file = ele.target.files[0]; let video = document.createElement("video"); window.URL = window.URL || window.webkitURL; video.src = URL.createObjectURL(file); video.preload = "metadata"; vid.原创 2021-05-25 16:12:38 · 253 阅读 · 0 评论 -
js下载文件遇到的麻烦事
js下载文件遇到的麻烦事有没有在做下载文件功能的时候,出现跨域问题,比如无法批量下载文件,图片文件无法下载等,网上找了很久没有找到很好的解决方法,这里记录一下呗~依赖库file-saveraxios方法import FileSaver from 'file-saver'import Axios from 'axios'// 下载文件const hendleDownloadFile = (item: Record<string, string>) => {.原创 2021-01-21 14:28:19 · 1487 阅读 · 2 评论 -
渐变背景动画
渐变背景动画代码<!DOCTYPE html><html lang="zh" dir="ltr"><head> <meta charset="utf-8"> <title>渐变背景动画</title> <link rel="stylesheet" href="style.css"></head><body> <div class="text"> .原创 2020-10-31 14:23:33 · 361 阅读 · 0 评论 -
板娘---给枯燥的编程来点乐子
给枯燥的编程来点乐子复制下面代码直接放到<head>标签里<!-- 版娘 --><script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script><script> L2Dwidget.init({ "model": { jsonPath: "https:/.原创 2020-10-19 18:50:56 · 200 阅读 · 1 评论 -
微软在线预览功能
浏览器在线预览功能实现方案原创 2020-08-21 10:27:46 · 5672 阅读 · 0 评论 -
input上传图片文件展示
有时候开发会遇到上传的图片还没有上传到服务器,无展示链接,却要展示图片,这个时候就可以使用下面的方法这里采用了antd的上传组件,原理和input上传一样,都可以获取到文件内容这里使用的是react中的函数组件,原理相通/* 展示图片 */const ubLoadImg = (e: any) => { const newSrc = getObjectURL(e.file.originFileObj) document.getElementById('show').src = new..原创 2020-08-21 10:22:56 · 174 阅读 · 0 评论 -
自定义属性操作
自定义属性操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t.原创 2020-08-03 22:29:24 · 160 阅读 · 0 评论 -
全选与反选
全选与反选<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { .原创 2020-08-03 22:26:00 · 154 阅读 · 0 评论 -
表格隔行变色
表格隔行变色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti.原创 2020-08-03 22:24:52 · 80 阅读 · 0 评论