- 博客(121)
- 收藏
- 关注
RSS订阅原创 对for(var i = 0；i ＜ 5；i++) {setTimeout(() =＞ console.log(i),1000)}的深入分析
对于这个问题，想必大家都有所耳闻，最终输出是毫无疑问，这是和我们的预期输出不符的（预期输出是0 1 2 3 4）。造成这个问题的原因，就是var关键字声明的标识符的作用域范围是函数作用域。因此在上面的js代码中，i标识符是存放在全局作用域中的。因此，当setTimeout的回调函数执行的时候，i标识符存放的值已经是5了（5是循环结束的终点），因此将输出5个5。但这里还有一个疑点，为什么setTimeout执行的时候i已经是5了，是因为等待了1秒钟嘛？现在我们知道了第一个问题的答案和造成错误的原因，那么下面
2022-07-03 23:50:19
3220
原创 Vue ＜router-view＞用法
Vue <router-view>用法<router-view>有什么作用<router-view>一般用于路由管理。当我们需要对页面进行局部刷新的时候，就可以使用<router-view>。<router-view>具体使用场景例如，我们创建了一个侧边导航栏，并且需要使用侧边导航栏对主页面内容进行切换，主页面切换的时候保持侧边导航栏不变。（类似于掘金签到页面）。<router-view>使用方法主
2022-05-26 16:06:16
5808
原创 当有popup的时候，禁止页面滚动方案
当有popup的时候，禁止页面滚动方案问题背景有时候我们需要做一个弹窗，当弹窗出现的时候，我们有可能想要禁止整个页面滚动。解决方案使用css我们知道页面的滚动是由于页面内容超出viewport，且overflow属性被设置为auto或scroll。useEffect(() => { const handle = () => { if(isLockScroll) { document.body,style.overflow = 'h
2022-04-27 22:41:03
1268
原创 React中实现类似v-click-outside效果
给fetch方法添加timeout的方法问题背景在某些时候我们需要对基于fetch的AJAX方法添加timeout，但是不同于XMLHttpRequest，fecth不支持设置timeout。解决方法Promise.race([…])Promise.race()接受以数组形式传入的多个Promise对象，等待第一个resolved或rejected的Promise对象作为自己的状态。使用Promise.race([…])为fetch添加一个定时resolved的Prom
2022-04-24 22:35:21
539
原创 给fetch方法添加timeout的方法
给fetch方法添加timeout的方法问题背景在某些时候我们需要对基于fetch的AJAX方法添加timeout，但是不同于XMLHttpRequest，fecth不支持设置timeout。解决方法Promise.race([…])Promise.race()接受以数组形式传入的多个Promise对象，等待第一个resolved或rejected的Promise对象作为自己的状态。使用Promise.race([…])为fetch添加一个定时resolved的Prom
2022-04-18 22:59:48
1937
原创 React中点击滚动功能实现
React中点击滚动功能实现问题背景当我们在React中需要实现点击某处实现滚动到页面上某位置A的功能。解决方法使用ref + getBoundingClientRect() + scrollTo使用ref获取A位置处的DOM元素实例。使用getBoundingClientRect()获取滚动到这个DOM实例的距离。（rect.bottom是DOM实例A距离viewport左上角的Y轴上的距离）。使用scrollTo({top: dis, behavior: “smooth
2022-04-18 22:58:45
1949
原创 React组件定义多个className的方法
React组件定义多个className的方法问题背景有时需要对一个jsx中的元素定义多个类名，但是因为jsx不允许重复的属性，所以不能直接使用多个className。解决方法使用字符串拼接import styles from './index.module.scss';interface PropsType{ className: string;}const app: React.FC<PropsType> = () => { return (
2022-04-12 23:13:28
2174
原创 在Jupiter中使用自定义字体
引用自定义字体样式目录结构将字体文件放在 src/assets/fonts 文件夹中。定义一个fonts.scss文件在src/style文件夹中。这个fonts.scss文件用于使用字体文件定义自定义字体。利用字体文件定义自定义字体的方法使用@font-face@font-face{ font-family: 'XXX'; src: url('...');}上面的就是文件fonts.scss中的内容。font-family，用于定义自定义字体的名称
2022-04-08 23:55:14
309
原创 scss中的兄弟选择器 & scss常见编译规则总结
scss中的兄弟选择器问题背景当想要hover到元素A的时候，修改元素的display状态。一开始使用了下面代码.elementA{ &:hover{ .elementB{ display: block; } }}但实际上，上面的scss代码将会编译为.elementA:hover .elementB, .elementB:hover .elementB{ display: block;}由于在scss中，换行符将会被编译为
2022-04-08 23:46:45
2642
原创 React基础（3）—— React中修改arco-design组件内部样式（类似于Vue深度选择器）
React中修改arco-design组件内部样式（类似于Vue深度选择器）React样式隔离React样式隔离的方式是CSS Module。React中类似于Vue中深度选择器的方法Vue中的深度选择器可以在父组件的css中修改子组件中元素的样式。一般常用的是用于修改类似于arco-design的组件库中组件的内部元素的样式。React中类似的方法.a{ :global{ .b{ ... } }}上面是父组件的样式文件。.b是子
2022-04-08 23:44:35
3056
原创 React基础（2）—— React函数式组件使用ref
React函数式组件使用refrefref的作用ref用于获取DOM元素或子组件实例。useRefuseRef作用useRef用于返回一个可变的ref对象。这个refduix的current属性被初始化为useRef传入的参数initialValue。useRef返回的ref对象在整个生命周期中保持不变。（意思是这个ref对象的地址一直不会变）。ref对象变化不会触发视图更新。（但是当有state改变时，ref对象的变化也会显示在视图上）。获取的DOM实例将会储存
2022-04-07 23:11:35
6106
原创 WIP: Jupiter开发SPA经验总结
Jupiter开发SPA在开发环境调试启动服务yarn dev页面路由一个例子假设jupiter项目的项目结构是src pages app.tsx Front About index.tsx那么如果我们想要访问app.tsx的页面，需要进入localhost/app如果想要进入about页面，那么需要进入路由localhost/front/about如果路由不对，那么会进入404页面。项目结构梳理常用
2022-04-06 22:18:07
817
原创 React基础（1）—— React.FC和为组件定义类名
React.FCTS泛型TS泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的特性。React.FCReact.FC表示函数式组件，是在TypeScript中使用的一个泛型。为React.FC传入props一个例子interface PropsType{ msg?: string;}const app: React.FC<PropsType> = ({msg}) => { //{msg}相当于解构赋值，从pr
2022-04-06 22:15:34
15765
原创 Vite基础 —— 配置vite配置文件
ViteVite用来做哪些工作Vite是一种新型的前端构建工具，它的功能类似于webpack，但是服务启动速度和更新速度优于webpack。为什么需要构建工具有5个方向上的需求，使我们需要构建工具预处理在大型的项目中，我们经常使用SCSS、TS等需要经过编译才可以执行的语言，构建工具可以帮助我们完成这些工作。eslint构建工具可以帮助完成eslint的检查。资源压缩在大型项目中，我们一般将业务逻辑单独写在以一个文件中，但是如果到了生产环境，用户仍然需要加.
2022-03-24 16:14:21
3078
原创 node.js基础——node版本管理工具
NVM用法nvm的作用/什么是nvmnvm全名是 node.js version management，用于管理node.js版本，一般我们可以使用nvm来管理node.js的版本，以解决node.js各种版本存在的不兼容问题。为什么需要管理node.js的版本在实际工作中，我们可能同时进行多个不同项目的开发，由于每个项目的需求不同，进而不同项目需要依赖的node.js版本不同，这时我们就需要在同一台设备上切换不同的node.js版本。nvm、node.js、npm的区别
2022-03-24 15:48:40
1421
原创 深入理解TS（6）—— readonly
readonlyreadonly的作用readonly用于标记一个属性是只读的，也就是不可修改的。function foo(config: {readonly bar: number, readonly bas: number}){ console.log(config.bar) config.bar = 123 //不能将123分配到config.bar，因为config.bar是只读属性。}readonly用法直接在属性上使用在对象中使用，规定对象的属性是只读属性.
2022-03-23 02:13:36
4141
原创 深入理解TS（5）—— 字面量类型
字面量类型字面量类型TS支持将一个字面量当成一个类型使用。let foo: ‘Hello’;foo变量的类型是 ‘Hello’，它只能兼容字面量值为 ‘Hello’ 的变量，也只能接受 ‘Hello’ 作为赋值数据。let foo: 'Hello';foo = 'Hello'foo = 'a' //不能将'a'分配给'Hello'类型TS提供3种字面量类型字符串字面量类型字符串字面量类型就是使用字符串字面量作为类型。实际上单个的字符串字面量类型并不是很有用，但.
2022-03-23 02:12:02
1426
原创 深入理解TS（3）—— TS类型断言
TS类型断言类型断言的作用类型断言用于实现覆盖编译器推断的类型。也就是说，当我们使用了类型断言，那么就相当于告诉编译器，我们比它更了解这个变量应该是什么类型，编译器不应该再继续报错。interface FooType{ a: string, b: number,}const Foo = {} as FooTypeFoo.a = 'a'Foo.b = 1类型断言和类型转换的区别类型断言不等同于类型转换类型转换发生于运行时。类型断言发生于编译时。使用类型断.
2022-03-20 02:36:54
4153
原创 深入理解TS（2）—— TS中的函数与可调用注解
TS中的函数与可调用注解为参数添加注解在TS中，我们可以为函数的参数添加注解。为函数返回值添加注解类似于为函数的参数添加注解，TS也支持为函数的返回值添加注解。（但是一般我们不需要为函数的返回值添加注解，因为TS编译器会自动推断）。如果我们想要定义一个不返回值的函数，那么可以将函数返回值的类型定义为void。可选参数我们可以使用 ? 将某个参数定义为可选的参数。我们也可以为参数提供一个默认值。（在参数类型声明的后面使用 = initalValue）。函数重载函数重载的作用函数重.
2022-03-20 01:51:04
2091
原创 npm基础理解和一些常用命令
npm基础理解和一些常用命令npm的作用/什么是npmnpm是node package manager，也就是一个包管理工具（由于JS支持模块化，所以很多模块可以复用，也就是包）。安装npm可以通过安装node.js顺带安装npm，因为npm是node.js的默认包管理工具，所以安装node.js之后，npm也安装好了。node -vnpm -v可以使用-v参数来查看node.js和npm的版本，以此检查是否安装完成。使用npm安装指定包假设要使用npm安装
2022-03-18 18:01:53
706
原创 TS枚举 —— 数字枚举可以互相映射的原因
TS数字枚举可以互相映射的原因数字枚举TS的数字枚举是枚举的一种，TS的枚举如果不为它的枚举成员定义字符串等值的话，那么默认是数字枚举。数字枚举也就是，枚举中所有枚举成员的值都是number类型。如果不为数字枚举的枚举成员定义值，那么将从0开始递增。数字枚举互相映射数字枚举是可以互相映射的。（其他如字符串枚举都不行）enum LivingStatus{ preview, living, replay, ended}LivingStatus['preview
2022-03-18 02:24:53
1680
原创 深入理解TS笔记（1）—— TS的类型系统
TS的类型系统基本概念下面将说明几种基础的TS类型注解基本类型注解JS的基本类型可以用作类型注解，如可以声明某个变量的类型是number。数组注解数组注解用于为数组添加类型注解，它一般由 元素类型 + []组成（如，boolean[]）。接口注解接口注解用于将多个类型注解合并为一个类型注解，这就允许我们利用接口为对象等规定类型。内联类型注解内联类型注解功能类似于接口注解，可以用于约束对象等的类型。（如果需要为多个对象提供相同的类型，那么还是建议使用接口注解.
2022-03-18 02:23:20
1609
原创 Vue基础 ——Vuex
VuexVuex作用Vuex是专门为了管理状态而生，并且它是响应式的。当有一个状态会被多个组件使用并且更改时，将这个状态放到Vuex的store对象中是个好的选择。store对象state选项用于储存状态。Getter选项用于定义对于state的一些多次使用的操作函数。Mutation选项用于定义对于state的更改（副作用）处理函数，需要通过commit调用。Action用于处理Mutation无法处理的异步情况，但是Action必须通过commit调用Mutation才可以更.
2022-03-14 00:48:06
776
原创 在setup()函数中获取全局实例方法 & Vue组件的data域（this指向）
在Vue3的setup()函数中获取全局实例方法在Vue2中，我们可以通过this.$来获取全局实例方法一个例子this.$requestLogin()这样就可以获取定义在main.js中的全局实例方法。但是在Vue3中的setup函数中，由于不存在this，所以上面的方法是不行的下面提供2种方法使用getCurrentinstance()const instance = getCurrentInstance()instance.proxy.$requestL
2022-03-09 23:18:09
3888
3
原创 TS支持的ES6类（包括一些仅TS支持的特性）
TS支持的ES6类继承ES6提供了extends用于实现单继承单继承单继承是指一个类只能有一个父类语法如果想要实现继承，那么必须在子类的构造器中调用父类的构造器。（使用super()可以调用父类的构造器，传给super()的参数就是传给父类构造器的参数）。静态ES6的类支持静态成员（静态属性和静态函数）静态成员会被所有实例共享。访问修饰符（仅TS可用，当TS被编译为JS后访问修饰符就不再有意义）ES6支持访问修饰符，它们决定了成员的可访问性。public.
2022-03-08 01:22:40
665
原创 v-if遇到setTimeout(() =＞ {emit(‘xxx‘)},0)
v-if遇到setTimeout(() => {emit(‘xxx’)},0)一个例子当我们需要在父子组件间通信时候，我们需要使用emit子组件setup(props,{emit}){ function handleClick(){ emit('XXX') }}这时当子组件中触发了点击事件，调用handleClick函数之后，将会发送自定义事件XXX到父组件父组件<SubComponent v-if="isVisblie" @XXX="onSu
2022-03-04 20:48:26
808
原创 当控制台遇上异步数据
当控制台遇上异步数据同步和异步首先我们来回顾一下JS的同步和异步的执行逻辑JS利用事件循环规定了同步和异步的执行逻辑执行栈和事件队列执行栈：当主线程在执行过程中遇到同步代码，会按照顺序添加到执行栈。function a(){ b(); console.log('a');}function b(){ console.log('b');}a()上面的实例代码中，执行栈的变化如下首先要执行函数a，所以函数a入栈函数a中首先要执行函数b，所以函数b入栈
2022-03-03 21:41:37
507
原创 Vue——transition组件
Vue的transition组件使用<transition>的时机，为什么使用<transition>，<transition>的实现原理首先我们需要理解<transition>有什么作用<transition>组件用于给某个元素或组件添加过渡动画效果，只需要用<transition>把该元素或组件包裹起来，就可以封装成过渡组件。<transition name="fade"> <my-comp
2022-03-02 18:50:56
4846
原创 WIP: React基础——hook
副效应、useEffect、useMemo、useCallback副效应（纯函数只能涉及数据计算，其他操作都是副效应）在函数式编程中，将只利用输入通过一系列计算得到输出的函数叫做纯函数，而如果函数中需要改变外部状态，如修改一个变量的值，那么这部分代码是函数中的副效应。React hook的作用就是利用hook来为纯函数添加副效应。useEffectuseEffect是最常用的React hook，它包含有2个参数，第一个是一个effect函数，第二个参数可选，是一个数组（数组中
2022-02-22 21:54:56
368
原创 TS基础——为函数声明类型
TS中定义函数类型写在之前TS对JS函数的修改是，为JS函数增加了强类型语言（C++等）函数的用法。如何定义一个函数类型基础用法function add(x: number, y: number): number{ return x + y;}上面的例子中，规定了函数add的第一个参数类型必须是number，第二个参数的类型必须是number，以及函数的返回值的类型必须是number。我们也可以不定义函数的返回值类型，因为TS类型检查系统会对返回值进行类型推断。fu
2022-02-22 21:52:12
2900
原创 模块化——import和require
import和require写在之前import和require都是JS模块化编程使用的，用于提升前端性能。对模块化的理解模块化主要是将一整个系统拆分成各个独立的部分。一个模块是完成某一个功能的一段代码（可以和组件相比较理解）。在JAVA中模块化是将实现某个功能的一段代码封装成一个类，但是因为JavaScript中没有类（至少ES6之前没有类），因此JS借助了对象或构造函数来模拟类进而实现模块化。引入规范require/exports是commonJS引入。（comm
2022-02-21 22:10:32
514
原创 React事件处理函数 和 作为props传入子组件的处理函数的不同（某些写法容易造成误解）
React事件处理函数 和 作为props传入子组件的处理函数的不同问题描述有时候我们会遇到事件处理函数的入参不知道从哪里来的的情况（尤其是使用组件库的时候容易遇到这种情况）class Calculator extends React.Component { constructor(props) { super(props); this.handleCelsiusChange = this.handleCelsiusChange.bind(this); this.
2022-02-21 22:08:14
386
原创 WIP:TS基础——接口(interface)
TS中的接口写在之前或许当我们只需要定义一个对象或类的时候，使用接口对它们进行约束是显得麻烦的，但是当我们需要定义具有同样结构的多个对象或类的时候，接口就体现出它的作用了。接口有什么作用，什么时候应该使用接口定义我们可以先看看接口的定义，接口是对某些数据或方法的约束规则。其他面向对象编程语言中的接口接下来我们可以先了解一下其他面向对象的语言，如C++中，接口的作用，在C++中，接口用于规定子类implements接口之后，必须实现接口中规定的变量和方法（相当于是对子
2022-02-18 20:54:55
837
原创 WIP: Composition API——Ref和Reactive
Vue3中的Composition API Ref和ReactiveComposition APIVue3最大的特点在于引入了Composition API，而Composition API中的Ref和Reactive允许我们创建响应式数据。Vue2中的响应式如果想要在Vue2中创建响应式数据，那么需要在data函数中返回的对象中声明这个数据。<template> <h1>{{ title }}</h1></template>.
2022-02-17 21:00:51
258
原创 CSS基础——常用属性的百分号如何计算
CSS中常用属性设置百分号是如何计算的百分号的作用我们使用百分号作为一些CSS属性的值可以实现自适应的效果。但是为了正确的使用百分号，我们需要明确不同CSS属性的百分号是相对于哪个值计算的。不能使用百分号作为属性值的属性border-width属性不能使用百分号作为属性值。可以使用百分号的属性line-heightline-height的百分号值是相对于当前元素的font-size值计算的，如当前元素font-size: 12px;，那么line-height:
2022-02-17 15:04:09
512
原创 TS基础 —— 枚举
枚举简介枚举是一个键值对的形式，可以看成是JavaScript中的JSON对象一样。TS使用 enum 关键词声明枚举。如何创建一个枚举，以数字枚举举例使用enum关键词，关键词后接枚举的名称，然后创建一个大括号块，并在这个块里指定枚举成员。enum Direction{ North = 1, East, //默认递增，所以值是2 South, //值是3 West, //值是4};数字枚举数字枚举的成员都是number类型的。对于...
2022-02-15 20:51:53
2385
原创 Vue的virtual dom 和 render函数
1. Virtual DOM介绍virtual DOM实际上是一个JavaScript对象，它相比于DOM运算会小很多。当状态发生变化的时候，前后的virtual DOM会进行diff运算，这样可以只更新部分改变了的DOM，而不是全部重绘。作用Vue2使用了virtual DOM来更新DOM，这样减小le开销。虽然我们一般将组件模板写在template中，但是当Vue编译的时候，都会解析为virtual DOM。VNodevirtual DOM是使用VNode描述的.
2022-01-28 18:45:35
1021
原创 Vue基础 -- Vue组件
Vue组件1.1 组件用法<!DOCTYPE html><html> <head> </head> <body> <div id="app"> <mycompoent></mycompoent> <!-- 在Vue实例中使用Vue组件必须在创建实例之前注册组件。 --> </div> </body> <script.
2022-01-14 20:55:45
449
原创 Vue内置指令
<!DOCTYPE html><html> <head> <title>css属性选择器</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <
2021-12-27 21:50:49
195
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人