- 博客(468)
- 收藏
- 关注
RSS订阅
原创 three.js性能优化
three.js是JavaScript编写的第三方库。提供了非常多的3D显示功能。在使用的时候，虽然three.js 做了优化，但是在使用不恰当的代码，也会产生性能损耗。帧率越低，给人感觉就越卡。这是我在开发中自己百度总结的，有不对的可以联系我啊在加载页面之前可以给个加载页面的缓冲，因为场景模型没有加载的时候会黑屏，加载一瞬间可能会出现闪屏等性能问题，十分影响用户体验的。BufferGeometry 会缓存网格模型，性能要高效点。网格模型生成原理。
2023-02-05 16:19:07
734
原创 JavaScript笔记
JavaScript是一种运行在浏览器中的脚本语言。它可以在网页中实现动态效果、交互功能和数据处理等。除了浏览器，JavaScript也可以在服务器端运行，例如Node.js。
2023-01-04 21:17:04
586
原创 React 学习路线
React 介绍及脚手架安装_react脚手架安装-CSDN博客react组件定义及使用_react 引入组件-CSDN博客React 的 jsx 语法-CSDN博客React 中如何编写样式-CSDN博客React中的事件详解_对react事件的理解-CSDN博客React之state详解_react state定义函数-CSDN博客React列表渲染以及key的作用_react渲染一个列表时key的作用?-CSDN博客React组件通讯详解-CSDN博客组合 vs 继承 及 使用ReactDOM.cre
2024-03-09 14:30:00
371
原创 CSS 中的 display, visibility, opacity 的区别
控制元素的透明度，改变元素整体的透明程度。在具体应用中，根据需要选择合适的属性来控制元素的显示和隐藏。主要影响元素在布局中的显示方式，可以完全隐藏元素并且不占据空间；是用来控制元素显示和隐藏的属性，它们有着不同的作用和效果。控制元素的可见性，隐藏元素时仍然占据空间；
2023-11-07 10:38:55
261
原创 在vue-cli项目中，vue单文件组件xx.vue一定可以获取到在入口文件main.js里异步加载的依赖吗
上述代码中，在 `main.js` 中使用 `Vue.component()` 方法动态注册了名为 `HelloWorld` 的组件，并通过 `import()` 引入了 `./components/HelloWorld.vue` 文件。当在 `main.js` 中异步加载依赖时，需要使用 `import()` 或 `require.ensure()` 动态导入依赖，并在路由懒加载或特定事件触发后进行加载和渲染。
2023-11-03 10:49:10
212
原创 在使用 vue-cli 创建 vue 项目时，添加和删除预置配置
下次创建新项目时，该预设配置不再可用。3. 在打开的浏览器窗口中，选择 "导入"（Import）或者 "打开"（Open）选项，然后导入你的项目。6. 点击该预设配置的右侧的 "操纵"（Manipulate）按钮，然后选择 "删除"（Delete）。通过上述步骤，你可以为 Vue CLI 创建的项目添加自定义的预设配置，并在以后的项目中重复使用。通过上述步骤，你可以轻松地删除 Vue CLI 中的预设配置，并进行相应的调整和管理。5. 在 "配置" 页面中，可以看到列出的配置列表，找到你要删除的预设配置。
2023-10-21 12:49:33
419
原创 在 vue 项目中使用 postcss-px-to-viewport 做移动端适配
include: /[\\/]src[\\/]views[\\/]modulesApp[\\/]/ ：给modulesApp下的所有文件做适配。exclude: /[\\/]node_modules[\\/]/ ：排除node_modules下的所有文件。下载 autoprefixer 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等。根据是否需要使用include，引用不同的资源，不用github版本资源时，include属性设置无效。设定750px转化为100vw。
2023-09-27 23:26:12
502
原创 JavaScript 的 canvas.toDataURL 详解
元素以及保存的图像质量要求，生成的数据 URL 可能会较长。在某些情况下，这可能会导致性能问题或网络传输的限制。在这种情况下，可以考虑使用其他方法，如将图像数据上传到服务器进行处理。元素的内容转换为数据 URL 的方法。它返回一个包含图像表示的字符串，可以作为图片的源值使用。返回一个字符串，其中包含了一个基于指定类型的图像表达的数据 URL。需要注意的是，由于数据 URL 包含了完整的图像数据，因此对于较大的。的字符串，表示一个 PNG 格式的图片数据 URL。是 JavaScript 中用于将。
2023-09-23 11:59:15
5175
原创 在 vue 项目中关闭开发环境的提示
以上配置会将开发环境的提示工具（如警告、错误、性能提示等）禁用。请注意，在生产环境中，这些提示工具将会自动启用。是一个可选的配置文件，在新建项目时不会自动生成。如果你的项目中没有该文件，请根据上述步骤进行创建。在Vue 3项目中，你可以通过修改配置文件来关闭开发环境的提示。文件（如果没有该文件，你可以手动创建一个）。3 保存文件并重新启动开发服务器。1 在项目根目录下找到。
2023-09-23 11:07:08
386
原创 如果让你封装一个弹窗组件，你的思路是什么
例如，可以支持设置弹窗的宽度、高度、背景色等属性，以及自定义弹窗的内容。当然，在具体实现过程中还需要考虑兼容性、安全性、可访问性等方面的问题，以及结合具体项目的需求进行进一步优化和扩展。同时，根据用户反馈和性能测试结果，对组件进行优化，提升用户体验和性能。设计组件的结构和布局：根据功能需求，设计组件的HTML结构和CSS样式，考虑使用响应式布局，使得弹窗在不同设备上都能良好地显示。定义弹窗组件的功能和属性：首先确定弹窗组件的基本功能，例如显示、隐藏和关闭弹窗，以及设置弹窗的标题、内容、样式等属性。
2023-09-12 22:42:06
152
原创 uni-app 配置代理proxy
是一款跨平台开发框架，可以快速构建多端应用程序。在使用Uniapp开发时，我们有时需要配置代理（Proxy）以实现跨域访问或访问外部API接口等操作。本教程将介绍在Uniapp中配置代理的方法。
2023-09-12 08:45:08
3387
原创 Javascript 选取元素的兄弟节点、父节点、子节点
来获取前一个兄弟节点。需要注意的是，这些属性返回的节点可能是文本节点或注释节点，而不仅仅是元素节点。这些方法可以在 JavaScript 中使用，通过操作 DOM 来选择元素的兄弟节点。属性来访问元素的下一个兄弟节点和前一个兄弟节点。例如，如果有一个元素节点。这两个属性只返回元素节点，而不包括文本节点或注释节点。如果只想选择元素节点作为兄弟节点，可以使用。来获取下一个元素节点作为兄弟节点，使用。如果元素没有父节点（比如根节点），那么。来获取前一个元素节点作为兄弟节点。来获取下一个兄弟节点，使用。
2023-09-09 22:41:11
2259
原创 threejs 入门基础（万字总结）（建议收藏！！！）
当我们考虑使用分组意味着我们的场景当中放置的模型会越来越多，所以如果通过js代码来找到我们要的指定的模型就会成为一个常见的需求，如图原生js的dom的操作一样，threejs也提供了方法来方便我们获取指定的模型，getObjectByName() 方法通过通过传入一个模型的name属性的值就可以快速的得到指定的模型对象。我们每次修改代码再去看效果其实对于3d的控件放置来说是不方便的，所以three提供了一个相机控件，允许我们通过鼠标的操作就能调整我们的相机的位置，所以快速观察3d模型的不同角度的效果。
2023-09-09 16:24:07
1454
2
原创 Socket.IO 的使用
使用 LAMP（PHP）等流行的web应用程序堆栈编写聊天应用程序通常非常困难。它包括轮询服务器以获取更改，跟踪时间戳，而且速度比应该的慢得多。传统上，套接字是大多数实时聊天系统的解决方案，它提供了客户端和服务器之间的双向通信通道。这意味着服务器可以向客户端推送消息。每当你写聊天消息时，其想法是服务器会得到它，并将其推送给所有其他连接的客户端。Socket.io 是一个基于 WebSocket 的实时通信库，它可以在客户端和服务器之间建立双向的实时通信连接。
2023-09-09 11:05:55
686
原创 乾坤（qiankun）的使用
qiankun 是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构具备以下几个核心价值：技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级。
2023-09-08 21:40:03
415
原创 用 vue3 编写一个节点管理
2、点击节点的白色圆圈，就给该节点生成一个子节点。5、再次双击该节点，则打开该节点的所有子节点。4、双击该节点，则收起该节点的所有子节点。3、节点和子节点之间用线连接。用vue3编写一个节点管理。1、初始化状态就一个节点。
2023-09-07 16:11:45
190
原创 虚拟列表 [10W条数据如何解决加载缓慢]
虚拟列表: 浏览器只需要生成少量 DOM 元素(节点数量取决于前端视图需要展示的数量)，随着页面滚动，不断复用当前这一屏幕的 DOM 元素即可总结: 虚拟列表就是固定 DOM 节点数量，通过修改 DOM 元素的内容而达到不重新增加或删除 DOM 节点实现列表的更新。根据 scrollTop 计算出当前应该展示哪一段数据，计算出 startlndex 和 endlndex根据当前展示的数据在长列表中的 index，对列表进行偏移。监听页面滚动，获取滚动的高度 scrollTop。start: 开始的索引。
2023-09-07 16:04:52
170
转载 敏捷开发流程
3.1 前端后端相关人员一起，对照原型，根据模块及页面大概定义出接口3.1.1 一个页面中有几个接口，每个接口入参与出参是什么3.2 后端每个模块的负责人，根据开会讨论的结果，在wiki上生成标准的接口文档3.3 将后端做好的接口文档发给前端模块负责人过目，有问题继续修改；没问题开始后续的步骤。4.1 后端开发人员，根据原型以及定义的接口，做好方案设计4.1.1 对有难度或者有疑点的接口，做出方案，尽量给出多个合理方案4.1.2 每个方案写清楚优点缺点。
2023-09-07 10:27:22
607
原创 webpack 优化
优化方向●webpack-bundle-analyzer：文件大小分析●speed-measure-webpack-plugin 打包耗时分析●使用高版本的 webpack 和 nodejs。
2023-09-06 18:49:26
93
原创 Vue 组件递归
例如，在子组件中定义了一个名为state的对象和一个名为play的方法，可以通过子组件实例的属性value来访问state对象和调用play方法。例如，在父组件中定义了一个名为childComp的ref变量关联子组件实例，在点击按钮时，可以通过childComp.value来获取子组件的数据，并调用子组件的方法。例如，在父组件中使用$refs.childComp来获取子组件的实例，然后可以通过该实例来获取子组件的数据和调用子组件的方法。通过设置name属性，可以在组件内部或父组件中直接使用该组件。
2023-09-05 19:12:36
484
原创 使用 webpack 从0开始搭建 vue3+sass+element-plus+typescript 项目
在 ts 环境中 *.vue 文件 sfc 要有 ts 类型校验，要在根目录新建一个 index.d.ts 文件，因为 webpack.config.ts 在根目录而且把 /src/index.ts 作为入口文件，而在 /src/index.ts 中，又以 /src/App.vue 作为 SPA 的根组件。不过，问题来了，由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 http://localhost:8080/about 就会得到一个 404 错误，这就尴尬了。
2023-09-01 11:54:27
318
1
原创 Vue 之 props 详解
一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute（classstyle和id。
2023-08-31 11:27:46
419
原创 前端解决跨域问题--配置代理（proxy）
在 http://localhost:3000 里，访问 http://localhost:3000/api/users 最终访问的是 http://localhost:3001/users。
2023-08-28 14:48:12
187
原创 getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json
自 2022 年 7 月 14 日后发布的小程序，使用以下8个地理位置相关接口时，需要声明该字段，否则将无法正常使用。2022 年 7 月 14 日前发布的小程序不受影响。申明需要使用的地理位置相关接口，类型为数组。wx.getLocation可以获取当前的经纬度和速度、高度。而在 uni-app 项目中，在项目根目录中找到。注：若使用以上接口，均需在小程序管理后台，配置项，在该配置项上添加一个属性。想要使用这个方法，先需要在。文件，在左侧导航栏选择。中自助开通该接口权限。
2023-08-25 15:59:01
992
原创 Electron 的使用
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入Chromium和Node.js到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。
2023-08-25 11:48:38
168
原创 uniapp 的 position: fixed 偶尔失效
原因： IOS 的 position:fixed 并不是相对于浏览器窗口固定位置，它是相对于滚动元素固定位置。所以在使用 position:fixed 的时候，如果期望实现先对浏览器窗口定位的兼容，要确保当前元素的父元素都不能添加滚动样式。解决方法： 将需要 position:fixed 的元素放在可以滚动（拥有滚动条）的元素的外面，包括 uniapp 的 scroll-view 组件。其实现的功能是相对最近的允许滚动的。，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。
2023-08-24 19:57:31
438
原创 如果小程序版本更新了，怎么通知用户
当小程序发布新的版本后，用户如果之前访问过该小程序，通过已打开的小程序进入（未手动删除），则会弹出提示，提醒用户更新新的版本。用户点击确定就可以自动重启更新，点击取消则关闭弹窗，不再更新。
2023-08-24 19:28:26
877
原创 微信小程序如何获取用户的电话号码
准备一个button组件, 将 button 组件 open-type 的值设置为 getPhoneNumber ，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到动态令牌 code。接着把 code 传到开发者后台，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费 code 来换取用户手机号。注： getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的，不能混用。
2023-08-24 19:24:50
538
原创 React 使用 Redux Toolkit 详解
Redux Toolkit是一个官方支持的、用于简化Redux开发的工具集。它提供了一些简单易用的API和工具，可以帮助开发者更快速、更高效地编写Redux应用。总的来说，Redux Toolkit可以帮助开发者更加高效地使用Redux，减少了许多样板代码和配置工作，同时提供了一些常用的功能和工具，使得开发者可以更加专注于业务逻辑的实现configureStore函数是一个创建Redux store的快捷方式，为开发者提供了一些常用的设置和默认选项，从而加快了开发速度。
2023-08-19 20:47:18
1479
原创 React 之 redux 详解
状态管理是指在应用中维护数据状态的过程。随着应用不断变大，维护和同步数据状态的复杂度也会变得更高，因此状态管理是一个重要的问题。Redux 是一种 JavaScript 库，用于管理应用的全局状态。它的目的是帮助开发者管理和同步应用中的数据状态，以实现组件间的数据共享和通信。Redux 遵循了一种单向数据流的架构模式，将整个应用的状态数据存储在一个全局的状态树（即 store）中，并通过明确的操作，比如 dispatch 一个 action，来修改数据状态。
2023-08-19 20:32:32
3984
原创 React 之 react-router-dom
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。
2023-08-19 19:55:33
5809
使用 webpack 从0开始搭建的 vue3+sass+element-plus+typescript 项目
2023-09-02
基于react-three-fiber（R3F）开发的一个小型3D游戏
2023-03-28
gitee子模块的项目如何从远程仓库获取到本地
2023-04-01
TA创建的收藏夹 TA关注的收藏夹
TA关注的人