自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(86)
  • 收藏
  • 关注

原创 使用js实现常见的数据结构---链表,队列,栈,树

通过js的class的功能,可以很清晰的实现这些数据结构,本质上看数据结构表示的是按照一定的关系顺序存放数据,每个数据的单位都是节点,节点包含了一个单位数据(任意大小)和下一个节点的地址(引用),这里是使用js对象属性的方式来实现的;一维的数据结构中,链表是最基本的数据结构,它按顺序连接了多个节点,通过头节点就可以获取到整个链表数据,其他的数据结构(队列,栈)都类似链表结构的变式。

2024-07-19 23:36:17 161

原创 sqlite数据库,轻量级数据库的使用

sqlite是具有零配置、无服务的特点,遵循ACID规则,是一款备受欢迎的轻量级数据库。tips:ACID 规则即,A(原子性)、C(一致性)、I(独立性)、D(持久性)sqlite常被用于pc端,移动端的操作系统中,同时一些单机的游戏,也会使用sqlite存放数据在本地。

2024-07-17 17:05:33 1029

原创 git pull 命令,本地代码被覆盖(删除)

git reflog 找到要回退的操作idgit reset --hard 回退代码到此处最后不得不感叹,虽然代码是用git命令时丢失的,但这个回退的git操作可以将代码随意回退到指定的状态,git的代码管理功能确实很强大,不过千万千万不要乱动git的文件夹,损坏了可能就回退不了代码了。

2024-07-16 22:26:42 260

原创 react-router实现路由拦截,useLocation,useNavigate钩子

react-router中没有直接给出拦截路由的方法,需要手动的去监听路由的变化来拦截路由根据上面的要求,可以使用useLocation钩子函数快速实现,useLocation会返回当前路由路径的对象,它包含以下参数当前 URL 的哈希值。此位置的唯一键。当前 URL 的路径。当前 URL 的查询字符串。由或创建的位置的状态值。在跳转前后使用useLocation就可以记录跳转前后的URL路径,再通过钩子监听URL,就能实现路由变化时执行一些操作,这样就达成了路由拦截的两个条件。

2024-07-12 15:35:49 599

原创 react hook---钩子函数的使用,useState,useReducer,useEffect,useRef,useContext,自定义hook

什么是hook钩子函数hook(钩住),表示拦截操作,可以在某些操作执行时拦截住(钩住),执行hook函数的逻辑,在react中,hook函数一般是use开头,然后提供一些方法api,也就是说你可以理解成react中的hook就是一套便于操作的api

2024-07-12 15:35:27 1593

原创 ts语法---泛型和泛型约束

泛型的存在让ts的类型变得非常灵活,使类型变得可以修改,可以变化不在固定死板;学习了泛型之后,对于ts类型的理解应该更加深入,ts类型其实就相当于一个特殊的值,这个值使专门用来约束变量的值,值可以被类型约束,类型也是一个值,类型也可以被类型约束,类型是一个隐式的值,它不会影响代码的结果,它会约束代码的执行,再执行前将代码不合理的类型错误排除出来;同时在编辑代码时,提示这种类型变量的具有的属性,让整个代码更加具有逻辑性。

2024-07-10 21:21:05 1163

原创 react基础语法,模板语法,ui渲染,jsx,useState状态管理

这里使用create-react-app的脚手架构建项目(结构简洁,基于webpack-cli),成功构建后只需要关注两个部分,package.json中的script脚本,start:启动项目src中的核心文件,index.js: 引入react的依赖, App.js:根组件可以先去除多余的文件index.jsapp.js以上是精简后的文件目录和文件内容,可以看出核心的引入库为react和react-dom,整个框架也是完全基于js生成的。

2024-07-10 16:14:43 1283

原创 js对象的方法速览---数组的静态方法,实例方法和属性合集,各包含一个示例

js对象的方法速览---数组的静态方法,实例方法和属性合集,可以通过目录快速锁定需要查找的方法和查看它的使用。

2024-07-09 21:56:10 855

原创 js原型和类---prototype,__proto__,new,class

在js中,一个变量被创建出来,它就会被绑定一个原型;比如说,任何一个变量都可以使用console.log打印,这里是调用了它的toString方法,而变量被创建后可能并没有设置toString方法,但是它任然可以打印,这就从原型中获取的toString方法所以可以得到第一点:原型可以提供方法给实例的变量,原型也是一个对象,或者说对象可以作为原型并赋值给其他变量,这样对象成为了变量的原型,而对象本身也有原型,此时就形成了 ‘链’

2024-07-09 16:29:43 1248 1

