不知名前端-CSDN博客

原创如何从零开发一个脚手架

本文章尽量用最简单的方式来说明，脚手架如何开发。其中对于依赖的使用，可以查找对应依赖的文档进行查看。这个可以根据ejs文档来参考，在download远程模板结束之后，遍历download下来的模板文件，并用ejs引擎进行解析替换即可。用gitlab举例子，去gitlab中选择个人令牌，选择权限范围后，创建个人令牌。可以看到，@的后半部分是git模板的地址，前半部分是个人令牌。使用download-git-repo库拉取远程代码的时候。1、git拉取模板时，如何开放模板的clone权限。

2024-04-15 20:17:55 355

原创 js万能类型检测Object.prototype.toString.call——定制Object.prototype.toString.call的检测结果

要说这个知识有什么用，在什么场景可以用，可以说基本上是用不上。但是可以了解我们这些常用的方法，到底是什么原理，为什么会有这样的结果。在日常中遇到问题的时候，更能得心应手的排查问题。甚至优化自己的代码。

2023-02-10 16:44:44 2125 4

原创 js实现拼音模糊搜索

全列表的模糊搜索，通过接口实现的搜索，受制于网络传输，体验多少都会有点差。某些场景下，前端实现的模糊搜索，不但效果出色，而且性能、体验俱佳

2023-02-09 14:46:40 1987

原创 css的原生变量&css的各种操作小技巧

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、原生css变量1、基础用法2、js定义css变量/行内定义变量注意二、css3的currentColor关键字三、通过dom自定义属性, 替换伪元素内容正常使用伪元素js替换伪元素内容总结前言记录日常css变量的一些使用技巧, 方便在自己忘记时,及时查阅.一、原生css变量1、基础用法<body> <div class="test"></div> <div cla.

2022-05-28 15:10:25 429

原创 js实现的复制和粘贴

背景前段时间在玩原神的时候，发现同事也在玩，于是和同事讲加下好友，以后可以一起玩。但是当同事复制uid的时候，却发现原神游戏中复制的uid，无法粘贴到wx中。于是乎，身为开发的我们就讨论起来，这是不是bug啊，是什么原因啊。今天就来和大家分享下，如果是web前端，我们这个复制和粘贴是怎么弄的。模拟粘贴板首先，如果想要达到一个类似原神的那种效果，在我的页面复制的东西，只能在我的页面粘贴。（ps：一样东西也别想带走）那么，我们可以自己模拟一个系统粘贴板。举个例子 const preview = d

2022-05-13 16:11:23 1294

原创 express的模版引擎

背景这几天公司需求不多，抽了一两个小时的时间学习了一下express这个库，因为我半路出家入行较晚，以前只听说过ejs之类的模版引擎，但是不太明白他的工作原理，正好express文档中有简单的介绍，所以研究了一下，觉得还是挺好玩的。分享一下，大家一起学习，有大佬有更深入的文档，也欢迎在评论区分享。才接触node的后端代码，不太懂，如果有问题，欢迎随时指正在express中使用模版引擎为了方便和我一样的小白，一步一步跟着做，下面我将我demo步骤一点点的拆开一、创建项目1、创建根目录（准备工作）/

2022-05-13 16:08:52 1073

原创 git常用高危命令整理

以下操作均属高危搞作，请谨慎使用一、移除错误的push（操作一旦完成无法恢复）1、查询想要回退的commit-id，一般选择出错commit的前一个commit-id，并复制下来git log2、切换到对应的commitgit reset --hard <commit-id>3、强制提交代码git push -f总结：这个方法，适用于push了一份错误的代码，且没有其他人在这份错误代码的基础上进行开发，切换到对应的commit后，强制提交，会将切换对应commit之前的全

2022-04-13 16:22:39 731 2

原创 moment.js的实用方法记录

一、获取时间戳1、获取当前时间戳moment(new Date()).valueOf();等效于：Date.now();2、获取任意时间时间戳// 年月日，任意格式，第二个参数对时间格式进行说明moment('2022-01-02', 'YYYY-MM-DD').valueOf()moment('20220102','YYYYMMDD').valueOf()moment('2022/01/02', 'YYYY/MM/DD').valueOf()// 时分秒，任意格式，同上, 当省略年

