自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 Ts 类型 工具 方法

• readonly 是一个 TypeScript 修饰符,用于将某个属性标记为只读,意味着该属性不能被修改。Exclude 是一个内置的条件类型,用于从联合类型 T 中排除 U 中存在的类型。它通常用于类型过滤。NonNullable 是一个内置工具类型,用于从类型 T 中排除 null 和 undefined。Pick 是一个工具类型,它从类型 T 中提取一组属性 K。• DeepReadonly 是自定义的类型,它会递归地将对象及其所有嵌套属性都变为只读。它主要用于对象类型的部分属性排除。

2024-09-26 20:28:15 334

原创 使用 dotenv 与 config 解析全局环境变量

修改package.json中的dev与prod代码 去设置node对应的环境。官方文档的这样介绍 dotenv: Dotenv 是一个零依赖的模块,它能将。环境去读取默认的环境变量的同时,又有一些独立存在的全局变量 又该如何实现呢?中的全局变量并根据对应的环境使用不同的数据、对象的格式 ,我们可以通过。如果当前的环境和默认环境中的配置项重复,那么会以当前环境中的配置项为准。的方式去配置,已经可以满足我们大多数场景下对于全局变量的使用,会根据当前的环境来加载对应的配置文件。的方式取出所对应的值。

2024-05-16 15:11:29 728

原创 Ts类型体操详讲 之 extends infer (下)

本章我们继续上节的内容继续,展示我们对extends infer的其他用法。

2024-04-23 22:05:35 957

原创 Ts类型体操详讲 之 extends infer (上)

什么是条件提取?本节 我们来讲述 Ts类型体操 使用 extends ? 配合 infer 做条件提取,我会通过代码示例 去讲解数组、字符串、函数、构造器、索引等类型如何去使用条件提取说明:首先我们定义了一个 Arr 的 类型别名,表示一个包含六个数字(1 到 6)的元组。然后我们定义了一个工具函数,它首先检查传入的类型 T 是否是数组,如果 T 不是数组,getArrFirst 的结果就是 never。如果 T 是数组,它会进一步检查 T 是否有一个明确的第一个元素和后续的元素。

2024-04-22 14:20:11 820

原创 Ts支持哪些类型和类型运算(下)

ts里的条件判断为 语法为 Textends XXX ? true : false叫做条件类型,类似js中的三元运算符

2024-04-22 00:23:15 759

原创 Ts支持哪些类型和类型运算(上)

静态类型系统 就是把 类型检查从运行时提前到了编译时,所以ts类型系统中的许多类型与js并无区别例如:基本类型: number、boolean、string、object、bigint、symbol、undefined、null复合类型方面,JS 有 class、Array,这些 TypeScript 类型系统也都支持,但是又多加了三种类型:元组(Tuple)、接口(Interface)、枚举(Enum)。

2024-04-20 13:45:52 491

原创 TS为什么被叫做类型体操

类型系统不止ts有,比如说java、c++都有,为什么只有ts被称为类型体操本文将讲述为什么ts被称为类型体操。静态类型编程语言都有一套自己的类型系统,从简单到复杂可以分为3类。

2024-04-20 11:31:10 788 1

原创 Next App Router(中)

布局是指多个页面共享的 UI。在导航的时候,布局会保留状态、保持可交互性并且不会重新渲染,比如用来实现后台管理系统的侧边导航栏。定义一个布局,你需要新建一个名为layout.js的文件,该文件默认导出一个 React 组件,该组件应接收一个childrenprop,chidren表示子布局(如果有的话)或者子页面

2024-04-19 22:08:40 893

原创 Next App Router(上)

