菊の物语
码龄8年
关注
提问 私信
  • 博客:107,073
    107,073
    总访问量
  • 82
    原创
  • 23,569
    排名
  • 302
    粉丝
  • 0
    铁粉

个人简介:前端老菜鸟,又老又菜

IP属地以运营商信息为准,境内显示到省(区、市),境外显示到国家(地区)
IP 属地:北京市
  • 加入CSDN时间: 2016-09-27
博客简介:

Mahuicool的博客

查看详细资料
  • 原力等级
    当前等级
    4
    当前总分
    580
    当月
    5
个人成就
  • 获得405次点赞
  • 内容获得16次评论
  • 获得473次收藏
  • 代码片获得505次分享
创作历程
  • 27篇
    2024年
  • 23篇
    2023年
  • 4篇
    2022年
  • 2篇
    2021年
  • 3篇
    2020年
  • 23篇
    2019年
  • 13篇
    2018年
  • 4篇
    2016年
成就勋章
TA的专栏
  • handler
兴趣领域 设置
  • 前端
    javascriptcssvue.jsreact.jses6webpackxhtml前端框架
  • 后端
    node.js
  • 移动开发
    flutter
  • 网络与通信
    https
  • 微软技术
    typescript
创作活动更多

2024 博客之星年度评选报名已开启

博主的专属年度盛宴,一年仅有一次!MAC mini、大疆无人机、华为手表等精美奖品等你来拿!

去参加
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

js中this的指向问题

js中this的指向不是在定义的时候确定的,而是在调用时明确。
原创
发布博客 2024.11.26 ·
409 阅读 ·
9 点赞 ·
0 评论 ·
3 收藏

vue3 watch 无法监测父组件props的问题

工作中遇到一个问题,子组件需要根据父组件传递的props做出相应的逻辑处理,但是watch监听始终拦截父组件对于props的改变。子组件代码如下:})不论是增加deep还是增加immetate都不起作用。翻阅了大量文章,最后终于找到了原因。原来是watch监听对象属性变化是,不能这么写,要把watch的第一个参数写成函数形式,否则监听不到。//修改后的代码})先记录一下,后续探讨问题的深层原因。
原创
发布博客 2024.10.18 ·
513 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

vite解决前端跨域步骤

Vite 解决跨域问题的原理主要是通过其内置的开发服务器功能实现的,具体来说,是通过 HTTP 代理(HTTP Proxy)机制。在开发环境中,Vite 服务器可以配置为一个代理服务器,将前端应用发出的请求转发到实际的后端服务上,从而绕过浏览器的同源策略限制。为了使目标服务器接受请求,Vite 服务器会修改请求的 Host 和 Origin 头部,使其看起来像是从目标服务器的域发出的。整个代理过程对前端应用是透明的,即前端应用无需关心请求是如何被转发的,只需要按照正常的请求方式发出请求即可。
原创
发布博客 2024.07.30 ·
1097 阅读 ·
4 点赞 ·
0 评论 ·
2 收藏

try catch 解决大问题

项目开发中遇到一个棘手的bug,react前端项目独自运行时一切正常,但是把项目集成到使用wujie的大平台微前端项目中之后,突然有个地方无故报错,导致程序运行停止,后续的方法不再执行。
原创
发布博客 2024.07.10 ·
312 阅读 ·
4 点赞 ·
0 评论 ·
1 收藏

ES6 .entries用法

返回数组的可迭代对象itarator,可以通过for of 来遍历数组或对象的值。但是它们的写法不一样。
原创
发布博客 2024.06.12 ·
547 阅读 ·
3 点赞 ·
0 评论 ·
1 收藏

大屏幕适配方法之:transform:scale()

CSS3新增的属性transform主要用于设置元素的变形,比如旋转、倾斜、缩放等。我们今天要用到的正式它的缩放功能transform:scale()
原创
发布博客 2024.05.24 ·
2126 阅读 ·
5 点赞 ·
0 评论 ·
11 收藏

重学ES6之一

* ES6声明变量的6种方式:** var function (es5) let const import class。ES6提供了顶层对象:globalThis,它方便我们在不同的环境中(浏览器、node)去访问顶层对象。
原创
发布博客 2024.05.14 ·
385 阅读 ·
5 点赞 ·
0 评论 ·
6 收藏

iframe通信postMessage

iframe嵌入页面是实现微前端的方式之一。由于浏览器的跨域限制,iframe与父页面之间的通信变得不是那么容易。postMessage解决了这个问题。从广义上讲,一个窗口可以获得对另一个窗口的引用(比如 targetWindow = window.parent),然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。
原创
发布博客 2024.05.08 ·
690 阅读 ·
2 点赞 ·
1 评论 ·
7 收藏

报错:Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the depen

从github下clone了一个wujie微前端演示项目,下载到本地运行不起来,报如下错误:看字面意思这个报错应该是说vue版本不正确导致的,于是安装了最新版的vue,结果还是无果。上网查询相关报错的解决方法,有人说是这个插件版本不正确导致,于是卸载重装,还是没有解决。有的说建议删掉node_modules,清除缓存后重新下载。依然没用。stackoverflow上有人对这个报错进行了提问,下面有回答说可能是node版本导致,突然想起来我们公司这个项目因为年代比较久远使用了比较老的node版本,然后使用nv
原创
发布博客 2024.04.29 ·
4621 阅读 ·
9 点赞 ·
3 评论 ·
1 收藏