2022-04-11 14:10:55 1462

原创 js实现影视级滤镜效果,lut3d的前端实现

前端实现滤镜有几种方式,比如css的filter、webgl、svg等等, 其中css和svg可以实现低维度滤镜,优点是简单,方便, 无性能问题. webgl可以实现多维度滤镜, 其中选择可以自己纯手工的去撸各类滤镜算法,也可以使用现成的工具库再手动拼凑, 但是对于不懂webgl的同学来讲,着实有点麻烦. 今天分享一个基于canvas实现的影视级滤镜的方法.lut3d想要讲清楚滤镜是怎么回事,并不是一件容易的事情. 里面涉及到了一些概念性的东西. 这里也不得不来简单介绍一部分内容.首先我们先来了解一下

2022-03-22 18:41:10 2920 2

原创 window.requestAnimationFrame强大的前端动画神器

今天介绍一个功能强大的api—window.requestAnimationFrame，它既可以实现如丝般顺滑的动画，又能充当性能优化的利器，还能代替setTimeout，setInterval等定时器。自从学会了requestAnimationFrame，我已经不会拼写setInterval啦…背景动画的实现与浏览器显示在讲具体功能和api使用方法之前，我们先来大体聊一下api的背景和原理。在各类影视节目横行的今天，大家应该都对电影或是动画的实现有一定了解，最开始的动画是工作人员，一张图一张图画出

2022-02-24 16:25:06 3954 2

原创在react中使用vite的一些配置，包含less全局变量、proxy、别名等常见配置方式

最近换了新的工作，因为新公司的项目使用微前端的集成方案，一个项目被从组件层面拆分出来不少单独的模块，所以经常需要新创建项目。也是因为以上的背景，让我有更多的机会尝试不同的工程打包方案，其中一个便是以速度著称的vite。下面我将工作中遇到的一些问题，已经配置方式记录在这里，以便自己，或是其他看到的朋友作为参考1、vite.config.js使用vite，首先要在项目根目录创建vite.config.js的文件，如果使用ts的话，也可以是.ts文件。这里其实重点想要说的是，vite属于新兴的工具，所以对

2021-09-01 23:31:35 9172 7

原创 wands一个轻松实现音视频播放控制的库

前言随着短视频业务越来越火爆,很多公司都想在这个赛道争一口饭吃, 作为开发者来说, 当第一次接手音视频项目的时候,包括我在内的很多人都是表示非常的头大, web上充斥着各种教程,各种api应接不暇, 中间也有着实不少的坑在等着我们.所以我就想利用业余时间,将工作中的一些方案,抽象出来分享给大家.wands这是一个针对h5原生video, audio标签的一个扩展功能库,体量也很小, 对于不熟悉音视频API, 可以说是一个比较方便的选择.目前还不是特别完善,后期会逐步添加新的功能,逐步将它打造成一个可以

2021-06-20 14:16:01 144

原创如何开发npm包,并发布到npm的详细介绍

从来没有正式的去从头到尾的完整开发过一个npm包.所以这个周末,我突然来了兴趣,对原生video,audio的API以及原生事件写了一个扩展类,并发布到npm.整个过程可以说还是挺蛋疼的.这里分享一下一、github创建项目仓库第一步,从创建项目仓库开始,先去github按照步骤创建npm包的项目虽然我知道99%的人都会,但是为了和我一样不会的同学,还是截了一张图需要填个名称:repository name然后选择add a README选择Add .gitignore ———> 继续输

2021-06-19 22:07:25 1214

原创阿里iconfont上传svg图片空白、或展示不全的解决方案/搜索到的icon无法改变颜色解决方案

