前端
文章平均质量分 69
zyronon
我爱前端
展开
-
React 中的 useRef 与 useState
React 是一个流行的 JavaScript 库,用于构建用户界面。它提供了几个钩子,使开发人员能够管理状态并执行副作用。React 中两个常用的钩子是useRef和useState。虽然它们乍一看似乎很相似,但它们具有不同的目的并且具有不同的用例。在本文中,我们将深入探讨useRef和useState,比较它们的功能并提供示例来说明它们的用法。原创 2024-04-16 11:57:30 · 652 阅读 · 0 评论 -
umi4 页面组件导出的是匿名函数会导致hmr失效
页面组件导出的是上面的这种匿名函数会导致hmr失效,任何小修改都会导致page reload ,应该是hot replace。如果导出的是上面这种具名函数,hmr则是正常的。原创 2024-04-15 10:36:00 · 171 阅读 · 0 评论 -
用Vue全家桶纯手工搓了一个开源版「抖音」
2018年刚入行前端时,公司使用的还是Angular。Angular什么都好,就是写代码时的体验老糟心了,改一个地方,按下保存之后,要等好几秒刷新后才能看到效果,Webstorm无比好用的自动保存,对我来说反而像是一个负担。然而2024年了,Angular已经更新了17版本,还是没有解决这个问题,热替换依然那么的糟糕在网上冲浪时,发现了刚开始火起来的Vue,大家都在说简单好用上手快,于是抱着试一试的心态照着Vue官网的教程开始学习,并创建了这个项目。原创 2024-04-07 10:44:09 · 970 阅读 · 0 评论 -
前端跨域解决方案整理
什么是同源策略如果两个 URL 的协议、域名和端口都相同,我们就称这两个 URL 同源。浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM,那么会有一套基础的安全策略的制约,我们把这称为同源策略。具体来讲,同源策略主要表现在 DOM、Web 数据和网络这三个层面。第一个,DOM 层面。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。第二个,数据层面。同源策略限制了不同源的站点读取当前站原创 2021-06-30 16:32:36 · 164 阅读 · 2 评论 -
mini-promise 实现原理讲解
本文主要会按照 Promises/A+规范 来一步步实现一个完整的 Promise,相关代码请查阅https://github.com/mcuking/blog/tree/master/mini-promise。先写一段 Promise 的应用代码:new Promise((resolve, reject) => { setTimeout(resolve('hello world'), 1000);}).then((msg) => console.log(msg), (err.原创 2021-06-30 16:28:20 · 108 阅读 · 0 评论 -
vue中 利用混入定义全局变量、函数、筛选器
说一种没人发的,利用混入mixins来实现全局变量和函数。mixins里面的方法、变量、筛选器会和组件里面的方法、变量、筛选器合并。这种方法优点是ide会有方法、变量、筛选器提示。一、main.js文件import Vue from 'vue' import App from './App' import router from './router' import store from './store'import mixin from './utils/mixin' Vue.pr原创 2021-06-30 16:21:31 · 311 阅读 · 0 评论 -
Canvas绘制动态圆环进度条
最终效果##一、定义初始变量let radius = 140 //外环半径let thickness = 20 //圆环厚度let innerRadius = radius - thickness //内环半径let startAngle = -90 //开始角度let endAngle = 180 //结束角度let x = 0 //圆心x坐标let y = 0 //圆心y坐标let canvas = document.getElementById('tutorial');.原创 2021-06-30 16:20:06 · 364 阅读 · 0 评论 -
利用 Canvas 绘画一个未闭合的带进度条的圆环
最终效果图一、定义变量定义半径,定义圆环厚度,定义圆心位置、定义默认填充颜色let radius = 75let thickness= 10let innerRadius = radius - thicknesslet x = 75let y = 75var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');ctx.fillStyle = "#f2d7d7";.原创 2021-06-30 16:19:03 · 291 阅读 · 0 评论