- 博客(50)
- 收藏
- 关注
RSS订阅原创 面试官：如何直接在浏览器环境编译ES6+/TS代码？
其实这也是上一篇文章整个项目中的一个知识点，预告下篇文章WebWorker协议层封装实现，让你无感使用。
2024-09-29 11:19:20
698
原创 面试官：如何在 JavaScript 中选择最合适的函数定义方式？
在最近的一个Chrome插件项目中，我深入探索了JavaScript中不同的函数定义方式。随着开发的深入，我发现理解这些方式的优劣势至关重要。比如，当我使用函数声明和箭头函数时，遇到了一些作用域和this指向的问题，这让我很困惑。此外，我还注意到，立即执行函数在某些情况下能够避免全局污染。那么，在实际开发中，如何选择合适的函数定义方式，以确保代码的可读性和可维护性呢？
2024-09-29 11:06:16
550
原创 基于vue的ui组件库开发—— 03
前两章我们从搭建基础的组件库开发架构，然后实现了几个基本的组件库的开发，并且在demo中得到了验证。接下来要面临的一个核心问题就是：如何将本地开发好的组件库打包发布到npm中，并且正确的在项目工程中使用呢？
2024-09-29 11:01:43
222
原创 基于vue的ui组件库开发—— 02
上一个篇章中我们学习基础的框架搭建，并且实现了一个简单的button组件，该组件可以在项目中正常使用，那么按照类似的方法可以哦我们呢可以开发其他常用的组件库。
2024-09-29 11:00:21
117
原创 基于vue的ui组件库开发—— 01
前言随着重复项目的增多，通用组件在前端开发中越来越重要了，开发者更细分、聚焦于组件层面的开发，然后像搭积木一样完成应用功能。组件库可以统一管理组件，输出文档，能提升组件复用性、避免重复造轮子。
2024-09-29 10:58:31
638
原创 XSS攻击类型以及如何防范
输入验证：对所有用户输入进行严格的验证和过滤，防止恶意代码注入。可以使用白名单方式，确保只允许符合预期格式的输入。输出编码对输出内容进行 HTML 实体编码，防止特殊字符被解释为 HTML 或 JavaScript 代码。使用库或框架（如 Vue.js、React 等）自带的安全机制进行安全的 DOM 操作。内容安全策略（CSP）：通过设置 CSP 响应头，可以限制浏览器加载和执行的资源类型，从而减少 XSS 的攻击面。使用安全的 JavaScript 框架。
2024-09-29 10:55:26
384
原创 HTML+CSS 水滴登录页
设置登录表单内容的样式，包括3D效果和过渡动画。实现了一个水滴登录页的效果。页面包含一个水滴形状的登录框和两个按钮，登录框包括用户名、密码和登录按钮，按钮分别为忘记密码和注册。整个页面的设计非常有创意，采用了水滴形状和渐变色的设计，使得页面看起来非常美观和舒适。同时，登录框和按钮的动态效果也增强了页面的交互性和视觉效果。
2024-09-29 10:49:41
105
原创 JavaScript中的7种继承方式
JavaScript中的继承是一个复杂而又强大的特性，通过不同的继承方式，我们可以根据不同的场景选择最合适的方法。理解并掌握这些继承方式，将有助于你编写更加灵活和高效的代码。在实际开发中，随着ES6的推出，class语法的引入使得继承的实现变得更加直观和易于理解，但在底层，JavaScript依然依赖于原型链来实现继承。因此，了解JavaScript的原型和继承机制对于深入理解语言特性和编写高质量的代码至关重要。
2024-09-29 10:45:28
144
原创 如何实现网页元素与源码文件的无缝跳转：手把手教程
大家在写前端代码的时候，可能经常遇到这种情况：想要知道页面中的某个元素是在哪段 JSX 代码里定义的，然后翻源码找对应的地方。今天我们来实现一个非常简单的功能——当你在网页上 hover 或点击某个元素时，它会自动打开 VSCode，跳转到对应的源码文件并定位到 JSX 定义的具体行数。我们要在打包时，利用 Babel 插件给每个 JSX 元素添加一个 data-src 属性，这个属性会记录 JSX 元素所在的源文件路径和它的起始行数。这样，我们就能把每个 HTML 元素和它的 JSX 代码一一对应起来。
2024-09-29 10:44:42
356
原创 骨架屏 （懒加载优化）
即便通过和等技术来减少首屏的代码体积，首屏加载时的（也称为）仍然可能存在，尤其在网络条件较差或页面内容复杂时，常见的解决方案是使用技术，数据加载前的占位动画可以表示内容还在加载中。
2024-09-29 10:43:46
151
原创 受控组件与非受控组件
受控组件是指其状态完全由外部组件（通常是父组件）管理的组件。受控组件的值由 props 传入，用户的每一次输入都会通过事件向父组件反馈，从而更新状态。这种数据流向使得组件状态更加清晰，便于状态管理和验证。优点数据流清晰，方便追踪状态变更历史。更容易实现表单验证逻辑。适合用于需要严格控制状态的应用场景。缺点需要更多代码来管理状态。对于简单的输入操作，可能会显得过于繁琐。非受控组件是指其状态由组件内部自行管理，用户的输入直接影响组件的内部状态。这种方式适合于简单的场景，减少了对外部状态的依赖。
2024-09-28 11:37:56
173
原创 【Uniapp】代码规范一：目录结构规范
合理的目录结构可以帮助开发者快速理解和维护项目。根据项目的复杂度和规模，适当调整目录结构和命名规范，使团队协作更加高效。始终保持结构的清晰和一致性是成功的关键。
2024-09-28 11:35:05
267
原创 【Uniapp】代码规范二：命名规范
遵循上述命名规范，能够确保项目结构的清晰性与一致性，从而提升团队的开发效率与代码可维护性。在团队中推广这些标准，并在新成员加入时进行培训，使得每个人都能理解并遵循这些规范，进一步增强团队协作.
2024-09-28 11:32:58
273
原创 【Uniapp】代码规范三：代码格式规范
遵循代码格式规范能够提高代码的可读性和可维护性，减少团队协作中的误解与混乱。团队应统一并推广这些规范，并通过自动化工具来确保代码的一致性和质量。定期进行代码审查，以确保规范的实施，并根据团队需求进行调整和优化.
2024-09-28 11:30:25
220
原创 【Uniapp】代码规范四：注释规范
良好的注释规范能够极大地提高代码的可读性和可维护性，帮助开发人员在后续的开发中快速理解代码逻辑。团队应统一并推广这些规范，并在代码审查中严格执行，以确保高质量的代码文档。
2024-09-28 11:28:20
294
原创 【Uniapp】代码规范五：API管理规范
通过遵循这些API管理规范，可以提高项目的可维护性、一致性和可读性，便于团队协作和后续开发。：使用JSDoc格式为每个API函数添加注释，描述其功能、参数和返回值，提升代码可读性和可维护性。）编写单元测试和集成测试，确保API的可靠性和稳定性。）生成API文档，确保团队成员能够方便地查看API的使用方法、请求参数和响应示例，促进团队协作。：统一使用命名导出，以便按需导入，提高代码的可维护性和灵活性。，并按功能模块划分子目录，确保目录层次清晰，易于管理。，并进行封装以提高重用性和可维护性，避免重复代码。
2024-09-28 11:26:49
228
原创 【Uniapp】代码规范七：性能规范
在服务器端开启gzip压缩，减少文件大小，提高传输效率。对图片、视频等资源使用懒加载技术，减轻不必要的资源消耗。：使用异步加载组件的方式，避免一次性加载所有资源。：将页面按模块拆分，按需加载，降低首屏加载时间。使用懒加载功能，推迟不需要立即加载的页面或组件。按需加载组件，避免初始加载时加载所有复杂组件。指令对图片进行懒加载，减轻初次加载时的压力。：对于频繁请求，建议合并处理，减少请求次数。按需引入插件，避免引入整个库，减小包体积。：在组件销毁时清理定时器，避免占用内存。：对于不紧急的请求，可以延时加载。
2024-09-28 11:14:05
211
原创 WebAssembly与WebGPU：游戏开发的新时代
定义: WebAssembly是一种二进制指令格式，旨在为高性能应用程序提供一种可移植的目标平台。特点:小而快加载运行速度快支持多种编程语言编译用途: 主要用于加速网页应用性能，特别是在计算密集型任务上。定义: WebGPU API 是一个用于访问现代图形和计算硬件的新 JavaScript API。特点:基于现代图形API (如DirectX 12, Metal)提供低级别访问GPU的能力支持并行计算用途: 适用于复杂3D渲染、物理模拟等高性能需求场景。
2024-09-28 11:09:20
447
原创 浅谈数栈产品里的 Descriptions 组件
到这里就破案了，如果设置为了 auto，则单元格会根据内容自适应，那么就会导致父元素（即单元格）会被子元素的宽度撑开，即使给父元素的宽度设置了一个固定值也会失效。我们从 DOM 树上可以看出来，理论上，我们应该是 td 元素的宽度百分比，同时 td 元素设置的宽度也是百分比，所以理论上是 tr 元素的百分比。，都是自适应，这里的自适应并不是我们想要的，根据 UI 设计师的确认，这里的自适应应该是 label 的大小不变，content 的大小自适应。我们要实现一行只有一个 Item 的设计方式。
2024-09-28 11:04:45
723
原创 深入理解 Nuxt.js 中的 app：error 钩子
app:error钩子是在服务器端或客户端发生致命错误时被调用。这为开发者提供了一个 централизованный 的方式来捕获和处理错误。通过上述内容，你了解了 Nuxt.js 中的app:error钩子的用途和使用方法。这个钩子为你的应用提供了一种优雅的方式来捕获和处理错误，提升了用户体验。
2024-09-27 11:10:59
257
原创 前端工程化---webpack的编译优化
第五种是resolve的配置，指定的是在构建时指定查找模块文件的规则，比如resolve.models查找模块的目录范围，Resolve.extensions就是查找文件类型范，resolve.mainField, 去查找对应模块的package.json中的主文件的属性名点，这些规则在处理每个模块时都会用到。，例如我们常用的lodash这个依赖包，这个包在构建过程中，在项目里我们可能只会用它的少数几个方法，但是在构建时我们会发现，整个依赖包都被打进来了，导致他在扩建和后期处理过程都比较耗时。
2024-09-27 11:09:34
700
原创 【css】隐藏页面元素
标题opacity:0页面中不存在存在存在重绘会不会不会重排会会不一定自身绑定事件不触发不触发可触发是否支持transition/animation不支持支持支持子元素可复原性不能能不能元素在DOM中是否存在存在存在存在是否占据页面空间不占据占据但不显示占据但透明被遮挡的元素可触发事件能不能（直接遮挡无效能（但取决于具体实现）
2024-09-27 11:08:05
294
原创 前端实现DOM节点转PDF（分页内容连续版本）
2、解决dom节点中存在视频，音频无法导出为pdf问题（大佬们有好的建议欢迎讨论）分页数据高度可根据业务调整，分辨率问题 调整： scale参数到合适的为止。版本一： 包含分页功能，导出的dom节点为普通节点（不包含视频，硬盘）版本二： dom节点中包含视频，音频 需要转化成网址在展示。1、解决了dom节点过长，pdf分页不连续问题。话不多说 直接showCode。
2024-09-27 11:05:40
317
原创 编写一个webpack插件，统计使用了哪些Ant-Design-Vue组件
在开发过程中发现tags收集的部分tag，不是对外的组件，不需要导入，比如FormModelItem，只需要导入FormModel就可以了。如果在compilation的buildModule钩子下执行，此时的resource._source为null，resource._source为模块对应的代码；通过多次尝试，最终选择在compiler的compilation钩子、compilation的succeedModule钩子下执行。我们不需要处理所有的模块，通过一些判断缩小处理范围。
2024-09-27 11:03:44
408
原创 JavaScript | var 变量定义指南
计算机存储数据的形式是以二进制形式进行存储, 对于人类来说 操作起来是及其不便的, 同时你并不知道编译出来的数据在机器码中的哪一个位置.在计算机底层中帮助我们做了一件事情 就是一个变量会分配一个内存地址而一个内存地址对应一个值 也就是 [[key=>value 键值对形式]], 即使是内存地址是难以记忆的0X6666在较为多的变量当中你可能就无法快速分辨哪一个地址对应值了, 所以在这个形式上有做了一层包装也就是 变量对应值的关系在JavaScript 中变量定义方式是以var方式定义变量的。
2024-09-27 11:00:07
207
原创 vue3+Echats实现地图下钻功能
实现地图下钻功能的核心是有不同层级的地理数据，比如国家、省份、城市的地图。ECharts 官方提供了大部分国家和地区的地理数据。在 Vue 3 中创建一个 ECharts 组件并实现点击事件处理来进行地图下钻。或者使用第三方 API 来动态获取这些数据。总结思路：地图下钻就是获取点击事件，并重新生成一份下钻后的地图。选择对应的省市区获取到对应的JSON数据。下载所需的 GeoJSON 数据。
2024-09-27 10:58:40
269
原创 深入浅出React中的refs
请记住：refs 只是一个“逃生舱口”，它不是状态或带有 props 和回调的正常 React 数据流的替代品。仅在没有“正常”替代方案时使用它们，触发某些东西的命令式方式也是一样-更有可能的是正常的 props/回调流就是你想要的。
2024-09-27 10:52:12
727
原创 微前端实践思考与总结
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。“类似Iframe，却没有它的各种问题。”微前端最核心的价值或者特性，就是技术栈无关。通常我们在构建web应用时，会有同一框架、同一大版本的限制。微前端的这个特性就打破了传统web的限制。我们利用这个特性，做到 应用拆分聚合、增量升级。再结合实际的场景，来解决问题。比如，应用拆分可以做到模块化开发、降低项目复杂性、提升部署效率和不同团队之间项目耦合性的问题。
2024-09-27 10:44:38
1048
原创 深入探索 Vue 的响应式系统：实现原理与应用场景
Vue 作为一个现代化的前端框架，其核心竞争力之一是响应式系统，通过数据驱动视图的更新，使得我们可以更高效地构建用户界面。然而，Vue 的响应式系统背后的原理却常常被忽视或误解。本文将深入分析 Vue 响应式系统的底层实现机制，探索其在不同应用场景中的优势及可能面临的挑战，帮助我们在使用 Vue 时能更好地理解并充分利用其强大的响应式特性。Vue 的响应式系统可以简单地理解为：当数据发生变化时，视图会自动更新，无需手动 DOM 操作。Vue 的响应式系统由依赖收集和依赖追踪。
2024-09-27 10:39:55
564
原创 深入浅出React中的refs
请记住：refs 只是一个“逃生舱口”，它不是状态或带有 props 和回调的正常 React 数据流的替代品。仅在没有“正常”替代方案时使用它们，触发某些东西的命令式方式也是一样-更有可能的是正常的 props/回调流就是你想要的。
2024-09-26 17:31:30
1052
原创 Webpack 5的新特性：Asset Modules与Dynamic Import
优点自动处理静态资源文件的加载和打包。灵活的配置选项，可以根据文件大小选择不同的处理方式。支持多种类型的静态资源文件。缺点需要合理配置，否则可能导致不必要的 HTTP 请求或过大的内联数据。优点按需加载模块，减少初始加载时间。提高应用性能，特别是在大型应用中。支持懒加载和预加载。缺点需要合理配置，否则可能导致不必要的代码分割。需要处理错误情况，例如模块加载失败。
2024-09-26 17:26:17
803
原创 微前端实践思考与总结
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。“类似Iframe，却没有它的各种问题。”微前端最核心的价值或者特性，就是技术栈无关。通常我们在构建web应用时，会有同一框架、同一大版本的限制。微前端的这个特性就打破了传统web的限制。我们利用这个特性，做到 应用拆分聚合、增量升级。再结合实际的场景，来解决问题。比如，应用拆分可以做到模块化开发、降低项目复杂性、提升部署效率和不同团队之间项目耦合性的问题。
2024-09-26 17:21:45
682
原创 【校猩猩】前端开发经验介绍
校猩猩一直注重简约而不简单，因此在体验上会额外关注，每一个功能都会反复讨论怎么做用户才会觉得好用，不光是用户体验，在校猩猩开发过程中，我也时刻致力于提升开发体验。
2024-09-26 17:19:28
682
原创 小程序和h5有什么差别
双线程架构将逻辑层和视图层分离，使得业务逻辑处理和视图渲染在不同的线程中进行，从而提高了小程序的运行效率和响应速度。微信小程序依托于微信平台，能够利用微信提供的特有功能和API，实现许多H5应用无法直接实现或不易实现的功能，如微信支付、微信登录、硬件接口（如摄像头、麦克风、蓝牙、NFC等）、微信特有功能等。DOM篡改:视图层的DOM结构由WXML和WXSS定义，不能直接通过逻辑层的JavaScript代码进行操作，这种隔离减少了DOM篡改的可能性。的换算关系是动态的，基于设备的实际屏幕宽度。
2024-09-26 17:14:08
934
原创 JavaScript开发技巧必备【一】
用来获取begin和end之间的数组元素。如果你不设置end参数，将会将数组的默认长度值当作end值。但有些同学可能不知道这个函数还可以接受负值作为参数。如果你设置一个负值作为begin的值，那么你可以获取数组的最后一个元素。
2024-09-26 11:40:27
911
原创 vue3项目部署到Github
此教程适应于以webpack，vue-cli，vite等脚手架构建的vue项目。当然，vue2和vue3都是可以滴。
2024-09-26 11:39:31
308
原创 Vue3.5中解构props，让父子组件通信更加丝滑
在Vue3.5版本中响应式 Props 解构终于正式转正了，这个功能之前一直是试验性的。这篇文章来带你搞清楚，一个String类型的props经过解构后明明应该是一个常量了，为什么还没丢失响应式呢？本文中使用的Vue版本为欧阳写文章时的最新版Vue3.5.5在编译阶段首先会处理宏函数，在处理的过程中如果发现解构了的返回值，那么就会将解构的name属性，以及name解构到本地的localName变量，都全部一起存到对象中。接下来就会去递归遍历script模块中的所有代码，如果发现使用的localName。
2024-09-26 11:35:25
1001
原创 深入理解 Nuxt.js 中的 app:created 钩子
钩子的用途以及如何在 Nuxt.js 应用中使用它。这个钩子为你提供了一个强大的入口点来初始化全局配置、注册组件以及执行其他启动任务。钩子是在 Vue 应用实例创建时触发的，意味着你可以在应用真正开始渲染之前执行一些逻辑。它是 Nuxt.js 的插件系统的一部分，允许你在启动应用时执行初始化代码。
2024-09-26 11:32:48
216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人