原因造成这个问题的原因，可能是因为sketch、dx等软件在导出svg时，自动在svg上添加了一些iconfont平台无法解析的属性造成的。所以解决这个问题，要么从svg代码入手，要么就需要借助工具来完成。解决改代码并不是很理想的解决方式，这里我们借助iconfont官方平台推荐的图形设计软件AI来解决这个问题。1、首先下载一个AI软件2、然后使用AI打开通过其他设计软件导出的svg图标3、选中整个图标，然后选择对象—扩展—选择描边（已经选择取消，重新选择）——确定4、保存为svgsvg配置

2021-06-05 12:53:18 14437

原创 Debugger for Chrome

作用代替浏览器的console面板对代码进行debug。当然也可以当作浏览器的console面板使用，在调试时，整个代码板块作为跟踪debug的资源面板来使用。单单看表面的意思可能平平无奇，推荐没有用过的小伙伴体验一下。由于自己也只是才接触这个插件，所以根据自己成功配置的方式，以及理解在这里记录一下，如果有错误，也请评论出来，一起探讨学习。使用安装插件vscode插件商店中搜索Debugger for Chrome，安装配置要使用这个插件，还需要进行一点简单的配置1、首先找到.vscode文

2021-06-04 17:17:51 813

原创 js取到顶层对象的几种方式

前言众所周知,js是一门脚本语言,它依赖浏览器作为自己的执行环境.但是并不是只有浏览器可以作为js的执行环境,所以,浏览器提供的一些api,addr或者是顶层对象(window),在非浏览器的环境下,就无法使用了.那么这里我将记录几种在浏览器中可以获取到顶层对象的方式.因为作者的工作仅限于浏览器环境的开发,所以这里只做记录,并不会给出兼容方案.后续当作者了解了详细情况,再进行更新1、window2、this3、self4、top5、globalThis暂时作为记录,后面会了解各种方式的优缺点,

2021-04-03 16:19:35 1266

原创 JSON.stringify的妙用，批量删除object的属性

说这个功能其实只是要分享JSON.stringify的第二个参数,先看例子omit—根据obj的key,批量保留或是删除对应的属性// 目标对象const example = { name:"不知名前端", age:18, height:180, weight:150, sex:'boy',}// 保留属性集合const keepAddr = ['age','name','height'];// 删除属性集合const deleteAddr = ['height','sex','

2021-03-31 21:55:03 1372

原创 js实现文件上传、文件预览、拖拽上传的方法

