- 博客(138)
- 收藏
- 关注
RSS订阅原创 【前端知识】Node——文件流的读写操作
1.Writable: 可以向其写入数据的流2.Readable: 可以从中读取数据的流3.Duplex：同时为Readable 和 Writable4.Transform: Duplex可以在写入和读取数据时修改或转换数据的流。
2023-11-21 11:09:12
252
原创 【前端知识】Three 学习日志（十二）—— WebGL渲染器设置(锯齿模糊)
/ 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题。// 不同硬件设备的屏幕的设备像素比window.devicePixelRatio值可能不同。// 引入轨道控制器扩展库OrbitControls.js。// 创建3D场景对象Scene。'查看当前屏幕设备像素比'//网格模型对象Mesh。//点光源添加到场景中。//监听鼠标、键盘事件。
2023-09-19 14:31:05
538
原创 【前端知识】Three 学习日志（十一）—— 高光网格材质Phong
/ 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景。// shininess: 80, //高光部分的亮度，默认30。// 引入轨道控制器扩展库OrbitControls.js。// 模拟镜面反射，产生一个高光效果。// 模拟镜面反射，产生一个高光效果。// 创建3D场景对象Scene。//高光部分的亮度，默认30。//高光部分的颜色调整为白色。// 设置相机控件轨道控制器。//网格模型对象Mesh。//点光源添加到场景中。//监听鼠标、键盘事件。
2023-09-19 14:14:27
433
原创 【前端知识】Three 学习日志（九）—— 阵列立方体和相机适配体验
/ 相机控件.target属性在OrbitControls.js内部表示相机目标观察点，默认0,0,0。// 引入轨道控制器扩展库OrbitControls.js。// //在原来相机位置基础上拉远，可以观察到更大的范围。// 设置相机控件轨道控制器OrbitControls。// 创建3D场景对象Scene。// //环境光强度调整为0.8。// // 改变相机观察目标点。//材质对象Material。//网格模型添加到场景中。//网格模型对象Mesh。// 在XOZ平面上分布。
2023-09-19 11:48:19
256
原创 【前端知识】Three 学习日志（八）—— 全屏渲染
/ 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵。// 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix。// 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)// 全屏情况下：设置观察范围长宽比aspect为窗口宽高比。// onresize 事件会在窗口被调整大小时发生。// 创建3D场景对象Scene。// //环境光强度调整为0.8。//网格模型对象Mesh。
2023-09-19 10:20:09
166
原创 【前端知识】Three 学习日志（七）—— 动画渲染循环
/ 引入轨道控制器扩展库OrbitControls.js。//请求再次执行渲染函数render，渲染下一帧。// 创建3D场景对象Scene。// //环境光强度调整为0.8。//每次绕y轴旋转0.01弧度。'两帧渲染时间间隔(毫秒)'//网格模型对象Mesh。
2023-09-19 10:07:08
201
原创 【前端知识】Three 学习日志（六）—— 环境光与平行光
/ 设置光源的方向：通过光源position属性和目标指向对象的position属性计算。// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景。// 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0。// DirectionalLightHelper：可视化平行光。// 创建3D场景对象Scene。// //环境光强度调整为0.8。// 设置相机控件轨道控制器。//网格模型对象Mesh。//监听鼠标、键盘事件。
2023-09-19 09:42:50
389
原创 【前端知识】Three 学习日志（五）—— 点光源辅助观察
/ 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景。// 引入轨道控制器扩展库OrbitControls.js。// 创建3D场景对象Scene。// 设置相机控件轨道控制器。//网格模型对象Mesh。//点光源添加到场景中。//监听鼠标、键盘事件。// 改变点光源位置。
2023-09-19 09:22:04
202
原创 【前端知识】Three 学习日志（四）—— 相机控件
/ 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景。// 引入轨道控制器扩展库OrbitControls.js。// 引入轨道控制器扩展库OrbitControls.js。// 创建3D场景对象Scene。// 设置相机控件轨道控制器。//网格模型对象Mesh。//监听鼠标、键盘事件。
2023-09-18 16:42:19
351
原创 【前端知识】Three 学习日志（三）—— 光源对物体表面的影响
/ 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面。// 至此，我们的物体已经添加到场景中，但我们并不能立即看到构建的物体，还需要通过虚拟相机进行渲染。//指向mesh对应的位置。// color: 0xff0000,//0xff0000设置材质颜色为红色。// 通过渲染器，将场景和相机进行结合、渲染，得到一个Canvas元素。// 设置网格模型在三维空间中的位置坐标，默认是坐标原点。// 构建好物体后，将物体添加到场景中。
2023-09-18 16:08:40
153
原创 【前端知识】Three 学习日志（二）—— 加强三维空间认识
/ three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面。// 至此，我们的物体已经添加到场景中，但我们并不能立即看到构建的物体，还需要通过虚拟相机进行渲染。// 通过渲染器，将场景和相机进行结合、渲染，得到一个Canvas元素。// 设置几何体长宽高，也就是x、y、z三个方向的尺寸。// 设置模型mesh的xyz坐标。
2023-09-18 15:42:18
169
原创 【前端知识】Three 学习日志（一）—— Three.js 的简单尝试
/ 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面。// 至此，我们的物体已经添加到场景中，但我们并不能立即看到构建的物体，还需要通过虚拟相机进行渲染。// 两个参数分别为上面创建的几何体geometry、材质material。// 通过渲染器，将场景和相机进行结合、渲染，得到一个Canvas元素。// 设置网格模型在三维空间中的位置坐标，默认是坐标原点。// 构建好物体后，将物体添加到场景中。// 创建3D场景对象Scene。
2023-09-18 14:00:39
347
原创 【前端知识】+new Date()是什么？
new Date()可以通过调用valueOf()方法获取到当前Date对象的值，这个值与getTime()所获取到的值一致。new Date()是JavaScript中用于获取当前日期和时间的内置函数。它返回一个表示当前日期和时间的Date对象。new Date()可以通过调用getTime()方法获取到当前时间的时间戳。类型，从而得到与上面getTime()、valueOf()一致的时间戳（数值）加号能够将后面new Date()对象的值转为...
2023-09-14 23:39:28
844
原创 【前端知识】前端加密算法(base64、md5、sha1、escape/unescape、AES/DES)
它们的作用是将字符串中的特殊字符转换为编码表示，以便在不同的上下文中进行安全传输或存储，并且可以再次解码以恢复原始字符串。是最早广泛使用的对称加密算法之一。不可逆性：escape 和 unescape 是一种简单的编码解码方式，它们是一对一的关系，无法进行数据压缩或加密，也无法恢复被修改的编码结果。容易碰撞：由于MD5摘要的长度固定，而原始数据的长度可以是任意的，因此可能会出现不同的数据生成相同的摘要，即碰撞情况。更高的安全性：AES采用更长的密钥长度（128位、192位或256位），提供更高的安全性。
2023-09-07 09:40:04
1530
原创 【前端知识】Axios——请求拦截器模板
它可以在浏览器和Node.js环境中使用，并且提供了许多强大的功能，例如拦截请求和响应、转换请求和响应数据、取消请求等。使用Axios发送HTTP请求非常方便，你只需要提供请求的URL和可选的配置参数，然后Axios会返回一个Promise对象，你可以通过该对象处理请求的结果。Axios具有简单易用的API，可以轻松地发送GET、POST、PUT、DELETE等各种类型的请求。Axios还支持自定义拦截器，你可以在发送请求之前或者响应返回之后做一些处理，例如设置请求头、验证响应数据、错误处理等。
2023-09-06 16:13:23
627
原创 【前端知识】React 基础巩固(四十六)——自定义Hook的应用
来实现localStorage数据的自动化存储，并进行复用。自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上而言，它并不算React的特性。两个Context在自定义Hook。localStorage数据存储。实现组件创建/销毁时打印日志。实现Context共享。
2023-08-02 01:49:45
881
原创 【前端知识】React 基础巩固(四十五)——其他Hooks（useMemo、useRef、useImperativeHandle、useLayoutEffect）
useCallback会返回一个函数的memoized（记忆的）值，其目的是不希望子组件进行多次渲染，并非为了函数进行缓存。反观useMemo，useMemo返回的也是一个memoized（记忆的）值，这个值是函数返回结果的值，其目的也是为了进行性能的优化。
2023-08-02 00:10:31
70
原创 【前端知识】React 基础巩固(四十四)——其他Hooks（useContext、useReducer、useCallback）
在类组件开发时，我们通过的方式，在类中获取context，多个Context或者在函数式组件中通过可以看到，当我们需要使用多个Context时，存在大量繁琐的嵌套代码；可以看到，Context Hook仅用了两行代码就替代了上面繁杂的嵌套代码，十分高效简洁。
2023-08-01 21:39:51
980
原创 【前端知识】React 基础巩固(四十三)——Effect Hook
Effect Hook 用来完成一些类似class中生命周期的功能。在使用类组件时，不管是渲染、网路请求还是操作DOM，其逻辑和代码是杂糅在一起的。在函数组件中，我们可以利用useEffect来完成除渲染界面以外的事情，即完成副作用的事情。可以看到，通过useEffect的Hook，能够告知react在渲染后需要执行哪些操作。在react执行完更新DOM操作后，会回调我们在useEffect中传入的回调函数。在默认情况下，这个函数无论是第一次渲染还是每次更新后，均会被调用。
2023-07-31 22:09:16
757
原创 【前端知识】React 基础巩固(四十二)——React Hooks的介绍
Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。
2023-07-30 22:19:37
1285
原创 【前端知识】React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置
虽然成功抽离了路由配置信息，但是目前的方式，会导致路由统一打包，没有分包处理。当前App.jsx文件中，包含Routes相关信息，过于臃肿，我们可以将Routes通过配置的形式进行引入。路由参数传递包括：1.动态路由传参；
2023-07-30 20:46:09
1271
原创 【前端知识】React 基础巩固(四十)——Navigate导航
新建Login页面，在Login中引入Navigate，实现点击登陆按钮跳转至/home当路由均无匹配时，通过Navigate跳转至NotFound界面，其中为通配符：构建NotFound.jsx。
2023-07-30 16:52:47
2121
原创 【前端知识】React 基础巩固(三十九)——React-Router的基本使用
Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件。Router包括两个API：BrowserRouter使用history模式HashRouter使用hash模式（路径后面带有#号）尝试在项目中使用HashRouter：安装Router在 index.js 中引入并使用HashRouter。
2023-07-30 16:12:55
1267
原创 【前端知识】React 基础巩固(三十八)——log、thunk、applyMiddleware中间件的核心代码
利用Monkey Patching，修改原有的程序逻辑，在调用dispatch的过程中，通过dispatchAndLog实现日志打印功能。
2023-07-30 10:17:23
1608
原创 【微软知识】微软相关技术知识分享
微软的操作系统主要是 Windows 系列，包括 Windows 10、Windows Server 等。了解 Windows 操作系统的基本使用、配置和故障排除是非常重要的。微软操作系统（Microsoft System）是美国微软开发的Windows系列视窗化操作系统。服务器版最高为Windows Server 2022 [2] ，个人版最高为Windows 11，因其个人版简单易操作一直是个人用户的最大卖家。熟悉这些平台和工具可以帮助开发人员构建强大的应用程序和网站。
2023-07-29 22:47:47
1524
原创 【前端知识】React 基础巩固(三十七)——自定义connect高阶组件
从这行代码可以看到，目前的connect直接引用了上级目录的store，过于依赖目前既定的store，这样不利于复用。假设另一个项目的store所在位置不在上级目录中，则会出现问题。在connect中，通过 contextType 共享从 Provider 中传入的 store 变量，将原来直接引用的。
2023-07-29 22:22:44
1261
原创 【前端知识】React 基础巩固(三十六)——RTK中的异步操作
引入RTK中的createAsyncThunk，在extraReducers中监听执行状态在界面中引入所需的异步操作Action查看运行结果。
2023-07-29 16:13:35
1217
原创 【前端知识】JavaScript——设计模式（工厂模式、构造函数模式、原型模式）
每个函数都会创建一个 prototype 属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法。构造函数模式与工厂模式相比，没有显式地创建对象，其属性和方法直接赋值给了 this，且没有 return。工厂模式是一种众所周知的设计模式，广泛应用于软件工程领域，用于抽象创建特定对象的过程。缺点：没有解决对象标识问题（即新创建的对象是什么类型）优点：在它上面定义的属性和方法可以被对象实例共享。缺点：所有实例在默认情况先都将取得相同的属性值。缺点：其定义的方法会在每个实例上都创建一遍。
2023-07-28 17:09:52
757
原创 【前端知识】JavaScript——属性及属性的特性
数据属性包含一个保存数据值的位置。值会从这个位置读取，也会写入到这个位置。数据属性的四个特性：如果要修改特性的默认值，可以使用 Object.defineProperty() 方法：修改 configurable 特性二、访问器属性包含一个获取（getter）函数和一个设置（setter）函数，不过这两个函数不是必需的。访问器属性的特性也是通过 Object.defineProperty() 进行修改：三、定义多个属性若要定义多个属性，可以使用 Object.definePropertie
2023-07-28 14:46:58
245
原创 【前端知识】React 基础巩固(三十五)——ReduxToolKit (RTK)
React 基础巩固(三十五)——ReduxToolKit (RTK)
2023-07-27 23:24:38
944
原创 【前端知识】JavaScript——5个迭代函数：every、filter、forEach、map、some
每个方法接收两个参数：以每一项为参数运行的函数，以及可选的作为函数运行上下文的作用域对象（影响函数中 this 的值）。而对 some() 来说，只要有一项让传入的函数返回 true，它就会返回 true。every() 和 some()返回值是true/false，而 filter() 返回的是数组，其决定某一项是否应该包含在它返回的数组中。filter() 返回符号条件的子项，而 map() 对原始数组中同样位置的元素运行传入函数而返回所有元素的结果。【区别一】every() 和 some()
2023-07-27 09:17:34
235
原创 【前端知识】React 基础巩固(三十四)——组件中的异步操作及优化
将原本在组件中的异步请求代码放入到actionCreators.js中。改写原来的category.jsx，派发异步请求的dispatch。通过redux来管理异步网络请求。在store中引入中间件。
2023-07-26 22:20:47
509
原创 【前端知识】React 基础巩固(三十三)——Redux的使用详解
中的案例，我们希望抽取页面中共有的代码（例如下方的代码），使用高阶组件统一拦截。在App.jsx中引入新的about.jsx页面，查看运行效果。中的connect对state和dispatch进行解耦。为了让react和redux产生联系，安装一款工具。，在index.js中统一注入store。新建about.js页面，通过。6. 继续优化代码，利用。
2023-07-25 22:52:50
389
原创 【前端知识】React 基础巩固(三十二)——Redux的三大原则、使用流程及实践
单一数据源State是只读的唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State；这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改state；这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心reace condition（竞态）的问题；使用纯函数来执行修改。
2023-07-25 21:58:27
427
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人