原创 js使用proxy代理监听控制事件

我们需要提供一个方法获取一个proxy代理对象,它会拦截事件属性,并返回一个promise,这个事件触发时,promise完成,然后由于事件是可以多次触发的(点击一次触发一次),我们就需要循环监听,每次拦截事件,都有返回一个新的promise,并等待,通过getElement方法拿到元素的代理对象,然后设置一个无限循环,每次循环都要等待代理对象的waitClick属性,这个属性会返回一个promise等待点击事件的完成,当我们点击了按钮之后,执行一个操作,然后进入下一次循环,继续等待点击。

2024-07-08 17:26:14 745

原创 js函数扩展内容---多参数,函数属性,字符串生成函数

除了默认的属性,还可以自定义函数的属性,4种方法将字符串改成函数异步: setTimeout()同步:eval() ,new Function(),script标签。

2024-07-05 17:53:01 799

原创 react框架,使用vite和nextjs构建react项目

React 是一个用于构建用户界面(UI)的 JavaScript 库,它的本质作用是使用js动态的构建html页面,react的设计初衷就是为了更方便快捷的构建页面,官方并没有规定如何进行路由和数据获取,要构建一个完整的react项目,我们需要借助一些其他的工具或者整合了react的框架,

2024-07-04 16:47:08 1230

原创 js生成器,迭代器和可迭代对象详解

是可以返回一个可迭代对象的特殊函数,是一个特殊的迭代器,在js中可以使用function*来定义一个非连续执行的函数作为迭代算法,最初调用生成器函数时,生成器函数不执行任何代码,而是返回一种称为的特殊迭代器。通过调用next()方法消耗该生成器时,生成器函数将执行,直至遇到yield关键字。

2024-07-03 20:39:28 921

原创 webSocket网页通信---使用js模拟多页面实时通信

WebSocket是一种先进的网络技术,它提供了一种在单个TCP连接上进行全双工通信的能力。传统的基于HTTP的通信是单向的,即客户端发起请求,服务器响应请求,然后连接关闭。但是,WebSocket允许服务器和客户端之间建立长时间的连接,双方可以通过该连接进行双向数据传输,而不需要客户端重新发起HTTP请求。

2024-07-03 15:34:20 890

原创 ts语法---数据类型,interface和type的用法

ts的数据类型自上而下的分级有第一层 any-任意类型和unknow类型,第二层 原型链的Object类型,第三层 js类的类型第四层 标准的typescript类型第五层 对应的实例数据类型第六层 never类型这里的分层表示,上面的类型包括了下面的类型,例如,any类型在最顶层可以赋值任何数据类型,字符串,数字,对象等等。

2024-07-01 17:33:15 735

原创 TS---typescript的安装和tsc命令使用

(TypeScript是Microsoft公司注册商标)Typescript是基于JavaScript实现的,它实现了对js的类型规范,让一些语义化的错误暴露出来,例如,js是弱类型语言,对于变量赋值,引用方面都比较宽松,比如可以将数字变量赋值成字符,使用为声明的属性(返回null或者undefined),都不会产生错误,但是在严格的开发环境下,这种不严谨的规则会留下很大的隐患,将这中类型的错误在编译时暴露出来可以减少很多隐性的错误产生,

2024-07-01 15:56:18 491

原创 js自定义内容生成二维码,qrcodejs的使用

qrcodejs是基于原生js的文本转换成二维码的库,轻量且使用方法简单,它的实现原理是通过canvas将重新编码的内容绘制在页面元素上,使用qrcodejs时可以选择引入它的cdn或者使用npm下载qrcodejs官网: qrcode.js (davidshimjs.github.io)实例化QRCode类时,会自动生成二维码尝试将图片的base64转二维码失败错误: 这个二维码的内容为 hello world 字符串

2024-06-30 21:26:58 433

原创 web全屏api,实现元素放大全屏,requestFullscreen,exitFullscreen

使dom进入全屏状态,异步,dom.onfullscreenchange();全屏状态变化时触发事件。:fullscreen CSS 伪类当元素处于全屏时生效。使用全屏api时要注意,哪些是静态方法,哪些是实例方法,document是全局文档对象。,可以在方法前加上对应的前缀。dom是一个dom元素。

2024-06-30 21:26:41 292

原创 js修改scss变量

代码很简单,主要是在body修改。都会变化,(这个效果常用来修改全局的主题)是全局生效的,也就是说不管是在哪里修改了。因为页面中body的所有子元素会自动继承。这里点击一次按钮,div的颜色就变化一次。给他赋值,这里需要一个默认值,此时。还没有定义,接下来只有通过js修改。css变量(--color)css变量(--color),这样即使有多个元素都会引起变化。css变量(--color)scss变量($color)就会改变,但是要注意,