微前端技术之Web Components

Web Component 是一套技术,允许你创建可重用定制的元素(它们的功能封装在你的代码之外)并且在你的web应用中使用它们。通俗来讲就是将部分可重用的代码抽离,封装成一个独立的组件,方便在其他地方引用。Web components旨在解决这个问题,它有三项主要技术组成,它们可以一起使用来创建封装功能的定制元素。
原创
发布博客 2024.04.28 ·
723 阅读 ·
2 点赞 ·
0 评论 ·
0 收藏

text-overflow:ellipsis失效

text-overflow:ellipses用于设置文本超出显示‘…’,工作中遇到设置不上的问题,所以总结一下。
原创
发布博客 2024.04.26 ·
1073 阅读 ·
6 点赞 ·
1 评论 ·
2 收藏

善于利用window挂在全局变量

开发过程成中遇到一个奇怪的问题,打开一个echats图表之后,关闭echarts图再进入其他页面页面会报错提示“"赋值给window,在跳转的页面中let $ = window.$解决问题。却回不到原来的版本。最后的解决办法是在关闭。文件然后在本地绘制而成。图后,再页面中插入的引入。标签也会去掉,但程序中的。经过一步步定位,发现。文件中有另一个版本的。文件,导致原来使用的。
原创
发布博客 2024.03.15 ·
821 阅读 ·
8 点赞 ·
0 评论 ·
9 收藏

换个思路,豁然开朗

遇到一个bug参数的格式不对,导致原有逻辑报错,本以为是哪里定义参数的地方有问题,查询几个小时无结果,结果是antd组件升级导致的树组件TreeNode格式变化。按照现有的数据格式,稍微调整下原有逻辑,代码立刻跑通,问题解决!遇到长时间无法解决的问题,可以先喝口水冷静几分钟,推翻原有逻辑,换个思路说不定豁然开朗。
原创
发布博客 2024.03.08 ·
403 阅读 ·
9 点赞 ·
0 评论 ·
11 收藏

React Hooks的理解

React中的数据实现响应式相对于Vue2来说要麻烦一些,Vue2中所有的变量都存放在了data当中,只要定义在data当中的数据,Vue底层就会自动把他们设置为响应式。React中的响应式数据被称作"state",state区别于普通变量,它实现了响应式,当我们修改它时就会触发React进行重新渲染。Vue3应该是参考了React中对于响应式的设定,取消了内部自动设置响应式的方式,而是需要开发者手动添加变量的响应式(ref、reactive)。
原创
发布博客 2024.02.23 ·
522 阅读 ·
11 点赞 ·
0 评论 ·
9 收藏

前端安全之XSS、CSRF

而如果黑客要对银行网站实施 CSRF 攻击,他只能在他自己的网站构造请求,当用户通过黑客的网站发送请求到银行时,该请求的 Referer 是指向黑客自己的网站。当你登录一个网站A后,在没有登出的情况下,你又跑到一个其他的论坛上闲逛,然后你看到一个美女的图片,你出于好奇心,点击了美女图片,这个时候,可能就被攻击了;原因是美女图片的的超链接(link)可能是不法分子弄的,指向的可能是A网站,由于你在A网站还是登陆态,那么你点击的这个link就是以你登录态的进行的,比如可以用你的登录态发布评论;
原创
发布博客 2024.01.28 ·
1103 阅读 ·
8 点赞 ·
2 评论 ·
9 收藏

H5设备兼容处理方法

通过navigator.userAgent来判断设备类型,在需要差异化定制样式的地方,给相应的元素添加设定好的class。
原创
发布博客 2024.01.28 ·
475 阅读 ·
10 点赞 ·
0 评论 ·
7 收藏

前端缓存机制

浏览器的localStorage和sessionStorage等不属于浏览器的缓存概念,准确的说应该属于“浏览器的本地存储”不要讲两者混淆。
原创
发布博客 2024.01.22 ·
1193 阅读 ·
22 点赞 ·
0 评论 ·
18 收藏

tsconfig.json配置详解

【代码】tsconfig.json配置详解。
原创
发布博客 2024.01.21 ·
5228 阅读 ·
20 点赞 ·
1 评论 ·
37 收藏

自定义指令实现按钮防抖

created(el,binding,vnode,preNode){} // 在绑定元素的属性之前beforeMounted(el,binding,vnode,preNode) {} //在被插入到Dom前调用mounted(el,binding,vnode,preNode){} //在绑定他的父组件和他所有的子组件都挂载完毕后调用beforeUpdate(el,binding,vnode,preNode) {} //在绑定的父元素更新前调用。
原创
发布博客 2024.01.20 ·
737 阅读 ·
8 点赞 ·
0 评论 ·
11 收藏

ios适配虚拟home键

在H5开发过程中遇到一个兼容性问题。iphone手机的虚拟home键会对屏幕底部的内容造成遮挡。要处理此问题,需要清楚安全区域这个概念。
原创
发布博客 2024.01.20 ·
1751 阅读 ·
21 点赞 ·
0 评论 ·
22 收藏
加载更多