前端下载base64格式图片时，报错：Not allowed to navigate top frame to data URL，代码如下：

以上的配置，在进入路由前会先检测有没有权限控制，如果需要登录则会触发登录监听事件，弹出登录窗口。如果是从其他项目跳转到vue项目的路由，却无法正常弹出登录窗口，因为单页面应用第一次加载，$bus还没有注册。

平时项目开发调试的时候免不了会有一些调试，打印一些log。当项目上线时去手动移除这些log可能是比较麻烦的事情，有了下面这个配置，当我们使用

前端开发者是和用户最接近的群体，所以前端开发需要具备用户视角。无论从页面布局、交互体验，还是（防偷防盗）都需要有权宜之计和制敌之策。下面记录一些我遇到的需求，以及实现过程。

获取数组最后一个元素是经常遇到的场景，想必你也有自己常用的方法。也许有那么一刻你和我一样在想："怎样获取才算得上优雅呢？"。假设我们有下面这个数组： {代码...} 看下都有哪些方法可以获取到数组的最后一个元素，看看哪个是你常用的。借助length {代码...} arr.slice() {代码...} arr.pop() {代码...} 上面的方法...

常见的图片格式png、jpg、jpeg、gif。最近看到一个并不常见的图片格式 .webp，想必它应该是有什么特别之处，才出现在视野中，忍不住查了一下。

window.location 常见属性window.location.href {代码...} window.location.origin {代码...} window.location.pathname {代码...} window.location.protocol {代码...} window.location.host获取主机名 {代码...} window.location.port {代码...} window.location.search {代码...} window.location.hash获取#后面部分 ...

今天看到一个很有意思的API，可以用js操作浏览器进入全屏状态。requestFullscreen {代码...} {代码...} 在线体验

如果你正在思考如何根据容器的宽度 按比例 设置高度，那么这个应该可以帮到你。最近遇到一个响应式设计的需求，页面缩放时保持整体结构不变，按原有比例缩放，如下图：每行展示4个图片。

radial-gradient是一个很酷的css属性。我们可以用它给元素绘制出很有感觉的渐变背景。如果你不经常用它，会发现它的语法不太容易记忆，相比较于linear-gradient() 要稍微复杂一些。本文通过2个例子，带你领略一下它的魅力。

你可能对css的渐变有所了解，比如linear-gradient、radial-gradient。但是并没有遇到过合适的使用场景，本文就来说一个 文字颜色渐变 的例子，就是 linear-gradient 的一个很优雅的使用案例。

把一个函数作为参数，或者把一个函数作为返回值，这样的结构成为”高阶函数“。JavaScript的参数值类型的参数 {代码...} 回调函数类型参数在JavaScript中function可以当做参数传入function中： {代码...} 高阶函数（Higher-Order Functions）当一个function被当做参数传入一个函数，或者被当做函数的返回，这种结构就被称...

在传统的网页开发时无需过多考虑内存管理，通常也不会产生严重的后果。因为当用户点击链接打开新页面或者刷新页面，页面内的信息就会从内存中清理掉。

在 JavaScript 中闭包描述的是 function 中 外层作用域的变量 被内层作用域 引用的场景，闭包的结构为 内层作用域 保存了 外层作用域的变量。

使用vue3引入Element plus，使用icon时发现没有正常渲染到页面上。到官网查看后发现，如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。单个图标引入你可以在单个组件中像下面的方式引入： {代码...} 全局注册为组件但是每次都这样做显然过于繁琐，我们可以使用下面的方式把icon全局注册为组件...

防抖和节流到底是什么？防抖和节流属于性能优化的知识，它可以有效的降低高频事件触发时，你定义的方法的执行次数。还是没有感觉？？？那么，来看下面的场景：用户在搜索框输入关键词（只有当他输入完成时我们才去向服务器发送请求，然后给出搜索结果）自动保存用户填写的表单数据上面的场景都对应着一个高频事件，即inp...

最近有个小需求，点击页面上的复制链接按钮，把当前页面的地址复制到剪贴板，方便粘贴到其他地方分享。是否有现成的库？当然有了，比如clipboardjs，体积小，而且可以灵活的引入到项目中。不过，如果你和我一样对这个功能的实现很好奇，可以接着向下看，其实也很简单。JS复制内容到剪贴板的实现如果在百度中这样搜索，得...

