木瓜太香

哈喽！大家好！我是木瓜太香，一位老牌儿前端工程师，平时我们在使用 vue 开发的时候，可能会遇到需要父组件与子组件某个状态需要同步的情况，通常这个是因为我们封装组件的时候有一个相同的状态外面要用，里面也要用，今天我们就来看看怎么优雅的解决这个问题吧! 一般来说我们实现这个功能，只需要父组件通过 props 传递给子组件就好了，但是理想很丰满，现实很骨感，如果我们直接在子组件更改传进来的 props ，不出意外浏览器会给你一坨大红色的报错，因为在 vue 中我们的数据流动是自上而下的，而子组件直接更改父组件传来的 props 则是自下而上的数据流动，这是 vue 不允许的。 所以通常我们的解决办法是，父组件通过 props 传入状态给子组件，子组件通过 props 来初始化另外一个内部的状态，子组件每次更改状态之后都通知父组件，然后由父组件来更改自己的状态，其实就是 props on emit 的应用，接下来我们来上代码。 父组件 Father.vue 123456<template> <div class="father"> ...

大家好！我是木瓜太香，精通 webstorm 与常见前端技术的工程师，偶尔也在b站搞一些 webstorm 技巧教学，今天给大家带来的是大驼峰小驼峰快速转换短横杠命名或者下划线命名的方式。 开发中我们可能会遇到一个这样的需求，我们在创建组件的时候习惯使用大驼峰命名，而在使用的时候，我们又要使用短横杠或者下划线命名，这种功能我们当然不可能手打的啦，这辈子都不可能的啦。 解决的办法一般比较容易想到的有两种，一种是直接使用插件实现，另一种则是使用宏命令来实现，两种都是可以完成这个操作的，只是第二种更加考验大家对 webstorm 的使用熟练度，所以今天我们先来讲讲这第一种，插件实现方式。 这里我们用到的插件名是 String Manipulation 我们在 webstorm 中安装该插件之后，重启 webstorm 就可以使用了。 使用的方式是对你想转换的字符串右键选中 String Manipulation | Switch Case | 这个路径下面有很多各种各样的选项，可以根据需要来转换。 当然鼠标操作，肯定以及一定还不够快捷，这个时候快捷键绑定就派上用场了，去快捷键绑定一下对应 ...

