20230929 前端开发周报

1.4秒到0.4秒-2行代码让JS加载耗时减少67%-《现代前端工程体验优化》-第二章-第一节;vue3 + mark.js | 实现文字标注功能;代码洁癖的前端工程师是如何写代码的?;Vue3 + Fabricjs 定制国庆专属头像;不数不知道,JS数组已经有42个方法了;八股只问vue,代码题考js「Momenta一面」;前端地位Up;【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建

  1. vue3 + mark.js | 实现文字标注功能

    页面效果 具体实现 新增 1、监听鼠标抬起事件,通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。 2、通过 选中的文字长度是否大于0或window.get

  2. Vue3 + Fabricjs 定制国庆专属头像

    生在国旗下,长在春风里!国庆将至,采黎为大家带来定制头像2.0(国庆头像),让我们用代码的形式为祖国庆生!想看效果或者想定制春节头像的小伙伴请直奔效果区域,请耐心阅读,本文代码片段较多~

  3. 八股只问vue,代码题考js「Momenta一面」

    这是我目前见过给面试效率最高的公司,下午投的boss,没一会打电话问我五点钟能不能面试,后面选了七点钟。一面是个姐姐,声音很好听,人也很nice,辛苦她加班面我这个菜鸡了。下面是题目和笔者整理的答案

  4. 【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建

    Mock.js是一个用于生成随机数据和模拟接口请求的JavaScript库。它可以帮助开发人员在前端开发过程中模拟后端接口的返回数据,以便进行前端页面的开发和测试。

  5. TypeScript 快速上手指南

    typescript 越来越重要,本篇文章带你学习 typescript 的语法,快速上手 typescript 开发。

  6. Vue3常见api使用指南(TS版)

    vue3常用API指南,方便自己查阅。摘要要五十个字字字字字字摘要要五十个字字字字字字摘要要五十个字字字字字字

  7. Three.js实现一个3D模型可视化编辑系统

    基于Three.js+Vue3的3d模块可视化编辑器系统,其主要目的是尽可能更多的将three.js提供的API结合在实际的项目中去使用,作为自己个人学习three.js的记录,也供大家学习和参考

  8. 【Vue】监控路由/路由参数, 刷新当前页面数据的几种方法

    在这个示例中,我们在组件的`data`选项中定义了一个`monitoredParam`属性,用于存储监控的参数值。当监控的参数发生变化时,`watch`函数会被触发,将新的参数值保存到组件的`monitoredParam`属性中。在这个示例中,我们在组件的`data`选项中定义了一个`monitoredRoute`属性,用于存储监控的路由信息。当路由发生变化时,`watch`函数会被触发,将新的路由信息保存到组件的`monitoredRoute`属性中。

  9. 前端实现单点登录(SSO)

    单点登录是什么?你是怎么理解的?单点登录是如何实现的 普通登录 提到单点登录,首先可以想到传统登录,通过登录页面根据用户名查询用户信息,判断密码是否正确,正确则将用户信息写到session,访问的时候

  10. 每日前端手写题–day2

    1. 手写一个函数,实现节流。 2. 手写一个函数,实现防抖。 3. 手写一个函数,实现简单浅拷贝。

  11. CSS高手必会秘籍《混合模式》

    很多同学在开发中看到一些特殊的图形就发愁,都找设计出图怕显得自己水平低,百度查找解决方案又会浪费很多时间。而且最终通过copy实现效果,往往自己并没有学会,下次遇到还得靠百度。

  12. 推送数据?也许你不需要 WebSocket

    提到推送数据,大家可能会首先想到 WebSocket。 确实,WebSocket 能双向通信,自然也能做服务器到浏览器的消息推送。 但如果只是单向推送消息的话,HTTP 就有这种功能,它就是 Serv

  13. VUE使用DXFParser组件解析dxf文件生成图片

    vue对dxf解析大致效果图如果大家有疑问欢迎评论我将在更新问题解析!

  14. 【吐血总结】前端开发:一文带你精通Vue.js前端框架(五)

    ✒️上一篇中我们学习了vue.js 的模板语法、指令、用户输入等知识点.,现在让我们接着Vue系列的学习,带你成为优质前端程序员。⛵Vue系列条件语句和循环语句在开发中的作用不可或缺。例如生成动态表格、生成多个相似组件,这里面都有它们的影子。️Vue.js的条件语句用于根据给定的条件来决定是否展示或渲染特定的内容。⌨️简单来说就是true和false,分别对应不同的操作。⛵以下是Vue.js中几种常用的条件语句指令:⭐️v-if语句v-if 指令根据条件的真假来判断是否渲染某个元素或组。

  15. vue3里定义了ref接受接口数据,但是route接受ref数据时跳转path参数时报错

    【代码】vue3里定义了ref接受接口数据,但是route接受ref数据时跳转path参数时报错。

  16. react或vue项目当滚动条到底后,跳转路由,滚动条未回到顶部

    react或vue项目当滚动条到底后,跳转路由,滚动条未回到顶部

  17. 基于Vue+ELement搭建动态树与数据表格实现分页模糊查询

    使用Vue+ELement实现动态树形菜单与书籍数据的表格展示加分页内容,看完这篇博客相信你也可以!!

  18. Vue2、Vue3 和 React 中 Diff 算法的区别

    DOM diff 本质上就是在数据响应式的场景下,降低了用户对 DOM 的直接操作。Vue2、Vue3 和 React 底层都有用到 DOM diff,它们的相同点呢,都是同级比对,复杂度差不多;那不同点呢,一个是节点移动的方向。比如 React 是从左向右移动,而 Vue2 是双端 diff,也就是指针是两边向中间移动的。而 Vue3 在 Vue2 双端 diff 的基础上,加上了最长递增子序列优化算法。

  19. Vue3 封装 element-plus 图标选择器

    Vue3 封装 element-plus 图标选择器

  20. Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建

    Mock.js是一个模拟数据的生成器,用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。总的来说:Mock.js就是协同我们开发项目的。mock的官网csdn – 安全中心1. 独立开发:Mock可以帮助前端开发人员在后端接口未完成或不可用的情况下,独立进行前端开发。通过使用Mock.js生成模拟数据,前端开发人员可以在没有后端接口的情况下完成页面的开发和调试。2. 接口联调:Mock可以用于前后端接口联调。

  21. 使用 Electron 和 React 开发视频壁纸:从构建到打包

    在本文中,我们将探讨如何使用 Electron 和 React 开发一个视频壁纸应用程序,并将其从构建到打包。我们将介绍所需的工具和库,并提供相应的源代码示例。

  22. 【Vue】上万个字把事件处理讲解的淋漓尽致

    hello,我是小索奇,精心制作的Vue系列教程持续更新哈,想要学习&巩固&避坑就一起学习吧~重点内容使用v-on:xxx缩写@xxx绑定事件,其中 xxx 是事件名(回顾:v-bind缩写为冒号:)事件的回调需要配置在methods对象中,最终会在VM上methods中配置的函数,不要用箭头函数,否则 this 就不是VM了,重点强调!methods中配置的函数,都是被 Vue所管理的函数,this 的指向是VM(ViewModel-vue实例对象)或组件实例对象@click="dem

  23. VUE之更换背景颜色

    Vue实现背景更换颜色操作

  24. Nodejs+vue体育用品商城商品购物推荐系统_t81xg

    功能主要包括首页、个人中心、用户管理、商品分类管理、商品信息管理、交流论坛、留言板、系统管理、订单管理等功能,从而实现个性化智能体育商品推荐方式,提高个性化智能体育商品推荐的效率。相比于传统的体育商品推荐方式,个性化智能的管理方式可以大幅提高体育商品推荐的管理效率,实现了个性化智能体育商品推荐的标准化、制度化、程序化的管理,有效地防止了体育商品推荐的随意管理,提高了信息的处理速度和精确度,能够及时、准确地查询和修正个性化智能体育商品推荐情况等信息。着重对软件模块的设计进行了详细的分析,以达到对系统的需求。

  25. 结合Mockjs与Bus事件总线搭建首页导航和左侧菜单

    本文介绍如何利用Vue和Element UI框架搭建一个功能强大的首页导航和左侧菜单,同时结合Mock.js进行模拟数据开发,并通过Bus事件总线实现组件之间的通信。通过学习本文,读者能够快速掌握构建复杂前端应用的技巧,提高开发效率,增加用户体验,期待从中获得实际的收益和有意义的知识。

  26. 从0开始学习vue第三节,计算属性与侦听器

    通过控制台打印可以看出,计算属性fullInfo对应的方法只被调用了一次,而getFullInfo方法则被调用了三次,因此可以证明通过计算属性能够对数据进行缓存,即相同的输入属性值(参与计算属性运算的data中的属性)的计算属性只会被运算一次,以后再次运算的结果会从缓存中直接获取。但在某些场景中,我们希望在创建侦听器时,立即执行一遍回调。计算属性的set方法是在直接修改计算属性本身时才会被调用的,当修改参与计算属性计算的属性时,set方法并不会被调用,通过点击例子中的两个button按钮即可证明。

  27. 让你的 React 组件水平飞跃的 5 个技巧

    通过合理使用函数组件和类组件、使用 PropTypes 进行类型检查、使用生命周期方法、使用 React Hooks 和利用 React DevTools 进行调试,你可以提升你的 React 组件开发技巧。通过在组件中定义 PropTypes,你可以确保组件在使用时传递正确的属性类型,从而减少潜在的错误和调试时间。使用 Hooks,你可以在不编写类组件的情况下,编写具有复杂逻辑的组件。它提供了组件层次结构、组件状态和性能分析等有用的功能,帮助你更好地理解和调试你的组件。如果你有任何问题,请随时提问。

  28. React中插槽处理机制

    解决2:我们也可以把按钮的区域预留出来,但是内容不写,内容让调用的组件的时候,把东西传递进来【传递的是结构】需求:假如底部可能有按钮,根据需求判断需要展示或不展示,或者需要展示不同的按钮或者其他DOM。传进来的子节点若只有一个展示在组件头部,若两个则第一个节点在组件头部,第二个节点在组件底部。调用组件的时候,基于上闭合调用方式把插槽信息【子节点信息】,传递给组件,组件内部渲染即可。解决1:需要的按钮可以在组件中写死,后期基于传递进来的属性来进行判断。目的:在调用组件的,传递信息的时候,可以不用。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流