Mongose 是为 node.js 开发的 MongoDB 对象模型，它基于schema来处理应用的数据模型，开箱即用。schema中的时间戳 {代码...} 如上定义的BlogSchema，timestamps可以帮助我们在创建新的数据（或者更新）时自动维护创建时间和更新时间。那么问题来了然而，当我们想要更新创建时间时会遇到无法更新的问题（虽然很少有人会更...

通过Google Analytics，我们可以对自己的网站进行全面的分析及优化，例如，访客基本交互数据（实时活跃用户数/平均访问时长/每次访问页数/浏览深度/跳出率/退出率等），流量来源（付费广告/直接访问/外链引荐/自然搜索/社交媒体等），受众群体画像（地理位置/访问时段/浏览设备/兴趣行为等）,电商专用统计（谷歌专门针对...

最近有个需求，把文章或者评论的发布时间转换成，刚刚，10分钟前....，这种表示方式，如下：JavaScript格式化时间 {代码...} 通过上面的方法，初步实现了。但是感觉还是units处理过于死板，后续需要参考其他网站做下优化。改进上边的units我们其实可以把'秒前'改为'刚刚'，即小于1分钟的表示为刚刚，而大于一天的直接展...

最近有个记录referrer的需求，便于分析页面的流量来源，因为使用vue开发的单页面应用，所以打算从vue-router出发来解决问题。导航守卫最开始打算在这里获取from，但是发现好像并不能获取到 referrer {代码...} document.referrerDocument.referrer 返回的是一个 URI, 当前页面就是从这个 URI 所代表的页面 跳转或打开的....

一个测试用例就是为了验证软件功能，而设计的一系列操作。一个测试用例应该包括测试的步骤，测试数据，前置条件，后置条件，特殊的测试场景。可能还需要站在用户的角度来思考软件是否能够满足用户的使用。

在 segmentfault 写文章的过程中，发现它的草稿功能设计的很有意思，这篇文章来分析一下它的设计逻辑。新建文章当你点击撰写，进入写文章页面有三个可编辑的区域：标题、标签、正文。只要触发其中一个改变，大概4秒后没有动作就会被自动保存为草稿。这时假如你有其他事情，不能完成文章的编写发布，没有关系，等你有时间...

接上篇文章，因为Vue3中已经移除实例的$on，$off方法，这次来实现一个EventBus小工具，把它封装成一个类方便调用。单例模式一个vue应用中，我们只需要这个类的单例模式来管理事件，所以它应该是下面的样子： {代码...} 从代码尾部导出可以看出，我们既可以把它当成vue插件使用，也可以当成一个js库使用。npm 安装为了方...

假设我们已经了解vue组件常见的有父子组件通信，兄弟组件通信。而父子组件通信很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。那么当两个组件之间不是父子关系，怎样传递数据呢？

在互联网发达的今天，每当我们遇到不懂的问题，首先问的就是百度，但是有时候度娘给出的并不是我们想要的答案或者根本搜不到答案，怎么办呢？如果你英语不错，用英文搜索可能会有意想不到的收获哦。

有了上面的这个原则，我们就知道在不跨域的情况下我们能够更容易的修改iframe内部元素的样式，跨域情况则无法获取到iframe内部的元素，只能通过其他方式来达到目的（下面会介绍），首先来看下不跨域是怎样做的。

CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。CSS position属性默认为 静态static，除此之外还有 相对定位relative，绝对定位absolute，固定定位fixed，粘性定位sticky。本文通过一个实际场景来分析一下 fixed，sticky 的区别。

JavaScript 是轻量的，解释型的，面向对象的编程语言，最为人熟知的就是它是网页开发脚本语言。自从Node.js出现，使得它能够胜任后端开发。如果你想学习一门编程语言又不知从何入手，那选择JS是一个不错的选择。

如果在你的工作中用到了vue，那么你可能会发现同一个组件经常在你的应用中会被重复的使用。也许你写了一个非常有价值的组件，想要和别人分享，那么把它打包发布到npm是一个不错的选择。