2024-06-28 10:40:32 326

原创 js使用异步方法(promise)返回回调参数内的值,

要拿到一个异步的结果,就需要使用异步的调用,同步的方法是不能获取异步结果的,因为异步方法总是在同步操作之后执行,完整代码展示// 一个异步回调的方法// });// }// })// }// 输出 null})

2024-06-28 10:17:56 286

原创 indexedDB---浏览器本地数据库实现增删改查

indexedDB是浏览器本地数据库,既然是数据库就能够实现增删改查,了解了indexedDB的基本使用后,我们来实现它的增删改查功能, 这里使用音频文件上传的的示例,来演示本地数据库的增删改查功能,

2024-06-26 17:12:42 961

原创 从0搭建一个vue项目,不使用脚手架从html到vue

但在真实的项目中,仅仅只有这些配置还远远不够,开发时使用脚手架搭建可以快速的让我们编辑项目核心的代码,这里只是展示一个vue项目是如何产生的,深化对vue框架的了解。

2024-06-25 21:35:34 1211

原创 js实现数据加密,jwt加密方式

通过crypto包的加密方法,以及设置密钥和对应的算法,可以将简单的数据进行加密得到一个字符串:这个字符串是不可逆的,要验证数据,只能将数据和原来的密钥还有算法,重新加密对比,但是加密数据通常在后端进行,这种直接加密的方式,需要拿到原本的数据进行加密比对,而原本真实的数据频繁进入网络传输会增加被拦截的风险,容易泄露个人隐私信息,

2024-06-25 20:15:49 755

原创 vue3,pinia状态管理,手写插件实现持久化

全局插件的执行流程:在main.js中注册--->页面打开时执行(在页面维渲染时就已经执行了),一个插件其实就是实现某个功能的函数方法,并不是只有十分复杂的结构才能称为插件,当我们使用插件时,在理解了功能之后就可以尝试自己来实现。

2024-06-25 14:58:06 541

原创 vite项目自定义端口号

注意:如果端口已经被使用,Vite 会自动尝试下一个可用的端口(5174),所以这可能不是开发服务器最终监听的实际端口。在vite.config.js(或vite.config.ts)中插入以下代码即可。指定开发服务器端口。

2024-06-25 14:57:39 325

原创 canvas画布,绘制贝塞尔曲线

贝塞尔曲线用于计算机图形绘制形状,CSS 动画和许多其他地方。它们其实非常简单,值得学习一次并且在矢量图形和高级动画的世界里非常受用。

2024-06-24 16:44:45 846

原创 indexedDB---掌握浏览器内建数据库的基本用法

IndexedDB 是一个浏览器内建的数据库,它可以存放对象格式的数据,类似本地存储localstore,但是相比localStore 10MB的存储量,indexedDB可存储的数据量远超过这个数值,具体是多少呢?默认情况下,浏览器会将自身所在的硬盘位置剩余容量全部作为indexedDB的存储容量,这里差不多就对应这c盘的剩余容量,所以indexDB有第一个特点,;存储的格式,以对象的键值形式存储数据,注意这里的是一个唯一的索引属性,

2024-06-22 15:48:58 900

原创 vue3自动导入---组件库elements-ui,vuetify以及scss样式的自动导入

我们在使用第三方组件库和css样式文件时,都需要进行引入,可以在单个组件内单独引用,也可以在全局引入或一次引入所有组件;但是,一般情况下我们都不会全部引入,这会是打包的结果变大,而且往往是不可能用上所有的组件,这个时候就需要。可以看到可以在组件中直接使用scss变量,要注意使用scss应该在style标签上添加lang="scss"属性。vuetify也是一套ui组件,它的风格和组件的动画效果更加生动,但是vuetify的配置会相对麻烦,然后就可以在vue组件中直接使用需要的ui组件。

2024-06-21 10:17:25 901

原创 js语法---weakMap和weakSet:弱映射和弱集合

WeakMap是类似于Map的集合,它仅允许对象作为键,并且一旦通过其他方式无法访问这些对象,垃圾回收便会将这些对象与其关联值一同删除。WeakSet是类似于Set的集合,它仅存储对象,并且一旦通过其他方式无法访问这些对象,垃圾回收便会将这些对象删除。它们的主要优点是它们对对象是弱引用,所以被它们引用的对象很容易地被垃圾收集器移除。

2024-06-20 15:32:16 727