一、文件上传1、上传的html我们可以使用input实现文件上传<input type="file" id="upload">2、访问上传的文件通过dom访问const input = document.querySelector("#upload");const files = input.files;通过onchange事件访问const input = document.querySelector("#upload");input.addEventListener(

2021-03-29 00:03:45 17203 7

原创 js实现录音功能,页面title上的小红点如何去掉

前言在解决这个问题之前,如果你想了解js如何实现录音功能,请看我的另一片博客:https://blog.csdn.net/yun_master/article/details/114550332?spm=1001.2014.3001.5501title上的小红点是什么当你获取了用户的录音权限之后,每次进入到这个录音页面,你都会发现这个小红点.当然这也不是太大的问题.不过当你遇到一个比较钻牛角尖的测试,或者是交互,抑或是pd.此时这个问题,就有可能成了你最头疼的问题.下面我们来解决一下这个问题解决

2021-03-27 14:19:49 1136

原创 h5页面如何实现阻止关闭页面,或阻止刷新页面

页面拦截(beforeunload事件) window.addEventListen(“beforeunload”,(e) => { const message = '即将离开当前页面,确认吗??' e.returnValue = message; return message; })

2021-03-27 13:57:45 3324

原创 h5页面实现开启真全屏模式,兼容版本

这篇文章将会分享一种具有良好兼容性的js全屏方法全屏// 兼容配置const fullScreenMap = { fullscreenchange:"fullscreen", webkitfullscreenchage:"webkitIsFullScreen", mozfullscreenchange:"mozFullScreen", msfullscreenchange:"msFullscreenElement",}const html = document.documentEleme

2021-03-27 13:44:50 563

原创 js实现回到上一页的功能,介绍三种方法,其中一种在新开的页面中也适用

话不多说,看例子1、history.go()可以回到,前进任意一步的页面,回到上一页,如下所示// 回到上一页window.history.go(-1);// 回到下一页window.history.go(1);// 回到任意一页widnow.history.go(+前进几页)2、history.back()// 回到上一页history.back()3、document.referer以上两种方式,基本上大家都清楚,但是我们常常会遇到的一个场景,并不适用.比如当你的页面点

2021-03-27 12:46:17 25484 2

原创 js中.?、??、??=的用法和含义

前言在项目中我们往往要做很多很多的空值判断进行容错处理,往往伴随着三目运算、与或、if else来使用,不仅要写很多冗余的代码,后期维护起来也是满屏的if else可以说是非常的痛苦了.今天分享几个处理空值简单的方法,希望可以解决大家的一些问题.可选链(.?)如果一个值为null、或者是undefined.那么我们再去用点操作符去调用一个方法或者访问一个属性会发生什么?let a;let b = a.name;如果是上面的这样的代码,那么我们能得到一个报错其实这种情况就相当于直接在unde

2021-03-19 21:12:45 71611 29

原创 sass、scss完整教程

前言sass是css的预处理器,你可以像编程一样去写css,极大的简化css,同时支持块级作用域,使css不再为了重复类名导致样式覆盖问题而烦恼.sass的安装首先sass是基于Ruby开发的,所以想要使用sass,你必须先装Ruby,不过Mac自带Ruby环境,所以使用Mac的朋友可以直接安装sass,如果你的电脑已经有了Ruby,那么你可以直接执行以下安装命令gem install sasswebpack配置sass安装好之后,还需要去构建工具配置一下,方式也很简单,使用s在这里插入代码片

2021-03-14 13:12:42 302

原创 create-react-app中如何使用less,手把手教会less的用法

前言我们在开发react项目中,一般都会使用脚手架来快速搭建一个项目的大体框架,其中react官方推荐的create-react-app是我在个人项目中最常用的脚手架之一,但是cra的脚手架内置只支持了sass,不支持less.那么对于习惯使用less的小伙伴只能通过我们自己的双手来完成这个任务了.下面以create-react-app中如何使用less为案例,简单介绍一下,less的使用方式.创建create-react-app项目Node内置npx,所以可以直接使用npx来创建项目npx cre

2021-03-13 23:55:47 4153 2

原创 git在提交代码时,出现unable to access “XXXXX” Permission denied权限被拒绝的警告时,应该怎么去掉

不少小伙伴去一家新的公司,领了一台新的mac,开开心心的打开电脑拉取项目,提交代码的时候,出现一排排的warning,虽然代码也提交成功了,但是对一个资深的新手来讲,确实很难受.那么针对这个问题,我们怎么解决呢?我先上一张图,如果是类似的问题,那么可以试试下面的办法看这一排排的警告⚠️,着实让人难受,一般在使用新的mac的时候,会出现这个问题,是因为有一些文件夹需要root权限,所以在访问这些文件夹的时候会出现权限相关的警告1、找到需要更改权限的文件这个时候,我们需要打开终端,进入终端根目录c

2021-03-13 22:22:11 3086

原创如何在Mac上配置SSH key

查看.ssh文件夹ls -al ~/.ssh新建.ssh文件平mkdir ~/.ssh进入ssh目录cd ~/.ssh关联邮箱ssh-keygen -t rsa -C "[email protected]"下面出现的内容可以忽略、连续按三次回车即可查看公钥cat id_rsa.pub复制ssh pbcopy <id_rsa.pub...

2021-03-11 01:08:55 498

原创 react实现弹窗、弹窗的静态方法的方式

ReactDOM.createPortal(ReactNod,container)实现弹窗的关键在于,如何将弹窗组件挂载到任意的dom上.这里react-dom中提供了一个方法,下面举个例子import React from 'react';import ReactDOM from 'react-dom';const Modal = (props) => { const { container } = props; return ReactDOM.createPortal( /

2021-03-10 00:30:40 6882 7

原创 js实现输入长度的限制,兼容中文输入的办法

复合输入的长度限制我们在项目中,可能会经常遇到输入框输入汉字 + 字母/符号等混合内容,并要对内容进行长度限制的需求.很多朋友喜欢直接对拿到的输入的value进行长度限制,但是实际做过的朋友可能都会遇到问题,当输入中文、日文这种需要多个字母拼成一个文字的语言时,往往文字没有输入完成,拼写的文字就已经超出长度的限制了.从而导致,无法输入;为了要解决这个问题,需要知道,用户正在输入的文字是否是复合输入.如果是复合输入,我们要想办法监听复合输入的结果,而不是输入的过程.如果是非复合输入,我们只需要监听o

2021-03-09 23:45:17 1219

原创 react中如何操作children, react操作children的方式

在项目中,我们可能常常会使用children来接收一个组件的子组件,有的时候,我们或许需要对子组件进行一定的操作.可是如果直接对children进行更改,可能在部分版本中会出现错误,那么我们应该怎么办呢?我们先了解一下,如何利用children接收子组件childrenconst Father = (props) => { const { children } = props; return ( <div> <div>我是父组件</div>

2021-03-09 23:25:01 6419 4

原创前端上传oss自定义方法,支持获取上传进度,附带上传文件管理代码

自定义上传函数function upload({ token, file, pathName, data, headers, onProgress, onSuccess, onErrorÏ}){ const xhr = new HMLHttpRequest(); // 携带cookie xhr.withCredentials = true; // 错误事件 xhr.onerror = (error) => { onError(error); }; if(xh

2021-03-09 22:50:02 1150

原创 js获取光标覆盖选中区域文本

window.getSrelection()通过getSelection方法,可以获取Selection对象,并通过toString方法,获取所选中的文本内容;鼠标选中时,需要借助mouseup事件来作为收集参数的时机// 获取需要得到文本的目标容器const targetContainer = document.querySelector("#root");const selection = () => { // 获取selection对象 const objSelection = w

2021-03-08 23:27:18 415

原创前端常用的工具方法,转blob、颜色互转等

我将在这里把工作中常用的工具方法整理出来生成uuid function getUuid(){ return `${Math.random().toString(32)}-${Date.now().toString(32)}`; }生成md5import SparkMD5 from 'spark-md5';function getMD5(file){ return new Promise(() => { const fileReader = new FileReader();

2021-03-08 23:19:14 497

原创 react实现自定义loading

结合任意ui组件库,利用css3的动画,轻松实现自定义loadingconst Loading = (props) => { const { type, size, icon, color } = props; return ( <div className="box"> <span className="icon" style={{ color }}> {!icon ? <CustomIcon type={type} size={size} /&

2021-03-08 22:15:50 650

原创如何使用js实现下载视频,并且不跳转页面

js实现下载文件,相信99%的前端都能轻松实现,但是如果下载的是视频,相信有的朋友肯定遇到过,视频没有下载,而是跳转了.一个小小的坑,下面我来分享一些方法避免这个问题首先先来一个普通文件的下载实现方式a标签直接通过url下载文件(视频会发生跳转) function download(url,name){ const a = document.createElement("a"); a.href = url; a.download = name; a.click(); }a标签通过

2021-03-08 21:56:34 13015 17

原创前端js实现录音

获取权限function getUserAuthI(){ return new Promise((resolve,reject) => { if(navigator.mediaDevices.getUserMedia){ const options = { audio:true }; navigator.mediaDevices.getUserMedia(options) .then( stream => { resovle({ statue:true

2021-03-08 21:36:03 2602

原创 js实现音频PCM数据合并、拼接、裁剪、调节音量等功能

关于音频的内容,我边学习,边实践也总结了一些,从最开始实现一个简单的web音乐播放器的自定义工具栏,到后来的实现简单的音频频谱图.直到今天的对音频数据进行的进一步操作,我也是一点点的在进步.虽然很多地方,并不是那么完美和准确,但是希望能和大家能共同学习进步.一、准备工作声音的基本原理首先关于音频的一些原理性的内容,在之前的https://blog.csdn.net/yun_master/article/details/104133520关于音频频谱的博客中已经简单介绍过了,这里就不详细展开来说了前端

2021-03-08 21:01:20 6570 2

空空如也

空空如也