20231130 前端开发日报

前端验证码破解;JavaScript高级循环方法;我的新电脑前端配置;JavaScript 供应链为什么如此脆弱…;前端离线地图 – 下载瓦片地图;《HelloGitHub》第 92 期;[小Demo]Canvas手写b站弹幕效果塔塔开哟;vuex与vuex-class底层学习 & 简版实现

  1. 前端验证码破解

    最近受够了公司内部站点每次登陆都需要填写用户名和密码,还有输入验证码。 要是能够直接跳过登陆页面就好啦。 说干就干,决定使用油猴插件实现自动登陆功能。 其中最难解决的就是验证码破解,花了一天的时间完美

  2. JavaScript高级循环方法

    通过`for-of`循环♻️,你不需要亲自创建索引来依次遍历并取出集合中的每一个元素;此循环会将集合中的每一个元素创建对应的索引,通过索引来遍历整个数组中的元素。

  3. 我的新电脑前端配置

    一、安装 node、npm、cnpm、yarn 彻底删除之前安装的 node(如果没有请忽略此步骤) 1)打开此电脑,选择卸载或更改程序,找到 node.js 并卸载它 2)删除额外的文件 3)查找.

  4. JavaScript 供应链为什么如此脆弱…

    JavaScript 的强大之处在于其卓越的模块化能力,通过 npm 包管理机制,开发者可以轻易地引用并使用其他人或者组织已经编写好的开源代码,从而极大地加快了开发速度。但是,这种依赖关系的复杂性也给

  5. 前端离线地图 – 下载瓦片地图

    前言 离线地图?接到需要做离线地图这个需求的时候我还在问公司的负责人要腾讯地图的key。结果晚上开会就突然说项目需要内网部署,必须要使用离线地图。一脸懵逼的我心想幸好还没有开始接腾讯地图(无用功没做)

  6. 《HelloGitHub》第 92 期

    简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等,涵盖多种编程语言 Python、Java、Go、C/C++、S

  7. [小Demo]Canvas手写b站弹幕效果塔塔开哟

    最近,《进击的巨人》动漫也是迎来了大结局!不知道这样的结局是大家所期望的结局,还是心中的"意难平!" 今天我们就来做一个Demo,来和我们的艾伦塔塔开哟! “弹幕飞天”,“弹幕护体"

  8. vuex与vuex-class底层学习 & 简版实现

    vuex-class是在class-component中使用vuex的辅助工具,如果不清楚class-component是什么以及为什么要用vue-class-component,可以我上篇文章。 学

  9. CSS技巧:用CSS + SVG foreignObject实现一个动画组件

    在SVG里面加上foreignObject,就可以使用HTML+CSS制作你的动画卡片,学完就去炫你的创意吧!

  10. VUE语法-ref和reactive响应式数据引用

    文章浏览阅读136次,点赞3次,收藏4次。vue中通过ref和reactive实现数据的响应式

  11. Vue 定义只读数据 readonly 与 shallowReadonly

    文章浏览阅读74次。Vue 定义只读数据 readonly 与 shallowReadonly

  12. Vue+Three.js,三维3d模型 虚拟人 glb gltf

    文章浏览阅读418次,点赞9次,收藏12次。原因是设备的物理像素分辨率与CSS像素分辨率的比值的问题,我们的canvas绘制出来后图片因为高清屏设备的影响,导致图片变大,然而我们在浏览器的渲染窗口并没有变大,因此图片会挤压缩放使得canvas画布会变得模糊。该值也可以被解释为像素大小的比例:即一个CSS像素的大小相对于一个物理像素的大小的比值。渲染结果的横向尺寸和纵向尺寸的比值,这里我们使用的是 浏览器窗口的宽高比。透视相机用来模拟人眼所看到的景象,物体的大小会受远近距离的影响,它是3D场景的渲染中使用得最普遍的投影模式。

  13. Vue之Vuex的商品列表项目(router/store)

    文章浏览阅读143次,点赞13次,收藏2次。商品列表,包含商品名称和商品价格字段,可以编辑和删除。展示的数据必须保存到Vuex,页面跳转使用Vue-router来实现要求:(1)商品列表默认是空,点击“添加商品”按钮后会从事先定义好的商品数组里随机添加一些商品信息,每个商品可生成一个id,代表商品唯一,并保存的Vuex。(2)编辑时会跳转到编辑页面,默认进入编辑页面时展示该商品的信息,商品信息可以修改,修改完并提交完之后会自动跳转到商品的列表页面,这时候刚才编辑的商品信息就会发生变化。

  14. 自学Vue(组件注册)

    文章浏览阅读124次,点赞4次,收藏2次。1.局部注册:,只能在当前注册的范围内使用。局部注册:可以在全局任何一个组件内使用。

  15. 深入浅出 Vue 中的插槽 slot

    文章浏览阅读114次。在日常代码编写的过程中,针对高频出现的业务场景,我会它把封装一个组件,然后多个地方去使用。但是在某些情况下,一个组件并不能兼容所有的场景。就比如对话框组件,可能每个人都会用到对话框,但是对话框中的内容会根据需求千变万化。这个时候就要考虑有没有什么方法,可以让我们对话框中的内容变成动态的呢?答案:有,使用插槽就可以满足我们的需求。插槽的概念有点类似 JavaScript 中的插值表达式,在代码在保留一个占位符,然后动态的向占位符中传入内容。// 插值表达式var name = ‘番茄’我是${

  16. vue3怎么提升效率的?为什么vue3比vue2快?效率提升主要在哪些方面?

    文章浏览阅读681次,点赞14次,收藏14次。vue3怎么提升效率的?为什么vue3比vue2快?效率提升主要在哪些方面?

  17. 深入探索 Vue 响应式原理:数据驱动视图的奥秘

    文章浏览阅读412次,点赞12次,收藏9次。Vue 响应式原理是 Vue 框架的核心特性之一,它允许在数据发生变化时自动更新视图。数据绑定:Vue 响应式原理使得开发者能够将数据与视图进行绑定,当数据发生变化时,视图会自动更新,无需手动操作 DOM。这使得开发效率更高,代码更简洁。状态管理:在 Vue 中,可以使用 Vuex 进行状态管理。Vuex 基于 Vue 响应式原理实现,它提供了一种集中式的状态管理方式,方便管理复杂的应用状态。组件通信:Vue 组件之间可以通过 props、emit 和 Vuex 等方式进行通信。

  18. vue+echarts实现依赖关系无向网络拓扑结图节点折叠展开策略

    文章浏览阅读472次。在设计关系图时,选择力引导依赖关系图作为主要可视化方法,考虑到树状图在呈现节点之间关系方面的不便,力引导图能更好地展示节点关系。为了实现节点的折叠和展开策略,引入了开源库echarts3,并设计了节点的展开和收缩逻辑。关系图的布局采用力导向算法,其中引力中心设置为图中心,节点层级按照由中心向四周分布。详细讨论了力引导关系图的基本概念,节点和边的定义,以及力导向布局算法的原理。

  19. 图片懒加载之React + Intersection Observer API – 交叉观察器实现懒加载

    文章浏览阅读388次。判断元素是否进入视口从而来实现懒加载,因为用到了scroll的监听事件,因此频繁触发、调用可能会造成性能问题。创建一个IntersectionObserver.observe对象,当其监听到目标元素的可见部分(的比例)超过了一个或多个阈值(threshold)时,会执行指定的回调函数。被创建,则无法更改其配置,所以一个给定的观察者对象只能用来监听可见区域的特定变化值;,因为判断元素是否可见的本质就是看目标元素是否与根元素或视口产生了交叉。对象被创建时,其被配置为监听根中一段给定比例的可见区域。

  20. vuepress—–3、导航栏

    文章浏览阅读117次,点赞2次,收藏4次。增加导航栏 Logo ,Logo 可以被放置在。,它们将被作为特性被增加到。数组而不是一个单一的。标签的特性将默认包含。

  21. Vue3中watch和watchEffect的区别及使用场景

    文章浏览阅读91次,点赞4次,收藏4次。watch可以直接监听refconsole.log(‘count发生变化:’, newValue, oldValue);});而也可以监听ref定义的响应式数据,但是不需要显式地指定要监听的数据,它会自动追踪使用的响应式数据。watch可以监听reactive定义的响应式数据,但需要使用toRefs函数将reactive对象转换为refcount: 0});console.log(‘count发生变化:’, newValue.count, oldValue.count);});同样可以监听。


关注我

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

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

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