幻梦

首先明确，路由挂载时只挂载静态路由。

封装一个好用的axios，请求拦截，下载拦截，请求域名地址修改，登录错误重新登录页

写在前面虽然说Fetch API已经使用率已经非常的高了，但是在一些老的浏览器还是不支持的，而且axios仍然每周都保持2000多万的下载量，这就说明了axios仍然存在不可撼动的地位，接下来我们就一步一步的去封装，实现一个灵活、可复用的一个请求请发。这篇文章封装的axios已经满足如下功能：无处不在的代码提示；灵活的拦截器；可以创建多个实例，灵活根据项目进行调整；每个实例，或者说每个接口都可以灵活配置请求头、超时时间等；取消请求（可以根据url取消单个请求也可以取消全部请求）。基础封装

JS高级应用--防抖、节流、数组扁平化、柯里化、对象拷贝防抖节流数组扁平化柯里化对象拷贝防抖,浏览器resize、scroll、keypress、mousemove等事件触发时，会不断的调用绑定在事件上的回调函数，浪费资源、降低性能，为了优化体验，对这类事件调用次数限制。

你可能做了很长时间的 JavaScript 开发，但有时候你可能没有使用最新的 JavaScript 特性或技巧，这些特性和技巧可以在不需要编写额外代码的情况下解决你的问题。它们可以帮助你写出干净且优化的 JavaScript 代码。此外，如果你在 2021 年准备去参加面试，可以参考本文的内容。1. 带有多个条件的 if 语句把多个值放在一个数组中，然后调用数组的 includes 方法。//longhandif (x === 'abc' || x === 'def' || x === 'ghi'

vue初始化项目后，git提交到gitee远程仓库使用vue create 初始化cli3项目后，在git新建仓库，使用git工具提交到gitee远程仓库直接使用“git remote add origin https://gitee.com/huanmeng122/preparation.git”提交后，会提示错误：fatal: remote origin already exists.翻译如下：fatal: remote origin already exists.致命：远程源已存在。需

如何精准判断数据类型typeof 实现原理Object.prototype.toStringinstanceof 操作符总结typeof 实现原理typeof 一般被用于判断一个变量的类型，我们可以利用 typeof 来判断number, string, object, boolean, function, undefined, symbol 这七种类型，但是，很遗憾的一点是，typeof 在判断一个 object的数据的时候只能告诉我们这个数据是 object, 而不能细致的具体到是哪一种 objec

如何获取Google地图API密钥？使用Google地图的用户需要注意了！Google地图于2016年6月22日更新了Google地图API接口，更新接口后必需要申请Google地图API密钥才可以使用Google地图。如果您以前引用的Google地图中没有设置API密钥，可能会在页面上出现报错提示：“Oops! Something went wrong. This page didn’t l...

在软件中，性能一直扮演着重要的角色。在Web应用中，性能变得更加重要，因为如果页面速度很慢的话，用户就会很容易转去访问我们的竞争对手的网站。作为专业的web开发人员，我们必须要考虑这个问题。有很多“古老”的关于性能优化的最佳实践在今天依然可行，例如最小化请求数目，使用CDN以及不编写阻塞页面渲染的代码。然而，随着越来越多的web应用都在使用JavaScript，确保我们的代码运行的很快就变得很重要...

在访问外网提供的Api时出现跨域问题，尝试使用普通方式JSONP解决，但是出现Uncaught SyntaxError: Unexpected token : 的错误，所有专注于研究ajax请求跨域问题，在前人基础上逐渐理出脉络，以此记之，希望对大家有所帮助。搜罗资源比较杂乱，所有看到“撒网要见鱼”的一篇文章，下面的内容以此为蓝本，加入自己的总结。感谢“撒网要见鱼”。关于跨域，有N种类型，本文...

使用fetch API来做后端请求，相比较传统的Ajax方式，在写出的代码上更加容易理解，也更便于别人看懂。但是在使用的过程中，经常有同学不能顺利从传统的Ajax请求（如果使用jquery的话，就是$.ajax,$.post,$.get）转移到新的fetch方式，很多时候就是卡在了获取响应数据的环节上。用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的

fetch 使用，如何能够接收JS的传值使用fetch基本方式：fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json'}, body: JSON.stringify

互联网架构设计：高性能的前端当我们讨论互联网产品高性能架构的时候，往往聚焦在高性能的后端服务。其实用户是通过客户端前端来直接体验互联网产品的，前端高性能设计也是很重要的。用户使用互联网产品的基本流程如下图。用户使用电脑Web浏览器或者手机App来直接使用互联网产品服务，用户终端将会把用户的操作行为请求到网站服务器，网站服务器对请求进行响应，用户终端（Web浏览器或者手机App）将解析服务器的响应进行

智能手机发展确实很迅速，像今年，我的大部分工作就都在移动端网页上。 再往前些年，看到的手机版/移动版网页，限制于浏览器与手机性能，2g网络速度等 网页设计无非是蓝、黑、白，界面单调，并且要尽可能的设计简单。 现在情况就大不相同了，软件上webkit内核浏览器大行其道，硬件突飞猛进，网速来说，4g正炒得火热。 下面就和大家分享一下我的一些移动端网页设计经验与心得。1、分辨率这应该是移动端网页最

当时写这篇文章主要是想探讨一下优雅降级和渐进增强的区别，按照正常的逻辑思维，不管是降级还是增强，应该对于效果是没什么区别的，因为后者会覆盖前者，关于CSS3属性的书写顺序，标准的css3属性和带webkit的前缀在某些情况是不一样的效果，比如border-radius和-webkit-border-radius带两个参数时，显示的效果并不一样：.not-a-square { border-ra

HTML5有无限可能，总是在释出一些新鲜实用的功能，让原生的web环境更加炫酷。今天看到datalist 这个元素，可以用来预先定义一个输入框的潜在选项，也就是我们在平时项目中经常用jQuery插件或者自己写JS来实现的autocomplete「自动补全，但似乎自动提示更贴切一些」功能。具体来说，页面上的input还是原来的input，只是在它的下面定义一下新的datalist在其中填充触发提示的文

在某些chrome浏览器下，css里设置的10号字体竟然不起作用！仍显示12号大小，对比firefox、ie6、7、8、9，他们的显示都是好的。要是你也碰到这问题，可以这样解决：-webkit-text-size-adjust: none;在css里加上这一句就可以。如你的样式是这样 .copyright{ font-size:10px; background-color:#ee

页面性能优化的34条黄金守则

==================input keyup 500ms 延时输入 事件处理==================var last;$(".input").keyup(function(event){//.input为你的输入框 last = event.timeStamp; //利用event的timeStamp来标记时间，这样每次的keyup事件都会修改

百度，谷歌搜索时出现的提示框，点击输入框外部任意地方后，隐藏提示框。但是通过jquery怎么实现这个交互效果呢，closest()函数

有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的

HTML5 Web Notification通知是属于桌面性质的通知，有点类似于显示器右下角蹦出的QQ弹框，杀毒提示之类的，跟浏览器是脱离的，消息是置顶的。

预加载器（Pre-loader）可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据，通过预加载器技术网页的加载性能提升了19%，Chrome测试了 Alexa 排名前2000名网站，性能有20%的提升。它并不是一门新技术，有人认为只有 Chrome 才具备这个功能。也有人认为它是有史以来提升浏览器性能最有效的方法。如果你第一次接触预加载器，也许心中已经有了无数个问号。什么是预加载器？