原创 js语法---理解反射Reflect对象和代理Proxy对象

反射:reflect是一个内置的全局对象,它的作用就是提供了一些对象实例的拦截方法,它的用法和Math对象相似,都只有静态方法和属性,同时reflect也没有构造器,无法通过new运算符构建实例对象(无实例的全局对象);也就是说reflect相当于一个工具类,只对外提供方法进行使用。tips:拦截方法是指,通过自身方法去覆盖掉原有的默认方法,这样就只会生效拦截方法的操作,而不执行默认操作(例如,setter的作用,覆盖了原有的赋值操作),

2024-06-19 20:02:16 750

原创 js语法---理解防抖原理和实现方法

在实际的网页交互中,如果一个事件高频率的触发,这会占用很多内存资源,但是实际上又并不需要监听触发如此多次这个事件(比如说,在抢有限数量的优惠券时,用户往往会提前在短时间内高频率的点击按钮,但是我只需要接受多次点击中的一次点击,判断有没有抢到即可),这个时候就需要防抖来减少监听的次数,防抖就是在多次触发事件时,减少对冗余事件的监听(主要包括,和),:在原有需求能实现的前提下减少多余操作。

2024-06-18 17:21:18 833

原创 解决使用elmessage 没有样式的问题

这里使用了一个消息提示,但是没有出现正确的样式,

2024-06-12 09:44:07 370

原创 js数组的方法速览---数组的静态方法,实例方法和属性合集,各包含一个示例

本文仅作为查找和基本使用的了解。

2024-06-11 10:20:48 654

原创 js理解异步编程和回调

计算机在设计上是异步的。异步意味着事情可以独立于主程序流发生。当你打开一个网页,网页载入的过程,你又打开了编译器,那么你在网页载入时启动了编译器的行为就是计算机的异步,可以看出计算机时一个超大的异步程序集合,在计算机中你可以同时做很多事情而不必一件事情做完在做下一件,但是在浏览器中不同,浏览器只有一条主线,它沿着主线按部就班的执行程序,在渲染一个网页时,总是自上而下的执行 html,head,body,以及其内部的元素,

2024-06-09 16:40:54 833 1

原创 vue3 监听器,组合式API的watch用法

在组合式 API 中,我们可以使用在每次响应式状态发生变化时触发回调函数。

2024-06-07 22:49:36 986

原创 vscode 执行npm(npx)命令错误,node:internal/modules/cjs/loader:1148 throw err; ^Error: Cannot find module

更新了一下node的版本,然后再打开vscode发现npm命令用不了了一直显示这个Cannot find module 错误,顺着这个路径确实没有这些文件,不明白为什么npm会找这个路径,因为这个AppData里面是空文件夹,没有东西,又查了一变环境变量,也没有发现问题,只有更新了一些node,环境变量路径被调到最后了然后再cmd命令 行试了一变发现,命令行可以正确执行npm指令,还能启动vue项目,所以这个错误应该是vscode内部错误。

2024-06-07 20:19:21 2990 2

原创 js基本类型---symbol标识符

symbol是唯一标识符的基本类型symbol 是使用带有可选描述(name)的Symbol()调用创建的。symbol 总是不同的值,即使它们有相同的名字。返回(如果需要的话则创建)一个以key作为名字的全局 symbol。使用Symbol.for多次调用key相同的 symbol 时,返回的就是同一个 symbol。

2024-06-07 17:09:54 820

原创 nodejs---fs模块,文件读写操作详解,自定义一个文件写入方法

Node.js 同时支持 CommonJS 和 ES 模块系统(自 Node.js v12 以来)是否使用ES6的导入方式,取决于你是否有一个配置文件,或者就使用require导入。

2024-06-07 12:07:18 1000

原创 js模块(module)和导入,导出(import,export)

一个模块(module)就是一个文件。一个脚本就是一个模块。就这么简单。模块可以相互加载,并可以使用特殊的指令export和import来交换功能,从另一个模块调用一个模块的函数或者变量,常量...,即可以引入并调用其他模块的方法,也可以导出自身的方法给其他模块使用,

2024-06-07 09:37:33 491

原创 Intersection Observer API---交叉观察器 API

交叉观察器 API(Intersection Observer API)提供了一种异步检测目标元素与祖先元素或顶级文档的相交情况变化的方法,例如,可以观察判断一个div(有大小的)盒子在是否出现在窗口(window)中,你也可以指定它的一个父级元素,像html,body,等等。

2024-06-05 10:35:25 985

js实现点击复制指定内容

js实现点击复制指定内容

2023-09-18

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除