那如何保证这个路由可以被访问呢?你需要创建一个特殊的名为page.js的文件。至于为什么叫page.js呢?除了page有“页面”这个含义之外,你可以理解为这是一种约定或者规范。(如果你是 Next.js 的开发者,你也可以约定为index.js甚至yayu.js!对应路由 /对应路由 /dashboard对应路由/dashboard/settingsanalytics目录下因为没有page.js文件,所以没有对应的路由。这个文件可以被用于存放组件、样式表、图片或者其他文件。当然不止.js。

2024-04-18 10:05:39 755

原创 初始Next.js

本系列next.js基于的是目前最新版本的 v14 版本,需要。最快捷的创建 Next.js 项目的方式是使用。

2024-04-17 22:05:29 414

原创 Three.js优化

three.js是目前国内开发Web3D应用最多的第三方库,它提供了非常多的3D显示功能。在使用的时候,虽然three.js 本身做了优化,但是在较大分辨率下,加载较大或者较多模型时会出现,帧率会越低,给人感觉就越卡,因此性能方面的优化对提高视觉体验有着积极影响。以下是我在项目(vue+threejs)开发结合度娘总结的一些思路因为默认情况下)每秒执行60次,如果在里面加个for循环,代码效率就会严重影响,同时还要减少浮点计算,系统对浮点计算开支比较大,尽量写成小数乘法。

2023-08-15 09:08:26 421

原创 git合并分支一直出现Already up to date如何解决

通过git log develop 和 git log feature-..检查两个分支的日志 的commit查看是否出现相同commit的地方。这样可以让develp和feature-,,的代码保持一致,并在继续的开发中可以merge。我们可以通过git branch -vv去检查每一个分支所绑定的远程仓库。如果我们feature-..是最新的代码并且包括develop中的代码。分支所指向的提交,并且会丢弃当前分支上的任何未提交的更改。我们还需要确保两个分支绑定的不同的远程仓库。

2023-07-25 19:14:32 5793

原创 Three.js光源、阴影

首先我们要确认几何的材质是否能产生阴影、比如基础网格材质(MeshBasicMaterial)没有阴影效果,建议使用Lambert网格材质(MeshLambertMaterial)然后我们需要设置小太阳的位置、设置 小太阳是否能产生阴影、小太阳产生阴影的精细程度、阴影的投射远点和投射近点在后在场景中添加小太阳。由于渲染阴影需要耗费大量的计算资源,所以渲染器默认是不渲染的,我们需要手动开启renderer的阴影效果。然后我们需要让第一节我们所创建的每一个几何物体都会生成阴影。

2023-06-17 21:50:16 232

原创 初识Three.js

使用three去渲染3d场景我们必须具备三个条件1.场景 scene场景用来保存、跟踪所渲染的物体和使用的光源2.摄像机 camera摄像机决定了能够在场景中看到什么3.渲染器 renderer渲染器用来计算基于摄像机的角度计算场景对象在浏览器中渲染成什么样子。

2023-06-17 20:32:52 78

原创 Vite构建工具

深入浅出vite构建工具 、追逐新技术!

2023-06-15 14:00:34 159

原创 uniapp支付宝小程序内嵌webview通信uniapp H5项目的解决方案

本文主要提供uniapp支付宝小程序内嵌webviewh5通信的解决方案

2023-05-11 13:19:14 2908 1

原创 简易路由history原理

history主要是通过pushState和replaceState去重写url路径实现单页面路由切换。通过window.onpopState去监听前进后退的路径。

2023-02-22 22:12:41 166

原创 自定义指令实现一键Copy功能

install方法接收一个Vue实例作为参数,我们可以通过这个Vue去注册一系列全局指令、组件、过滤器等。如果是对象的话必须提供install方法,如果是函数的话,会将这个函数当作install方法调用。本方法使用全局自定义指令,单独拿出一个文件来引入注册的。这里我们需要掌握Vue.use()这个方法。我们可以传入一个对象或者一个函数作为参数、

2023-02-04 15:30:06 201

原创 vue使用Echarts绘制地图

大致实现就是这个效果,鼠标滑过的时候会显示该区域的一个信息,加上自定义的显示图标有需要希望可以帮到各位。

2023-01-15 15:56:38 5854 1

原创 uniapp使用Vant-weapp(最新)

目录1.先正常创建一个uniapp项目2.从github下载vant包,zip格式的3.项目根目录下新建wxcomponents/@vant 两个文件夹文件夹 4.把下载好的压缩包解压,放在刚才创建好的@vant文件下,并重命名为weapp5.App.vue中引入vant的样式 6.在pages.json文件下的 "globalStyle" 下的"usingComponents" 中按需引入7.页面中使用,如果没有样式从uniapp重启微信小程序总结: vant组件包https://github.com/

2023-01-11 11:22:56 6662 8

原创 _vue3中computed、watch、watchEffect函数