大家好，我是木瓜太香。大家在开发单页应用的时候，经常会遇到这样的需求，头部和尾部两个组件是大多数组件公用的，而中间的内容区域则是单独存在的，而且一般内容组件逻辑会比较多，如果我们不停刷新页面可能会出现尾部组件闪烁的问题。 这个问题的出现主要是因为，内容区组件要比尾部组件大，而且尾部组件一般是没有什么逻辑的，相当于一个静态组件。 解决这个问题的思路就是想办法在页面最开始加载的时候隐藏尾部组件，之后再合适的时候将尾部组件显示出来即可。 说一下公司项目（VUE）中的解决办法，我们的思路是，先让尾部组件固定定位到页面外部，这样在最开始加载的时候就看不到尾部组件，然后我们通过监听路由变化来让组件显示，具体做法如下。 定义类名 .footer-fixed 将该类名添加到 footer 组件上 1234.footer-fixed { position: fixed; bottom: -200px;} 利用 vue 中的 watch 监听路由，恢复 footer组件的显示 123456$route: { handler () { // 组件加载 ...

大家好我是木瓜太香，大家在使用 webstorm 编写 html 的时候可能会遇到展开部分标签挨在一起的情况，相信很多小伙伴都想解决这个问题，接下来我们就开始吧！ 先来看看我们输入如下 emmet 代码的时候展开的效果是怎么样的 div>a*3 展开效果： 这个时候我们可能需要自己去一个一个回车排版，当然这肯定不是你想要的，现在我们来解决这个问题。 在解决问题之前，我们要知道产生这个问题的原因，在 webstorm 中是对标签进行分类的，其实从逻辑上来说，a 标签这种本身就属于行内标签，不换行在逻辑上是没有任何问题的，但是我们开发的时候经常需要根据情况来调整，因为很多时候 a 标签会写的很长，我们更希望换行来增加可读性。 解决办法： 将 a 标签在 webstorm 中的分类变成非行内标签即可。 设置路径：File | Settings | Editor | Code Style | HTML | Other 找到上述路径对应的页面之后，向下翻动，找到 Inline elements 这个选项，将右边输入框中的 a 标签删除掉，之后保存设置即可，其他的行内标签也是同样的修改 ...

在正式跨域的请求前，浏览器会根据需要，发起一个“PreFlight”（也就是Option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域），还有是否需要Credentials(认证信息） 三种场景： 如果跨域的请求是Simple Request（简单请求 ），则不会触发“PreFlight”。Mozilla对于简单请求的要求是： 以下三项必须都成立： 只能是Get、Head、Post方法 除了浏览器自己在Http头上加的信息（如Connection、User-Agent），开发者只能加这几个：Accept、Accept-Language、Content-Type、。。。。 Content-Type只能取这几个值： application/x-www-form-urlencoded multipart/form-data text/plain 一、为什么会出现options请求呢？ 跨域请求中，options请求是浏览器自发起的preflight request(预检请求)，以检测实际请求是否可以被浏览器接受。 pref ...

今天要说的是 其是一中 css 数据类型，用于描述当前元素重叠时，颜色应当如何呈现。它被用于 background-blend-mode 和 mix-blend-mode 属性。 当层重叠时，例如：同一元素设置多个背景图、父子元素的重叠。这时混合模式就是计算像素最终颜色值的方法。 background-blend-mode 属性该属性主要用于设置背景的混合模式，我们都知道背景颜色其实可以设置多个图片，或者多个图片加上单个纯颜色值，而这些图片与颜色值其实是层叠在一起的，通过这个属性我们可以将它们进行不同方式的融合，呈现出其他的颜色。 12345678910.box{ width: 400px; height: 400px; border: 1px solid pink; background: 200px 19px/200px url("./meinv.jpg") no-repeat, 0px/ cover url("./bg.jpg") pink; background-blend-mode: dar ...

原生 Ajax 取消方式对于原生XHR对象来说，取消的ajax的关键是调用XHR对象的.abort()方法，请求被中断之后会触发 onabort 事件不会触发 error 事件 12345678910111213let ajax = new XMLHttpRequest();ajax.open("POST", "/api/sys/listTmallShop");ajax.send(null);ajax.onreadystatechange = function () { if (ajax.readyState === 4) { console.log(ajax.response); }};ajax.onabort = function () { console.log("请求被中断");};// 立即取消请求ajax.abort(); 通过 abort 方法取消的请求在浏览器端可以方便的看到取消的状态。 jquery 取消方式由于 ...

上节我们介绍了 V8 使用副垃圾回收器和主垃圾回收器来处理垃圾回收，这节课我们看看 V8 是如何优化垃圾回收器的执行效率的。 由于 JavaScript 是运行在主线程之上的，因此，一旦执行垃圾回收算法，都需要将正在执行的 JavaScript 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做全停顿（Stop-The-World）。 一次完整的垃圾回收分为标记和清理两个阶段，垃圾数据标记之后，V8 会继续执行清理和整理操作，虽然主垃圾回收器和副垃圾回收器的处理方式稍微有些不同，但它们都是主线程上执行的，执行垃圾回收过程中，会暂停主线程上的其他任务，具体全停顿的执行效果如下图所示： 可以看到，执行垃圾回收时会占用主线程的时间，如果在执行垃圾回收的过程中，垃圾回收器占用主线程时间过久，就像上面图片展示的那样，花费了 200 毫秒，在这 200 毫秒内，主线程是不能做其他事情的。比如，页面正在执行一个 JavaScript 动画，因为垃圾回收器在工作，就会导致这个动画在这 200 毫秒内无法执行，造成页面的**卡顿 (Jank)**，用户体验不佳。 为了解决全停顿而造成 ...

我们都知道，JavaScript 是一门自动垃圾回收的语言，也就是说，我们不需要去手动回收垃圾数据，这一切都交给 V8 的垃圾回收器来完成。V8 为了更高效地回收垃圾，引入了两个垃圾回收器，它们分别针对着不同的场景。 那这两个回收器究竟是如何工作的呢，这节课我们就来分析这个问题。 垃圾数据是怎么产生的？首先，我们看看垃圾数据是怎么产生的。 无论是使用什么语言，我们都会频繁地使用数据，这些数据会被存放到栈和堆中，通常的方式是在内存中创建一块空间，使用这块空间，在不需要的时候回收这块空间。 比如下面这样一句代码： window.test = new Object() window.test.a = new Uint16Array(100) 当 JavaScript 执行这段代码的时候，会先为 window 对象添加一个 test 属性，并在堆中创建了一个空对象，并将该对象的地址指向了 window.test 属性。随后又创建一个大小为 100 的数组，并将属性地址指向了 test.a 的属性值。此时的内存布局图如下所示： 我们可以看到，栈中保存了指向 window 对象的指针，通过栈 ...

MutationObserver 接口提供了监视DOM树更改的能力，是旧的 Mutation 的替代品 使用方式：通过 MutationObserver构造函数创建对象 ob，该对象下有以下可用方法 observe(dom对象,option) ：配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接受通知 disconnect()：取消监控 takeRecords()：从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到 MutationRecord对象的新Array中 一个简单的示例 html部分 1234<div class="container"> <h1 class="title">一个标题</h1> <button class="btn">点击按钮取消监控</button></div> javascript部分 123456789101112131415161718, ...