OBKoro1
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/JS%E5%9F%BA%E7%A1%80-call%E5%92%8Capply%E8%BF%98%E6%9C%89bind.html#call-apply-bind%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%BB%8D) # JS基础系列-重新认识call apply bind 函数原型链中的 apply，call 和 bind 方法是 JavaScript 中相当重要的概念，与 this 关键字密切相关，相当一部分人对它们的理解还是比较浅显，所谓js基础扎实，绕不开这些基础常用的API，这次让我们来彻底掌握它们吧！ # 目录 call,apply,bind的基本介绍 call/apply/bind的核心理念：借用方法 call和apply的应用场景 bind的应用场景 中高级面试题：手写call/apply、bind # call,apply,bind的基本介绍 # 语法： fun.call(thisArg, param1, param2, ...)...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/JS%E5%9F%BA%E7%A1%80-call%E5%92%8Capply%E8%BF%98%E6%9C%89bind.html#%E4%B8%AD%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95%E9%A2%98-%E6%89%8B%E5%86%99call-apply%E3%80%81bind%EF%BC%9A) # JS基础系列-重新认识call apply bind 函数原型链中的 apply，call 和 bind 方法是 JavaScript 中相当重要的概念，与 this 关键字密切相关，相当一部分人对它们的理解还是比较浅显，所谓js基础扎实，绕不开这些基础常用的API，这次让我们来彻底掌握它们吧！ # 目录 call,apply,bind的基本介绍 call/apply/bind的核心理念：借用方法 call和apply的应用场景 bind的应用场景 中高级面试题：手写call/apply、bind # call,apply,bind的基本介绍 # 语法： fun.call(thisArg, param1, param2, ...)...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/%E5%BF%8D%E8%80%85%E7%A7%98%E7%B1%8D%E5%AE%9A%E6%97%B6%E5%99%A8%E6%9C%BA%E5%88%B6.html) # JS忍者秘籍中的定时器机制详解 前段时间刚看完《JS忍者秘籍》，虽说是15年出版的，有些东西是过时了，但像对原型链、闭包、正则、定时器之类的机制却是不会过时的，里面很多东西都讲的很细，还是值得一读的，本文将对这本书中对定时器机制的部分进行详细的解析，如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 # 准备 阅读本文之前，推荐先阅读Js 的事件循环(Event Loop)机制以及实例讲解这篇文章来理解背后发生的事情，本文对事件循环机制不会很仔细的讲解。 # 定时器解决的问题： 由于JS的单线程特性，定时器提供了一种跳出单线程限制的方法，即让一段代码在一定毫秒之后，再异步执行。 # 设置和清除定时器： 直接引用忍者秘籍中的图片： # 注意： 定时器的时间间隔设为0，也会有几毫秒的延迟。 在使用setTimeout和setInterval的时候最好将其赋值给一个变量，以便取消定时器。 在使用Vue的时候，setTimeout和setInterval的this指向的是window对象，访问不到组件数据以及方法。 在使用Vue的时候，路由跳转并不会销毁setInterval，但是组件已经销毁了，这会导致问题。 在执行线程中setTimeout/setInterval无法保证准时执行回调函数的。 setInterval调用有可能会被废弃以及setInterval的连续执行 第三点和第四点的解决方法可以参考我之前写的Vue 实践过程中的几个问题。 接下来要讲的是第五点和第六点，这两点是最重要，也是本文要重点解析的内容。 # 执行线程中的定时器执行 下面来看忍者秘籍中的栗子：...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/%E5%8D%9A%E5%AE%A2%E5%A4%96%E9%93%BE%E5%A4%B1%E6%95%88%E4%B8%80%E9%94%AE%E6%9B%BF%E6%8D%A2.html) # 博客外链失效一键替换 大约一个月前，微博的图片外链失效了，以及掘金因为盗链问题也于2019/06/06决定开启防盗链，造成的影响是：个人博客网站的引用了这些图片外链都不能显示。 目前微博和掘金的屏蔽，在CSDN和segmentfault都是可以正常显示的，只影响个人博客。 比如前段时间我的博客:http://obkoro1.com上引用的微博图片都不能显示了。 因为我写博客比较频繁，被屏蔽的图片不在少数，肯定不能一个个手动的替换，查了一番没有找到现成的解决方案，做了个脚本工具，并且写了文档把它开源出来了。 # markdown-img-down-site-change(下载/替换markdown中的图片) 搜索目标文件夹中的markdown文件，找到目标图片，提供下载图片，替换图片链接的功能-通常用于markdown 图片失效。 # 简介 这是一个极为轻量的脚本，引用包，设置好参数，通过API即可轻松上手。 # 解决什么问题？ 集中下载markdown文件中某个域名下的图片到一个文件夹下。 用新的图片链接替换markdown文件中某个域名的图片链接。 // 1. 下载这两个图片 //  //  // 2. 替换成：github的链接 ...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/%E4%B8%80%E4%BB%BD%E8%B6%85%E7%BA%A7%E8%AF%A6%E7%BB%86%E7%9A%84Vue-cli3.0%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B.html) # 一份超级详细的Vue-cli3.0使用教程 在vue-cli 2.X的时候，也写过一篇类似的文章，在八月份的时候vue-cli已经更新到了3.X，新版本的脚手架，功能灰常强大，试用过后非常喜欢，写篇教程来帮助各位踩一下坑。 游泳、健身了解一下：博客、前端积累文档、公众号、GitHub # 主要内容： 零配置启动/打包一个.vue文件 详细的搭建过程 重点推荐：使用图形化界面创建/管理/运行项目 # 安装： # 卸载旧版本： 如果你事先已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g # Node版本要求： 3.x需要在Node.js8.9或更高版本(推荐8.11.0+)，点击这里可以安装node 大多数人都安装过了node,使用下面的命令行查询你的node版本: node -v 如果你的版本不够，可以使用下面的命令行来把Node版本更新到最新的稳定版：...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/koroFileHeader.html) # koroFileHeader-VSCode文件头部注释生成 在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！觉得插件不错的话，就给个Star⭐️吧~ # 简介 文件头部添加注释: 在文件开头添加注释，记录文件信息 支持用户高度自定义注释选项 保存文件的时候，自动更新最后的编辑时间和编辑人 快捷键：window：ctrl+alt+i,mac：ctrl+cmd+i 在光标处添加函数注释: 在光标处自动生成一个注释模板，下方有栗子 支持用户高度自定义注释选项 快捷键：window：ctrl+alt+t,mac：ctrl+cmd+t 快捷键不可用很可能是被占用了,参考这里 支持不同语言的注释格式 自定义注释符号，再也不用担心冷门语言插件不支持了！ 自动添加头部注释 查看更多配置,以及有更多需求可以给我提issue。 # 安装 在 Vscode 扩展商店中搜索koroFileHeader,点击安装即可。 # 使用 文件头部注释： 在当前编辑文件中使用快捷键:window：ctrl+alt+t/mac：ctrl+cmd+t,即可生成文件头部注释。...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/js%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6.html) # JS高程中的垃圾回收机制与常见内存泄露的解决方法 起因是因为想了解闭包的内存泄露机制，然后想起《js高级程序设计》中有关于垃圾回收机制的解析，之前没有很懂，过一年回头再看就懂了，写篇博客与大家分享一下。 # 内存的生命周期： 分配你所需要的内存： 由于字符串、对象等没有固定的大小，js程序在每次创建字符串、对象的时候，程序都会分配内存来存储那个实体。 使用分配到的内存做点什么。 不需要时将其释放回归： 在不需要字符串、对象的时候，需要释放其所占用的内存，否则将会消耗完系统中所有可用的内存，造成系统崩溃，这就是垃圾回收机制所存在的意义。 所谓的内存泄漏指的是：由于疏忽或错误造成程序未能释放那些已经不再使用的内存，造成内存的浪费。 # 垃圾回收机制： 在C和C++之类的语言中，需要手动来管理内存的，这也是造成许多不必要问题的根源。幸运的是，在编写js的过程中，内存的分配以及内存的回收完全实现了自动管理，我们不用操心这种事情。 # 垃圾收集机制的原理： 垃圾收集器会按照固定的时间间隔，周期性的找出不再继续使用的变量，然后释放其占用的内存。 什么叫不再继续使用的变量？ 不再使用的变量也就是生命周期结束的变量，是局部变量，局部变量只在函数的执行过程中存在，当函数运行结束，没有其他引用(闭包)，那么该变量会被标记回收。 全局变量的生命周期直至浏览器卸载页面才会结束，也就是说全局变量不会被当成垃圾回收。 # 标记清除：当前采用的垃圾收集策略 工作原理： 当变量进入环境时(例如在函数中声明一个变量)，将这个变量标记为“进入环境”，当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。 工作流程： 垃圾收集器会在运行的时候会给存储在内存中的所有变量都加上标记。 去掉环境中的变量以及被环境中的变量引用的变量的标记。 那些还存在标记的变量被视为准备删除的变量。...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/js%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6.html) # 事件循环(Event Loop)机制以及实例 大家都知道js是单线程的脚本语言，在同一时间，只能做同一件事，为了协调事件、用户交互、脚本、UI渲染和网络处理等行为，防止主线程阻塞，Event Loop方案应运而生... # 为什么js是单线程？ js作为主要运行在浏览器的脚本语言，js主要用途之一是操作DOM。 在js高程中举过一个栗子，如果js同时有两个线程，同时对同一个dom进行操作，这时浏览器应该听哪个线程的，如何判断优先级？ 为了避免这种问题，js必须是一门单线程语言，并且在未来这个特点也不会改变。 # 执行栈与任务队列 因为js是单线程语言，当遇到异步任务(如ajax操作等)时，不可能一直等待异步完成，再继续往下执行，在这期间浏览器是空闲状态，显而易见这会导致巨大的资源浪费。 # 执行栈 当执行某个函数、用户点击一次鼠标，Ajax完成，一个图片加载完成等事件发生时，只要指定过回调函数，这些事件发生时就会进入执行栈队列中，等待主线程读取,遵循先进先出原则。 # 主线程 要明确的一点是，主线程跟执行栈是不同概念，主线程规定现在执行执行栈中的哪个事件。 主线程循环：即主线程会不停的从执行栈中读取事件，会执行完所有栈中的同步代码。 当遇到一个异步事件后，并不会一直等待异步事件返回结果，而是会将这个事件挂在与执行栈不同的队列中，我们称之为任务队列(Task Queue)。 当主线程将执行栈中所有的代码执行完之后，主线程将会去查看任务队列是否有任务。如果有，那么主线程会依次执行那些任务队列中的回调函数。 不太理解的话，可以运行一下下面的代码，或者点击一下这个demo 结果是当a、b、c函数都执行完成之后，三个setTimeout才会依次执行。 let a =...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/http%E7%BC%93%E5%AD%98.html) # 谈论HTTP缓存时我们在谈论什么 在浏览器众多缓存中的HTTP缓存可能很多人对这个的概念并没有很清晰，每个人都知道进入一次网页之后再刷新一次页面，加载速度会比首次加载快非常多，每个人都知道这是浏览器缓存的magic，但是对此背后的原因可能不甚了解... # 当我们在谈论HTTP缓存时我们在谈论什么: 我们实际上是在谈论下面这两种情况: 如上图，浏览器对静态资源的HTTP缓存有两种情况，一种是强缓存(本地缓存)，另一种是弱缓存(协商缓存)。 # 缓存流程： # 浏览器第一次请求资源时： 浏览器第一次请求资源时，必须下载所有的资源，然后根据响应的header内容来决定，如何缓存资源。可能采用的是强缓存，也可能是弱缓存 # 浏览器后续请求资源时的匹配流程： 由上图可以知道当浏览器请求一个静态资源时的HTTP流程： 强缓存阶段：先在本地查找该资源，如果发现该资源，并且其他限制也没有问题(比如:缓存有效时间)，就命中强缓存，返回200，直接使用强缓存，并且不会发送请求到服务器 弱缓存阶段：在本地缓存中找到该资源，发送一个http请求到服务器，服务器判断这个资源没有被改动过，则返回304，让浏览器使用该资源。 缓存失败阶段(重新请求)：当服务器发现该资源被修改过，或者在本地没有找到该缓存资源，服务器则返回该资源的数据。 # 强缓存与弱缓存的区别： 获取资源形式： 都是从缓存中获取资源的。 状态码： 强缓存返回200(from cache),弱缓存返回304状态码 请求(最大区别)： 强缓存不发送请求，直接从缓存中取。 弱缓存需要发送一个请求，验证这个文件是否可以使用（有没有被改动过）。...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/effect/%E9%80%80%E5%87%BA%E9%A1%B5%E9%9D%A2%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82.html) # Web sendBeacon 刷新/关闭页面之前发送请求 # 背景： 有一个任务非常耗时会消耗后台大量算力，所以在退出页面的时候，要求前端这边发送一个请求来杀死任务。 一开始以为这个需求非常简单，就是在进入其他路由前，发送一下请求，杀死一下任务就好了。 然而现实狠狠的打了我的脸，因为退出页面的场景不止切换路由~ # 退出页面场景： 还在本网站，跳到其他路由 刷新页面/关闭页面也需要发送请求来杀死任务 # 还在本网站，跳到其他路由 这个比较简单，在Vue中可以通过路由离开的钩子beforeRouteLeave来实现： beforeRouteLeave(to, from, next) { if (任务运行中) { // 发送请求 }else{ next(true) //...