取消功能的设计与实现
取消功能的设计与实现需求分析有些场景下，我们希望能主动取消请求，比如常见的搜索框案例，在用户输入过程中，搜索框的内容也在不断变化，正常情况每次变化我们都应该向服务端发送一次请求。但是当用户输入过快的时候，我们不希望每次变化请求都发出去，通常一个解决方案是前端用 debounce 的方案，比如延时 200ms 发送请求。这样当用户连续输入的字符，只要输入间隔小于 200ms，前面输入的字符都不会发请求。 但是还有一种极端情况是后端接口很慢，比如超过 1s 才能响应，这个时候即使做了 200ms 的 debounce，但是在我慢慢输入（每个输入间隔超过 200ms）的情况下，在前面的请求没有响应前，也有可能发出去多个请求。因为接口的响应时长是不定的，如果先发出去的请求响应时长比后发出去的请求要久一些，后请求的响应先回来，先请求的响应后回来，就会出现前面请求响应结果覆盖后面请求响应结果的情况，那么就乱了。因此在这个场景下，我们除了做 debounce，还希望后面的请求发出去的时候，如果前面的请求还没有响应，我们可以把前面的请求取消。 从 axios 的取消接口设计层面，我们希望做如下的...
变量声明
变量声明let 和 const 是 JavaScript 里相对较新的变量声明方式。let 在很多方面与 var 是相似的，但是可以帮助大家避免在 JavaScript 里常见一些问题。const 是对 let 的一个增强，它能阻止对一个变量再次赋值。 因为 TypeScript 是 JavaScript 的超集，所以它本身就支持 let 和 const。 下面我们会详细说明这些新的声明方式以及为什么推荐使用它们来代替 var。 如果你已经对 var 声明的怪异之处了如指掌，那么你可以轻松地略过这节。 var 声明在 ES5 的时代，我们都是通过 var 关键字定义JavaScript 变量： 1var a = 10 大家都能理解，这里定义了一个名为 a 值为 10 的变量。 我们也可以在函数内部定义变量： 12345function f() { var message = 'Hello World!' return message} 并且我们也可以在其它函数内部访问相同的变量： 12345678910function f() &...
判断是否为移动端浏览器
判断是否为移动端浏览器123456const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);if(flag){ // 移动端} else { // PC端} 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/01.前端/25.JavaScript文章/60.判断是否为移动端浏览器.md。原作者：xugaoyi。许可证：MIT。
提高学习效率的策略
提高学习效率的策略推荐一本关于学习方法的书《认知天性》，里面有讲到有一些简单实用的学习策略，能让大家学的更好、记得更牢，而且这些策略人人可用，时时可用。这些方法包括各种形式的检索练习——例如小的测试和自测，间隔练习、穿插不同但相关科目或技能的练习（多样化练习），在别人教给你解决方案前自己先试着解决问题，从不同类型问题中提取基本原理和规则。由于学习是反复的过程，需要复习早先学过的东西，持续更新已知，并把它们和新知识联系起来。 检索式学习练习从记忆中检索新知识或新技能是有效的学习工具，也是保持长久记忆的有力武器。但凡需要大脑记忆、需要在将来回忆的东西，都可以用到它——对于事实、复杂的概念、解决问题的技巧、运动技能来说都适用。 那么到底什么是检索式学习呢？说说我理解的检索式学习：在脑中检索知识，比如课后的一个小测试、对某个知识点用笔默写出来，甚至去参加面试，等等，都可以理解为检索式学习。 努力检索有助于人们获得更好的学习效果，产生更持久的记忆。我们很容易相信，学东西时越轻松，学习效果越好，但研究表明，事实恰恰相反。只有当头脑被迫工作时，才会将所学的东西记得更牢靠。在检索时所付出的努...
提高记忆的技巧
提高记忆的技巧 多个感官并用记忆时调用一切感官。没人的话可以大声阅读，有人的话可以默念，轻微摇晃手指等，有助于保持专注。 重复记忆每天留出半个到一个小时，梳理总结今天所学的内容。每一章复习完成后做系统的知识整理。 建立关联把你所学的新知识与已有的认知建立联系，对于记忆事半功倍。 场景记忆把知识具象化为一个场景，想象自己在何时何地能用这些知识，与自身发生联系。 提出问题每学习一个知识点，试着提问，然后给出答案。用了就记住了。 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/04.更多/01.学习/03.提高记忆的技巧.md。原作者：xugaoyi。许可证：MIT。
GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床前言Q：为什么要使用图床呢？什么是图床？ A：写博客文章时，图片的上传和存放是一个问题，有的朋友可能会把图片放到和博客同一个仓库当中，使用相对路径来引用，这样后期维护起来会比较麻烦。还有的朋友会在不同的平台发布同一篇文章，这样一来每个平台都要上传图片，为了解决这些问题，比较推荐的做法是把图片统一上传到一个在线的第三方静态资源库中，我们把这个资源库称为图床，其返回一个图片的URL，使用markdown+图片url的方式写作文章，一次编写，到处使用~ 警告：更好的选择…以下内容是比较旧的，现在我发现一个更好用，配置更方便的图床工具：https://picx.xpoet.cn/使用方法看一下他网站的使用教程就行。 撒由那拉~~— right2021.07.04 Q：图床的选择 A：推荐使用GitHub作为图床，特点是免费、稳定，有一个小缺点是国内访问速度慢，不过没关系，可以使用jsDelivr免费CDN加速。 Q：jsDelivr是什么？ A：jsDelivr是国外的一家优秀的公共 ...
GitHub Actions 实现自动部署静态博客
GitHub Actions 实现自动部署静态博客前言我使用vuepress搭建了一个静态博客，挂在了Github pages和Coding pages上面。 coding pages在国内的访问速度比github pages要快很多，而且还可以被百度收录。 一开始的部署方式是使用sh部署脚本把代码提交到这两个平台的仓库分支，虽然已经很方便了，但是我还想把博客未打包的源码提交到Github主分支上。这就需要我操作两次命令，我就想能不能只需要一次操作就可以同时把源码、部署代码一次性提交到两个平台呢？ 实现在了解GitHub Actions最近（2019.12）刚正式发布了之后，尝试使用它发现能够满足我的需求。GitHub Actions 入门教程 首先，需要获取token，后面会用到。获取方法：github获取token官方文档、coding获取token官方文档。 然后，将这两个token同时储存到github仓库的Settings/Secrets里面。变量名可以随便取，但是注意要和后面的ci.yml文件内的变量名一致，这里取的是ACCESS_TOKEN和CODING_TOK...
nodejs递归读取所有文件
nodejs递归读取所有文件123456789101112131415161718192021var fs = require('fs');var path = require('path'); function readFileList(dir, filesList = []) { const files = fs.readdirSync(dir); console.log(files); files.forEach((item, index) => { var fullPath = path.join(dir, item); const stat = fs.statSync(fullPath); if (stat.isDirectory()) { readFileList(path.join(dir, item), filesList); //递归读取文件 } else {...
flex布局案例-输入框布局
flex布局案例-输入框布局 可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263```html<html> <div class="InputAddOn"> <span class="InputAddOn-item">icon</span> <input class="InputAddOn-field" placeholder="input宽度自适应"> <button class="InputAddOn-item">提交</button> </div> <br/> <div class=&...
flex布局语法
flex布局语法一、flex 布局是什么？Flex是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器 都可以指定为 Flex 布局。 123.box{ display: flex;} 行内元素 也可以使用 Flex 布局。 123.box{ display: inline-flex;} Webkit 内核的浏览器，必须加上-webkit前缀。 1234.box{ display: -webkit-flex; /* Safari */ display: flex;} 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（或x轴）（main axis）和垂直的交叉轴（或y...
