- 博客(178)
- 收藏
- 关注
RSS订阅原创 《深入理解现代JavaScrpt》阅读笔记-目前更新第五章
是非标准扩展，在非浏览器环境的JavaScript引擎中，该方法不存在，所以不要使用，可以选择。返回值不一定要与暗示值匹配，暗示只是暗示。ES5中，如果想创建一个属性名为变量的对象，必须要创建这个对象，然后为该对象添加属性。作用域链:多个作用域嵌套，就近选择，先在自己作用域找，然后去就近的作用域找。：将对象转换为原始值的内置方法，强制类型转换制算法优先调用对象该属性的方法。在对象中将数据转换为原始类型的操作中，传统的方式带有一定的暗示作用。使用场景:创建的方法是在运行时确定名称的，而不是在代码中给定的。
2024-05-23 11:47:36
454
原创 react Effect副作用 - 避免滥用Effect
仅执行计算操作，不做其他操作，这类函数通常被称为纯函数。纯函数的特征1.只负责自己的任务，它不会更改在该函数调用前就已存在的对象或变量。2.输入相同，则输出相同，给定相同的输入，纯函数应总是返回相同的结果。React便围绕着这个概念进行设计，假设编写的所有组件都是纯函数。React的渲染过程必须自始至终是纯粹的，不改变在渲染前，就已存在的任何对象或变量。– 这将会使其变得不纯粹，也就是我们说的产生副作用。/*案例1：不纯粹组件的写法该组件正在读写其外部声明的 guest 变量。
2024-05-13 16:46:06
767
原创 Threejs 学习笔记 | 灯光与阴影
near ：摄像机所在点为原点，垂直于left\right\top\bottom构成的十字坐标系，从距离原点什么位置开始进行渲染。far：摄像机所在点为原点，垂直于left\right\top\bottom构成的十字坐标系，到距离原点什么位置结束渲染。decay： 沿着光照距离的衰减量，默认值为 2。想象灯光，越靠近光源，光线越亮，光线会随距离的增而衰弱。2.将点光源添加到小球的children中，这样小球就成为点光源的父级。distance ：光源照射的最大距离，默认值为 0（无限远）。
2024-05-10 15:09:09
1042
原创 input框添加验证(如只允许输入数字)中文输入导致显示问题的解决方案
测试环境：react + antd input (react的事件与原生js事件不同，思路是等同的)1.先关闭验证，在中文输入时，输入框会显示输入的字符。通过打印发现，输入中文时。回调函数提前退出不做验证；在中文输入完成后，触发验证。2.打开验证，输入字符串时验证正常，但在输入中文时，框只允许输入数字，如果输入字符不是数字就替换为空。所以我们的思路是，在进行中文输入的时候。也会被触发，验证异常。一下两个事件的触发时机。
2024-04-26 11:15:42
396
原创 react query 学习笔记
中正在挂载的组件进行重新获取操作，如果组件被卸载（比如离开了当前页面组件等），并不会执行上述操作。， 只记录工作中使用到的主要功能，在使用中会不断更新，关于返回值等具体参数可以通过打印返回值查看。在内部基于查询键值来管理查询缓存，可以理解为依赖，如果依赖变化那么会重新发送查询请求。去查找状态树中是否有可用的数据，如果有则直接返回，否则则会发起请求，并将请求结果以。，比如在获取用户数据时，为了UI不那么难看，可以先默认展示一个占位头像。的组件挂载时②当用户将浏览器重新聚焦，切换到前台时③网络从离线到上线。
2024-04-10 23:10:49
1130
原创 threejs 组-层级模型 | 本地坐标和世界坐标 | 局部坐标系和世界坐标系 | 本地矩阵.materix和世界矩阵.matrixWorld
①会更新该三维物体的本地矩阵属性，②本地矩阵与父对象的世界矩阵做乘积，③依次更新该三维物体后代的世界矩阵（迭代①②③）。同一个三维物体拥有本地坐标与世界坐标两个坐标，在页面看见的位置是世界坐标的位置。这里的本地坐标和世界坐标是相对于有无父元素来说，坐标都是基于世界坐标系的位置。可以类比本地坐标与世界坐标，物体的运动参考坐标系永远是世界坐标系。1.可以看见本地坐标变了，但本地坐标系位置是没有变化的。2.打印世界坐标与本地坐标，可以发现都是一样的。，现在是将所有模型先进行分组，然后将分组后的分组模型。
2024-04-08 21:45:06
902
原创 react 父子组件的渲染机制 | 优化手段
本方法与组件形式引用的区别：组件重新渲染其实是执行render方法， 如果子组件采用组件形式引入(可以理解为这里引入的是子组件render方法的执行结果。但有些场景下我们并不希望所有的子组件都重新渲染，比如在一个列表中，我们只希望重新渲染单击受新选择影响的这项。有时无法轻易的把一个组件单独的独立提取出来，此时可以把带状态的组件提取出来，然后把耗时的组件作为。方法是一个高阶函数，参数是一个组件A，返回包装过的新组件B。比如选中的子组件高亮，父组件维护一个选中子组件的。发生变化，才会触发组件重新渲染。
2024-04-01 17:01:55
1110
原创 antd table 中列内容为一组tag，tag个数自适应显示，当列宽不够时省略(+X)显示，hover时获取到隐藏的tag。
有一个问题是上述思路宽度是固定的情况，在这里也就是表格初始化的时候。但表格是自适应的，列宽可以改变。因为没有办法监控表格什么时候触发自适应，或者说获取这一列的宽度过于麻烦，所以最后采用两个组件的结合实现。的hash值选中了局部组件，其实这里的全局修改还是局部修改的。，比较每一个tag距离顶部的距离来判断是否放不下。模式选择多选，最大的tag数选择自适应。设置如果超出的省略显示，其参数。是封装好的组件，功能大概是如果。组件的样式，首先局部引入样式(标签，当列宽放不下时，省略。显示省略tag的内容。
2024-03-27 14:30:41
808
原创 react useState的初始化函数 初始化值为props时的同步问题 | setState函数的使用与异步更新
的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”。按照惯例，通常将待定状态参数命名为状态变量名称的第一个字母，如 age 为 a。明确这里所说的同步和异步指的是 API 调用后更新 DOM 是同步还是异步的。2.当事件被触发后，通过获取事件源对象，查看事件源对象中是否存在。不是同步地一个一个执行，会一个一个加入队列，然后最后。，修改的是组件下一次渲染的。
2024-03-26 17:05:41
1263
原创 ThreeJS 几何体顶点position、法向量normal及uv坐标
本来矩形由2个三角形组成，也就是6个顶点。但有些顶点重复，为了复用我们也设置了顶点索引。所以这里的法向量也按照顶点索引来设置。// 顶点索引 [0, 2, 1, 2, 3, 1]0, 0, 1,0, 0, 1,0, 0, 1,0, 0, 1])
2024-02-23 16:47:28
1646
1
原创 Three.js 纹理贴图 - 环境贴图 - 纹理贴图 - 透明贴图 - 高光贴图
描述几何体的顶点坐标描述纹理贴图的坐标位置关系是一一对应的，每一个顶点位置对应一个纹理贴图的位置根据纹理坐标将纹理贴图的对应位置裁剪映射到几何体的表面上。0, 0, 0, //顶点1坐标100, 0, 0, //顶点2坐标0, 100, 0, //顶点3坐标]);0, 0, //顶点1对应位置的纹理坐标uv1, 0, //顶点2对应位置的纹理坐标uv0, 1, //顶点3对应位置的纹理坐标uv]);
2024-01-31 11:25:52
1362
原创 vue中图片不显示问题 - vue中静态资源加载
变量的值，该变量的值就是一个字符串，所以最后显示的是字符串没有解析地址去获取图片。是一个 ESM 的原生功能，会暴露当前模块的 URL。require是在运行时加载，import是编译时加载。中会将图片来当做模块来用，因为是动态加载的，所以。为了能让Webpack返回正确的资源路径，使用。根据结果来看，相对地址没有被解析。这里的错误原因理解的是动态绑定。进行解析，然后返回处理过的。进行解析，然后返回处理过的。解析到的路径都会被解析为。提供的一种加载能力，但是。提供的静态资源载入方法，
2024-01-24 16:02:44
2292
原创 JavaScript理解模块化的作用域 | 作用域 - 执行上下文 - 模块化
每个js文件都是一个单独的模块，每个模块在编译包装后形成函数，所以每个模块内容都在一个函数作用域里。aaa执行时，现在当前函数作用域找a(l理解为aaa.a)，没找到。这种静态语法，在编译过程中确定了导入和导出的关系，所以更方便去查找依赖，更方便去 tree shaking。，每当调用一个函数时，都会创建一个新的函数执行上下文，函数执行上下文在函数执行结束后被销毁。模块的概念：一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。3.执行函数：在函数上下文中，执行函数体内的代码。
2024-01-22 16:09:25
931
原创 Three.js 学习笔记之模型 | 几何体 - 材质
说明：几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，用来模拟物体的表面。4.1使用点模型渲染顶点数据，会把几何体渲染为点，网格模型Mesh会把几何体渲染为面。4.2使用线模型渲染顶点数据，从第一个点开始到最后一个点，依次连成线。在上述案例中，坐标4和坐标5其实是重复的坐标，重复的坐标可以复用吗？顶点坐标：一个矩形平面，可以至少通过两个三角形拼接而成。三个点可以构成一个三角形，从第一个点往第三个点连接。是一个没有任何形状的空几何体，通过定义顶点数据将。几何体顶点位置数据和点模型。
2024-01-17 20:46:30
1248
1
原创 three.js 学习笔记
渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix，但是不会每渲染一帧，都通过相机的属性计算投影矩阵(节约计算资源)。比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。没有特定方向，整体改变场景的光照，会均匀的照亮场景中的所有物体。(物体表面)的影响，如果使用受光照影响的材质，在不开灯的情况下是看不见的。反射的光线越多，光越亮，反射的光线越少光越暗。
2024-01-07 21:41:15
1006
原创 线性代数的本质 (学习中 1.10更新)
在线性代数中，Vector被称为向量。在几何中，Vector被称为矢量。向量意义对数学家来说，向量是一个数字列表(程序员一般称为数组)。[1,2,3]表示为行向量，垂直过来就是列向量。可以引用向量来表示各个分量，通常使用x,y来代指二维向量中的元素，x,y,z来代指三维向量中的元素。比如a=[1,2,3]中矢量意义矢量是具有大小和方向的有向线段矢量的大小：矢量的长度，非负值。矢量的方向：描述矢量在空间中指向的方向。图形上每个矢量是位置无关的，比如使用笛卡尔坐标描述矢量时，
2024-01-02 23:00:19
524
原创 JavaScript Class类 | 类的继承 - 类的使用 -原型与原型链
有一种说法解释： 因为构造器是用来对实例初始化的，而子类实例在初始化之前要先初始化它的父类成分。因为 JS 是弱类型的，super 调用时的传参没法自动预判，没法代劳。Parent.call(this,name) 第一次参数是指定函数Parent里的this 为参数this，name为Parent函数传递的参数。存在暂时性死区,代码执行过程中的一段时间内，在此期间无法使用标识符，也不能引用外层作用域的变量。实例原型链:子类的实例可以拥有父类的方法，通过。作用:创建一个新对象，新对象的隐式原型指向参数。
2023-12-29 15:32:13
992
原创 react 学习笔记 | JSX - React组件 - 钩子函数 - redux - RTK - Hook
AJAX+DOM可以实现网页的局部刷新，但是新数据不能直接在网页中显示，需要通过DOM将数据转换为网页中的节点。react帮助我们根据不同的数据来快速构建用户项目,同时在构建过程中确保其流畅度。react特点1.使用虚拟DOM而不是真正的DOM2.声明式编码(声明式:结果为导向,不关心结果 命令式:一行代码一个命令)3.支持服务器端渲染用来创建React元素(并不是ReactDom，所以这里使用React调用)class属性需要使用className属性代替。type。
2023-12-06 22:40:40
1281
1
原创 CSS选择器
伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如。从左到右依次比较，如果A相同继续往下比较取较大值，如果A不同取A大的值。伪类和伪元素的区别：是否创造了“新的元素”激活的链接（鼠标在链接上长按住未松开）优先级是由 ABCD 的值来决定的。伪类表示被选择元素的某种状态，例如。常见选择器： 通配符选择器。表示子元素，它有父元素。
2023-11-02 14:34:30
127
原创 H5新Api | requestIdleCallback - requestAnimationFram
但是如果在空闲时间内依次执行callback时，有一个callback的执行时间，已经将空闲时间用完了，剩下的callback将会在下一次的空闲时间执行。页面每隔16.7ms才会渲染一次，那么在两次渲染的中间时间，就是浏览器的空闲时间，在这段空闲时间执行的任务，是不会阻塞到页面渲染的流畅性的。在Event Loop的执行时机如下图所示，蓝色区域代表一帧内的渲染任务，当这些任务执行完后，剩余的时间被认为是空闲时间。每次执行下一个任务时，先检查当前页面是否该渲染下一帧了，如果是则让出线程，进行页面渲染。
2023-10-27 17:55:02
323
原创 TypeScript学习笔记 | 泛型 - 泛型的应用 - 泛型工具类 - extends - infer用法
泛型指是在定义函数或者类时并不知道类型，在被使用时才知道数据的类型。泛型先起到一个占位的作用，在使用时接收传递过来的类型。也可以将泛型类比于参数，参数接收的是变量值，泛型接收的是类型。T被称为类型变量（type variable），T作为参数泛化成具体类型的作用叫做类型参数化。说明1.泛型和变量一样，可以指定多个。比如，中间使用逗号隔开。2.泛型和变量一样，可以指定默认值。比如。3.泛型定义的位置，定义的位置一般在标识符的后面。比如。
2023-10-25 15:56:36
234
原创 异步迭代器 for-await-of
集合概念有字符串、数组、对象、Map、Set，需要有一个统一的来处理所有不同的数据结构。迭代器iterator是一种接口，为不同的数据结构提供统一的访问机制Iteratorfor..offor-ofArray.from（…）Set。
2023-10-25 15:42:06
523
原创 CSS布局 | flex布局
flex是CSS3中新增的布局手段，优势是适用于不同屏幕尺寸和设备，任何一个容器都可以指定为Flex布局，Flexfloatclear弹性容器(flex容器)：要使用弹性盒，必须先将一个容器设置为弹性容器弹性元素(flex项目)：弹性容器的主轴：弹性元素的排列方式为主轴，默认水平方向justify侧轴：与主轴垂直方向为侧轴align。
2023-10-07 17:22:30
371
原创 TypeScript常见类型错误 | 类型EventTarget上不存在属性 - ts中的dom类型
事件,包含了事件的基本信息,如事件类型、目标元素等。可以使用该接口来定义事件的类型。在TypeScript中，使用事件回调函数的参数。更具体的dom元素类型基本都继承。，并对其进行了扩充。，可以将其进行更具体化的约束。xxx不存在xx类型。
2023-09-28 16:24:07
2235
原创 vue | 样式隔离scoped的原理 样式穿透deep的原理
的样式节点没有父节点，这种用法是没有意义的。使用deep之后解析的代码为。原因是没有父节点说明本身就是该组件的根元素，那么父组件可以修改其样式。，这样就可以使得组件之间的样式不互相污染。如果一个项目中的所有。标签上有子组件的hash值。，相当于实现了组件的私有化，样式的模块化。是子组件的根元素可以获取到，我们也可以看见。，那么父组件该样式的优先级高一点，所以。的样式可以作用得更深，比如影响子组件。此时，父组件的样式没有生效。,来达到样式隔离的效果。如果在父组件中设置样式。的原理就是在前面添加。
2023-09-27 23:24:55
627
原创 vue2/vue3 v-if与v-show的区别 | 触发的生命周期
都会导致父组件更新视图，所以会触发父组件的。vue2/vue3行为一致，vue3的生命周期函数。
2023-09-25 16:37:08
362
原创 H5新特性 滑动选择器input的属性type新值range
去掉系统默认样式设置滑轨的样式设置滑块(thumb)的样式// 需要重置浏览器的默认样式#slider {//原始的控件获取到焦点时，会显示包裹整个控件的边框，所以需要取消。height: 宽高需要设置;width: 宽高需要设置;margin: 0;background: 可以使用颜色或背景图图片;// 设置滑块的样式width:宽高需要设置;height: 宽高需要设置;background: 可以使用颜色或背景图;
2023-09-25 15:58:23
513
原创 vue3硅谷甄选01 | 使用vite创建vue3项目及项目的配置 环境准备 ESLint配置 prettier配置 husky配置 项目集成
使用vite搭建项目，vite需要nodejs版本14.18+、16+pnpm:performant npm(高性能的npm)由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。pnpm安装指令创建项目打开项目，需要手动在浏览器输入地址。修改文件的字段，这样使用命令会自动打开浏览器。
2023-09-18 21:48:28
801
原创 JavaScript 的真值与假值 | 如何判断一个对象为空
对象的遍历方法如Object.keys等介绍文章:https://blog.csdn.net/qq_41370833/article/details/132303942。可能{}和[]是引用类型，即使内容为空，但是地址值仍在存在?
2023-09-08 15:05:21
191
原创 DOM渲染与优化 - CSS、JS、DOM解析和渲染阻塞问题
知识点对于浏览器说，页面加载主要有两个事件浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。HTML文件的解析就是生成DOM树的过程HTML中的三类script渲染进程在解析 HTML 的时候，如果遇到一个没有任何属性的 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完成后再切换回渲染引擎继续渲染流程。async、defer属性的js脚本，渲染引擎遇到这一行命令，
2023-09-08 14:17:40
3919
3
原创 vue2 vue3 组件传值的方式
父组件传子组件父组件在使用子组件时通过设置属性传值，子组件使用props接收子组件传父组件自定义事件 父组件将自定义事件传递给子组件，子组件emit接受什么是单向数据流数据流是指组件之间数据的流向，单向数据流指数据只能从父组件向子组件传递，子组件无法改变父组件的props，如果想修改有其他的方式。为什么不能是双向的父组件的数据发生改变，会通过props来通知子组件自动更新。防止多个子组件都尝试修改父组件状态时，导致数据混乱单向数据流的好处。
2023-09-04 21:40:00
912
原创 阅读笔记 | vue3的hooks/ vue2的mixin
1.将可复用功能抽离为外部JS文件2.函数名和文件名以use开头，比如usePlayBar3.引用时将需要的变量或者方法显示解构暴露出来，比如。
2023-08-30 14:43:14
454
原创 vue3 ref reactive响应式数据 赋值的问题 | 解构失去响应式问题
了一个新变量，所以解构之后是一个基础数据则会响应式丢失。如果解构之后是一个引用类型，相当于操作的地址还是被Proxy监管，所以响应式不会丢失。reactive内部的实现是创建一个代理对象Proxy，以及进行了一系列处理。reactive失去效应是不在于Vue而在于Proxy对象本身。比如解构之后是基础类型的数据，那么解构相当于copy了一个值。访问时直接访问的这个copy值，跳过了代理，所以不会触发。以数组为例，对象也是一样的操作。，方法2其实就是参考了该方式。解构相当于将该变量重新赋给(
2023-08-30 11:01:53
5026
原创 git学习笔记 | 版本管理 - 分支管理
git checkout -- 文件名 #丢弃某个文件的修改git checkout . #丢弃全部丢弃全部包括:新增的文件会删除，删除的会恢复，修改的会回去。变化的地方是基于上一次add或commit。
2023-08-29 15:34:22
2071
原创 JavaScript 对象方法及其扩展| 对象的遍历方法 | Object.create | Object.assign
3.遍历所有 Symbol 键，按照加入时间升序排列。2.遍历所有字符串键，按照加入时间升序排列。1.遍历所有数值键，按照数值升序排列。
2023-08-23 16:37:47
138
原创 TypeScript引用类型 | 空对象增加属性报错解决方案 - 在TypeScript中动态为对象赋值 - 初始化空数组 -具有未知键的对象定义类型
适用于明确有哪些属性的情况//a.b可以赋值任意的类型源码涉及到 undefined 表达都会被编译成 void 0如果不确定对象中的属性名//propName 可以是任意值a.a = 1;如果确定部分属性名，可以结合可选属性和必选属性规范传入的参数: numberDQGStyle?
2023-08-17 10:57:13
1306
原创 element-ui 合并表格行
element-ui提供的方法直接返回的是合并的行和列，所以我们需要一个方法来计算合并的行。由于element一行一行渲染，在渲染的时候调用合并函数，所以数据最好以一行一行的格式准备。相同的列需要合并(这里的数据是有序的，id相同的挨在一起)假设后台传过来的数据是以下的格式，就需要对数据进行。动态获取数据后，将ID相同的行，ID合并成一个。首先需要明确的是哪些行的第一列需要合并？
2023-07-27 15:02:36
1346
原创 在setup中使用$refs的方法
setup的第二个参数context提供了一个上下文对象,context作为上下文取代this，但是context中只有emitattrs,和slots。在非setup钩子中, 我们都是通过this.$refs来获取指定元素。this.$refs如果获取在指定元素时元素还没有挂载完成，使用nextTick延迟获取。
2023-07-25 18:02:33
1565
原创 vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题
原因就是 el-form 声明了ref=“service”，导致 state 中声明的 service 被覆盖，2者冲突了。重构vue2项目时发现的问题，原始项目使用的是。的值一样导致出现了这样的问题。其实vue3可以使用适配的。
2023-07-25 14:46:20
1477
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人