1.此时我们不能正常的获取到oldval,一般来说只要监听的是一个对象就拿不到正常的oldval。二、如果监听多个ref定义的数据时,我们需要把监听的值放在数组里,newval和oldval也是一个数组。五、如果我们需要监听多个reative中定义的属性的话,同样第一个参数为一个数组,每一个值为一个对象。六、如果我们监听的是reactive所定义的对象中的某一复杂数据类型属性,四、如果我们监听的数据为reatvie定义的数据中的某一个属性时,一、如果监听的数据为ref定义的响应式数据,语法为。

2023-01-08 18:21:10 114

原创 微信小程序中Mobx的使用

Mobx是全局数据共享状态管理,可以解决小程序组件之间数据共享的问题在小程序中,可使用配合实现全局数据共享。用来创建Store实例对象用来把Store中的共享数据或方法,绑定到组件或页面中使用。

2023-01-08 12:21:05 662

原创 [ `1` , `2` , `3` ].map(parseInt)

这个题用到了数组的map方法、parseInt方法以及二进制的知识。如果参数不是一个字符串,则将其转换为字符串 (使用。如果为 0 开头 按照8进制处理, ES5之后取消了这个规则。所以结果为 result = 【 1,NaN,NaN 】‘A’在16进制里面 为10, ‘F’在16进制中不存在。是 2-36 之间的整数,表示被解析字符串的基数。解析一个字符串并返回指定基数的十进制整数,字符串开头的空白符将会被忽略。如果没有传或者为0,默认为10进制,的整数,表示进制的基数。采用:全权相加,从0位开始数,

2023-01-08 10:05:00 138

原创 _vue3中的setup()方法,父传子,子传父

从组件的生命周期来看,setup函数在beforeCreate之前执行,这意味着在setup中我们是拿不到this的,这时候的this是一个underfined。我们通过事件名.emit(' 触发事件的名字 ' ,参数)可以触发父组件绑定的事件并传参,相当于vue2中的$emit,但在vue3中父组件传递的自定义事件,我们需要在子组件中的。组件外部传递过来的数据,如果没有在props配置中声明,相当于this.$attrs。setup是vue3中新的组件选项,是整个组合API的起点。

2023-01-07 18:41:50 518

原创 vue3 中的 ref、reactive和v3响应式原理

vue3提升学习

2023-01-07 11:55:43 1153

原创 wx小程序组件的使用(2)

插槽和父子组件传参

2023-01-06 17:03:58 253

原创 wx小程序组件的使用(1)

_wx小程序组件知识

2023-01-06 15:12:53 249

原创 vue解决开发跨域、生产跨域的解决思路_(面试八股文)

主要通过vue_cli解决开发跨域的问题,大致说了一下jsonp、cors和nginx怎么解决跨域

2023-01-05 23:00:26 1069

原创 微信小程序一站式基础干货讲解

微信小程序基础知识

2023-01-05 19:53:34 444

原创 vue手写动画效果和animate库的使用

vue手写动画和第三方库animate.css的使用

2023-01-05 15:15:49 600

原创 Vue的响应式原理

vue的响应式原理理解

2022-12-27 17:16:39 130

原创 WebAIPS 本地存储,正则表达式

后面的参数,没有返回空字符串,要在控制台使用。正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。g 是单词 global 的缩写,匹配所有满足正则表达式的结果。i 是单词 ignore 的缩写,正则匹配时字母不区分大小写。location.hash获取地址路径#后面的参数。可以永久的将数据存储在浏览器中,除非主动删除。来转换为json字符串才能储存在本地。可以把数据存储在浏览器中。进行转换为复杂数据类型。取出的时候也需要使用。join数组方法⚠️。

2022-10-19 14:24:30 207

原创 JS webAPI(DOM节点,回流重绘,时间对象)

dom数里面每一个内容都称为节点分类:元素节点,属性节点,文本节点1.1父节点(从孩子元素去想上一层找到他的父亲,可以无限套娃)⚠️注意:先获取子元素1.2子节点获得所有子节点,包括文本节点(空格、换行)注释节点⚠️注意:先获取父元素1.2.2children属性从父亲元素.children[索引值]来获得当前父亲元素立面的所有子元素1.2.3兄弟节点1.下一个兄弟节点:nextElementSibling2.上一个兄弟节点:previousElementSibling。

2022-10-19 14:17:41 279

原创 js进阶WebApi基础,事件

自定义属性:在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取正在上传…重新上传取消。

2022-10-19 14:15:06 247

原创 Js对象导读

在 JavaScript 中,合,所有的事物都是对象,例如字符串、数值、数组、函数等。对象是由和组成的。属性:事物的特征,在对象中用属性来表示(常用名词)方法:事物的行为,在对象中用方法来表示(常用动词)比如说小米手机小米手机的屏幕大小,颜色,重量,厚度都是属性玩游戏,发短信,听歌都是方法。

2022-09-12 23:53:13 132

原创 JS 函数

js函数的介绍和学习,适合js初学者

2022-09-11 00:36:20 97

原创 JS 数组导读

什么是数组例如之前我们变量的学习,只能储存一个值。如果我们想储存班级同学中所有学生的名字,那么该如何储存呢?我们可以使用数组(Array),数组可以把一组相关的数据一起存放,并提供方便的访问(获取方式)。数组是指一组数据的集合,其中的每个数据被称为元素,在数组中可以存放任意类型的的元素,数组是一种将一组数据储存在单个变量名下的优雅方式数组的创建方式1.利用new创建数组2.利用数组字面量创建数组 [ ]声明数组并赋值称为数组的初始化数组里面的数据一定要用 ..

2022-03-02 22:44:32 125

原创 JS流程控制--循环

循环目的:在实际开发中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句在JS中,主要有三中类型的循环语句1.for循环2.while循环3.do..while循环1.for循环在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,称之为循环语句...

2022-02-22 10:57:35 624

原创 JS流程控制分支结构

1.流程控制在一个程序执行过程中,各条代码的执行顺序对程序的结果有直接影响,很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解: 流程控制就是来控制我们的代码按照什么结构顺序来执行。流程控制主要有三种结构,分别是顺序结构、分支结构、循环结构,这三种结构代表三种代码执行的顺序2.顺序流程控制顺序结构是程序中最简单、最基本的流程控制,他没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数代码都是这样执行的3.分支流程控制if语句由上到下.

2022-02-19 10:58:34 391

原创 JS算数运算符

1.运算符运算符也成为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。js中最常用的运算符有:????算数运算符????递增和递减运算符????比较运算符????逻辑运算符????赋值运算符2.算数运算符算术运算符使用的符号,用于执行两个变量或者值的算数运算3.浮点数精度问题浮点数值的最高精度是17位数,所以在进行算数计算时其精确度远远不如整数。算术运算会出现问题不要直接判断两个浮点数是否相等如果一个数取余是0,说明他能被这个数整除

2022-02-17 23:32:08 1847

dotenv与config配置全局变量

# 前端与node侧关于全局变量读取的配置 ## 1、dotenv - 前端 或 node 都可以使用 ``` shell # 使用 dotenv 读取 .env 文件 # 安装 pnpm init pnpm i dotenv # 配置 # 1、在项目根目录创建 .env 文件 # 2、在 .env 文件中配置环境变量 # 3、在代码中使用 process.env.变量名 读取环境变量 # 4、在 package.json 中配置 scripts # 5、运行命令 node ./index.js # 6、在命令行中查看环境变量 # 7、在代码中使用 process.env.变量名 读取环境变量 ``` ## config 配合 js-yaml - node 侧 进行使用 ``` shell pnpm init pnpm i config js-yaml ```

2024-05-16

Echarts地图需要的china.json

Echarts地图需要的china.json

2023-01-15

vue响应式原理代码,手写简单vue

简单实现一个简易版的vue,并进行响应式处理,可以使用差值表达式 本代码参考vue底层源码进行简易版编写。 通过本代码各位可以了解到: vue底层对象的响应式原理、观察者模式、数据劫持、数据代理、dep目标等vue底层知识 适合对vue和js有一定基础、并且能够熟练使用vue进行快速开发的程序员 主要包括以下文件: 1.index文件=>手写一个简单vue文件 2.vue.js=>主要进行数据代理的处理 3.dep.js=>目标文件、收集观察者,调用update方法等 4.observer.js=>数据劫持文件 watcher.js=>观察者文件

2022-12-27

空空如也

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

TA关注的人

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