- 博客(111)
- 收藏
- 关注
RSS订阅原创 神策sdk埋点
（5）明确事件的字段：字段其实就是刚刚提到的维度，明确事件字段的话就是比如刚刚有一个按钮点击的事件，那么这个按钮点击有那些必要采的属性，比如按钮名称，按钮当前所在的页面需要采，这就是一些事件字段。首先第一步我们要提供以下文档，比如说之后我们产品迭代的时候可能就是某一个功能点的一些指标，比如新增一个登录注册的一个方式，要去看用这个功能的人数，人数占比等。（6）定义采取规范：采集规范就是我们最后落地下来的埋点文档，就是某一个事件对应的属性，属性类型的规范，最重要的是触发时机的规范。
2024-04-12 11:01:33
827
原创 作为开发人员，这四类Code Review方法你都知道吗？
本文翻译自：https://dzone.com/articles/4-types-of-code-reviews-any-professional-developer，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。没有人能保证他产出的代码一定是完美的。下文阐述了4种主流的代码审查(code review)类型，相信作为专业的开发人员，你应该都了解它们！每个专业的软件开发者都知道，代码审查是任何正式开发过程中的必要环节。但大多数开发者不知道的是，代码审查分为很多种类型。
2024-03-05 14:25:22
974
原创 代码的封装方式--介绍
框架又分成了很多不同类的框架：（1）功能性框架 （2）UI框架：样式类UI框架，中后台UI框架，移动端UI框架首先什么是功能性框架：有一定的独特的设计思想的框架，比如react，react是一个功能性框架。比如vue，vue是一个功能性框架。react和vue都是有自己思想的UI框架：element-ui，vant，antd等。
2024-02-26 19:50:34
434
原创 moment基本用法示例
Moment.js 是一个流行的 JavaScript 日期和时间处理库，用于解析、验证、操作和显示日期和时间。3. 解析日期和时间：使用 `moment()` 函数传入日期和时间字符串或 JavaScript Date 对象来创建 Moment 对象。4. 格式化日期和时间：使用 `format()` 方法将 Moment 对象格式化为指定的日期和时间字符串。5. 操作日期和时间：使用 Moment.js 提供的方法对 Moment 对象进行日期和时间操作。
2024-02-22 14:13:23
468
原创 在面试中如何回复擅长vue还是react
我想这也是一个作为一个前端开发工程师需要具备以及掌握的能力，当然，除此之外，作为一个开发，我觉得前端开发的一个技术框架掌握以及深度也是非常重要的，比如说，我所擅长的有SPA单页面应用的框架，比如vue或者是react。需要注意的是，不同的框架，我们需要去适应的是不同的项目的目标，但是在应用框架的时候，事实上也不能够去解决项目当中的所有问题。在大前端的一个环境下，当前又有AI人工智能的加持辅助，我们是不是要去思考企业在进行前端岗位人员需求的时候，只是去找一个会vue或者是react技术框架的人员呢？
2024-02-09 16:58:45
2096
1
原创 利用Intersection Observer实现图片懒加载性能优化
ntersection Observer是浏览器所提供的一个 Javascript API，用于异步的检测目标元素以及祖先或者是顶级的文档视窗的交叉状态这句话的意思就是：我们可以看的图片当中，绿色的 target element（目标元素），并且存在一个顶层的或者祖先的文档视窗也就是当前图片中的，灰色的 browser viewport（浏览器的视窗）
2024-02-07 23:24:34
744
原创 实现RBAC
RBAC的层次结构: 用户N => 角色N => 资源N路由的分类: 静态、动态、任意动态权限路由: 想要实现addRoute动态注册路由的操作，首先得将后台返回的routes数组与异步路由进行递归的比较，得到的路由是授权以后的路由对象，然后对该数组对象进行循环遍历，利用addRoute实现动态路由的注册操作需要注意的细节是原路由对象和用户重新登录以后获取到的路由对象是同一对象，所以为了划分出不同的用户的路由对象，可以对动态生成的路由内容进行深拷贝操作。
2024-02-07 23:20:05
894
原创 vue3项目中如何实现模块的自动导入
vue2和vue3一个很重要的代码区别就是从vue2对象化完整引入到函数化按需引入。从而解决了需要什么就引入什么的按需引入操作功能。然而这一代码操作模式却也引出了后续。虽然现在绝大数开发工具都对未引入的内容进行语法错误提示，并提供快速修复。操作提示与协助自动引入对象的功能实现，但这也不能成为我们会喜欢编写如此繁琐代码内容的理由。所有，是否有不需要引入就可以直接使用。提高开发效率的重要问题。
2024-02-03 16:32:25
735
原创 vue3项目中如何实现图片的二次处理
在说这个之前，我们要先理解图片的二次处理与图片压缩之间的差异。图片的二次处理除了对图片进行压缩，还可以进行更多特效的处理，可以对图片进行宽高的重设，图像位置适应性调整，清晰的的控制，背景颜色的添加，图像质量的设置，旋转反转镜像等操作。那么在项目中为什么要对进行二次处理操作呢？综上所述，在vue项目中对图片进行二次处理操作，可以使图片在网页上有更好的表现效果，更快的加载速度和更好的用户体验。那么在vite环境中的vue3项目中，如何进行图片的二次处理？？？
2024-02-03 15:45:26
966
原创 Vue项目中如何使用图标组件库
这是上一个如何使用SVG图标，自由的从图标库下载图标进行增删改等操作固然很方便，但是也暴露出一些小小的不足，那就是任意的图标使用可以造成图标风格的不统一，从而影响整个项目的用户体验。因为我们在进行图标下载的时候，有可能是从IconFont图标网站上，不同的图标项目库中进行分别的下载，如何堆积在当前自己的项目中，那么图标的大小，色彩，风格等样素可想而知也必然存在一定的差异。那么是否有一种方式可以解决该问题。IconFont图标组件库由此而诞生了。
2024-01-27 16:32:11
1006
原创 vue项目中如何使用SVG图标
IconFont使用的不足：图标添加、修改、删除以后在线链接需要更新离线资源需要重新下载项目代码需要同步更新。在项目不断更新和迭代的过程中，图标的增减变化还没有稳定的情况下，开发人员的工作效率会明显下降。那么有没有一个图标应用方式，就是开发人员如果新增，修改，删除某一图标，那么就仅仅只是操作这一目标图标即可。如果有新增，则直接从图标平台上下载新增图标到项目目录中，如果有修改，则直接将修改以后的图标将项目中原有的图标内容进行替换。如果是删除，则直接将图标从项目目录中进行直接删除即可。
2024-01-26 17:03:35
490
原创 文件上传之秒传功能
需要引入第三方库const computeFileHash = (file) => { //传入文件内容 对文件内容进行哈希值的计算// 1MBconst fileReader = new FileReader() // 创建一个FileReader对象，用于读取文件内容// 创建一个SparkMD5对象，用于计算文件哈希值// 当前处理的分片索引// 文件读取成功时的回调函数//将文件块的数据添加到哈希计算中//继续加载下一个文件块}else{//完成哈希值计算。
2024-01-25 16:30:04
1353
原创 大文件分块上传之断点续传
断点续传是一种网络的传输机制，用于在文件传输过程中出现中断或错误时，能够恢复传输而不必重新开始，它解决了网络不稳定连续中断或大文件传输时时间过长等问题。提高了文件传输时可靠和效率性。原理：基于文件的分块传输因为每个块都有一个唯一标识符 ，在传输的过程中，每一个块都会记录传输的状态信息，包括已经成功传输和未传输的块信息，当传输中断或失败时可以记录状态信息，确定哪一些块已经成功传输，那一些块还没有被进行传输处理。
2024-01-25 14:37:31
956
原创 大文件分块上传进度控制处理
说这个之前，需要对上一篇文章进行一个回顾如果我们要对文件进行一个进度的控制，我们可以在upload接口上进行一些操作。
2024-01-25 13:28:33
451
原创 文件上传之大文件分块上传
分久必合，合久必分优势部分：减少了内存占用，可实现断点续传，并发处理，利用带宽，提高效率不足之处：增加复杂性，增加额外计算存储应用场景：云存储大文件上传、多媒体平台音视频上传，需断点续传应用注意事项:：理分块大小，顺序的完整性，异常情况的合理处理。
2024-01-25 12:40:15
389
原创 对读取的Excel文件数据进行拆分并发请求发送到后端服务器
由此看出，我们的顺序并不是按照顺序来排列的，那是因为我们进行请求的并发处理并不代表一定是按照顺序去进行数据的返回，因为可能在请求中，因为网络的问题先请求的操作可能会成为后返回的操作。此时，我们点击修改背景颜色的按钮，也会很卡顿，所以这种情况需要在后续进行性能优化。因为我们要对数据进行拆分，所以我们可以将此数据分成200个记录为一组的分组操作。而result也是按照一定的批次进行返回的，而不是一条一条返回。先对data数据进行打印，获取到一千多行的数据信息。那么如何对1000多条信息进行分组处理呢？
2024-01-22 20:12:43
545
原创 本地读取Excel文件并进行数据压缩传递到服务器
在项目开发过程中，读取excel文件，可能存在几百或几百万条数据内容，那么对于大型文件来说，我们应该如何思考对于大型文件的读取操作以及性能的注意事项。
2024-01-22 16:05:51
1105
原创 如何使用react的hook实现复制粘贴操作？
它主要有一个回调函数和一个依赖项进行参数的处理，作用就是对这个回调函数进行缓存化的设置，在依赖项发生变化的时候，这个回调函数才会进行重新的创建，目的就是确保相同的回调函数引用，在组件渲染的时候并不会发生对应的变化，从而避免的是不必要的重新渲染操作。所以，react在进行复制粘贴的时候，对这两个函数内容，并不会进行重新的渲染操作，提升的就是回调函数的性能操作，防止由于新函数引入的时候导致子组件的一个额外渲染处理。(3)按键的设置进行复制和粘贴的操作。那么以上就是复制粘贴的操作步骤啦！
2024-01-22 09:46:54
723
原创 React导航守卫(V5路由)
当我们进行路由跳转的时候，有时候需要满足某种条件才能跳转，比如我只有我们登录成功之后才能到首页面，否则就不能到首页面，这时候我们就需要对路由进行拦截。
2024-01-17 21:54:04
471
原创 基于位的权限系统
位的权限系统的优势在于存储效率是极高的，需要利用一个数字，就能够表示多种权限，极大的节省了空间，且处理速度是非常快的，因为位运算比传统的循环判断要来的快，尤其在处理数据时更为的高校（大数据）。扩展性也是非常强的，添加新的权限只需要选择下一个未使用的2的幂次方即可。并不会影响现有的权限结构。不足点：可读性并不良好，对于非程序员或对于未操作不熟悉开发者来说，直接查看权限数值可能难以理解这个数值所代表的具体的权限集合。
2024-01-15 15:14:09
448
原创 虚拟滚动原理
template>-- 可视区盒子 -->{{ item }}</div></div></div></div><script>props: {data: Array, // 列表总数据viewH: Number, // 外部高度itemH: Number, // 单项高度},data () {return {scrollH: '', // 整个滚动列表高度(总高度)list: [], // 每次显示的数据showNum: '', // 页面需要显示的数量。
2024-01-15 14:16:03
872
原创 SSE 和 Websocket 的比较
本文详细解析了SSE和WebSocket这两种实现实时通信的技术。SSE是一种基于HTTP的单向通信机制，适用于实时更新数据的应用场景。WebSocket是一种全双工通信协议，支持双向通信，适用于实时互动的应用场景。它们在通信模型、连接性、实时性、浏览器支持和API复杂性等方面存在一些区别。选择SSE还是WebSocket取决于您的应用需求。如果您只需要服务器向客户端推送数据，并且实时性要求不高，SSE是一个简单可行的选择。
2024-01-15 13:58:30
608
原创 为什么使用双token实现无感刷新用户认证?
颁发Access Token & Refresh Token（当认证成功了以后，颁发两个内容，一个是Access Token 另一个 Refresh Token，Access Token是一个短期的token（比如几十分钟），Refresh Token是一个长期的token（比如可以设置几天或者更长的时间），这两个token都会返回客户端）----->：对与单token的认证机制在我们项目中仅使用一个Access Token的访问令牌进行用户身份认证和授权的方案处理。
2024-01-15 11:10:42
1182
原创 pinia的理解
而modules则允许我们vuex仓库分割成各个不同的模块，每个模块又有自己的state,getters,mutations和actions，这就可以将大型的应用分解为较小可维护的部分，那么namespaced命名空间进行管理的时候，是为了防止模块中的state，getters，mutations和actions进行一个冲突处理，这就意味着我们可以在模块当中去使用相同的名称，利用的是namespaced: true进行的一个命名空间的一个隔离的操作。需要注意的是，在进行映射操作的时候，其组件的位置是什么？
2024-01-15 07:46:55
867
原创 i18n多国语言Internationalization的实现
i18n 是"Internationalization”的缩写，这个术语来源于英文单词中首尾字母“”和“n”以及中间的字符数(共计18个字符)当我们需要开发不同语言版本时，就可以使用i18n多国语言的一个操作处理，i18n主要实现那一方面的内容呢？例如：文本内容本地化、日期/时间格式、货币与度量单位图形和图标、布局和阅读方向、区域敏感功能文本内容本地化：将应用程序中的所有文本内容翻译成不同的语言，以适应不同的用户。这包括按钮、标签、错误信息等文本，可以根据用户所在的语言环境自动加载对应的翻译文件。
2024-01-14 21:09:32
1008
原创 前端框架的速成
但关键的是，社区在哪里，心中的社区在哪里，如何去找问题，解决问题的方向是如何的，这才是我们需要不断的去强化，锻炼的能力，持续的跟进是要求我们时刻关注框架的动态的新闻，保持对新技术的一个敏感度，随时做好升级的准备。（1）首先：基础就是基石，我们的基石要非常的巩固，所以不管学习那个框架，javascript都是我们的一个立足之本，不要只追逐新潮，扎实的javascript基础会让我们事半功倍。实践才是真实演练，从简单的项目入手逐渐的升级难度，这样才能够在实际的战斗中磨练出过硬的技能。
2024-01-14 19:44:36
317
原创 Vue将数据存放在会话存储中
（session Storage）：当浏览器被关闭的时候，存在session中的数据就会消失。（local Storage）：在本地存储的数据会永远保留，除非你自己删除，要不然一直在。
2024-01-06 11:44:42
646
原创 luch-request请求封装
Luch-Request 是一个基于 Promise 的小程序网络请求库，它提供了一套简洁易用的 API，可以方便地进行网络请求的封装。
2024-01-06 10:15:12
533
原创 intersection observer实现图片懒加载
是一种优化网页性能的技术，它可以延迟图片的加载时间，只有当用户滚动到该图片的位置时才会进行加载。这样可以减少页面的初始加载时间，提高页面的响应速度和用户体验。接口，监测元素与视口交叉，当图片进入视口时触发图片的加载。图片懒加载（Lazy Load）以下是使用浏览器原生支持的。
2024-01-06 10:04:24
409
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人