随笔分类 - JavaScript学习心得
摘要：一、场景及问题背景： 我们平时开发时本质上就是对应用程序的各种状态进行切换并作出相应处理。最直接的解决方案是将这些所有可能发生的情况全都考虑到，然后使用if... ellse语句来做状态判断来进行不同情况的处理。但是对复杂状态的判断就显得代码逻辑特别的乱。随着增加新的状态或者修改一个状态，if el
阅读全文
摘要：先可以看下这篇博客：如何用状态机简化代码中复杂的 if else 逻辑 —— https://mp.weixin.qq.com/s/dDOA5JQQz3r4a7-yPl33Bg 一、状态机的基本概念 当处理的情况特别多，我们把每种情况的处理逻辑封装成一个状态，然后不同情况之间的转换变成状态的转换。这
阅读全文
摘要：在 es6 之前 JS 一直没有自己的模块语法，为了解决这种尴尬就有了require.js等AMD或CMD方式的出现。在 es6 发布之后 JS 又引入了 import 的概念使得不清楚两者之间的区别的同学在实际使用过程中造成了自己的误解，在查阅了相关资料之后在此记录下自己的小小见解。 一、requ
阅读全文
摘要：网页开发中我们经常要处理用户交互，我们会用 addEventListener 添加事件监听器来监听各种用户操作，比如 click、mousedown、mousemove、input 等，这些都是由用户直接触发的事件。 那么对于一些不是由用户直接触发的事件呢？ 比如元素从不可见到可见、元素大小的改变、
阅读全文
摘要：一、问题背景 网站上自己有设置广告位，结果在部分电脑上不显示图片，及广告位。 部分电脑是安装了 Adblock 广告拦截插件的电脑。 二、问题原因 最后发现原因是因为安装了 Adblock 广告拦截插件。关于 Adblock 可以看官网：Adblock Plus | 世界排名第一的免费广告拦截程序
阅读全文
摘要：前两天在网上看到了一道很有趣的题目，题目大意为：js环境下，如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ？。 这道题目乍看之下似乎不太可能，因为在正常情况下，一个变量的值如果没有手动修改，在一个表达式中是不会变化的。当时我也冥思苦想很久，甚至一度怀疑这道题
阅读全文
摘要：在 B/S 系统中，登录功能通常都是基于 Cookie 来实现的。当用户登录成功后，一般会将登录状态记录到 Session 中，或者是给用户签发一个 Token，无论哪一种方式，都需要在客户端保存一些信息（Session ID 或 Token ），并要求客户端在之后的每次请求中携带它们。 在这样的场
阅读全文
摘要：一、Async 函数的错误处理 async 函数的语法不难，难在错误处理上。先来看下面的例子： 我们可以看到 Promise 报错后，a = await 1 并没有被执行。即当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行。 解决办法是：可以添
阅读全文
摘要：一、问题背景 异步 HTTP 请求在现代 web 应用中可以说是随处可见。为了更好的用户体验，05 年出现了 Ajax，支持不刷新页面实现局部更新。 Ajax 支持同步和异步两种方式，但是大家基本上只用异步方法，因为发送同步请求会让浏览器进入暂时性的假死状态，特别是请求需要处理大数据量、长时间等待的
阅读全文
摘要：在日常生活中，二维码出现在很多场景，比如超市支付、系统登录、应用下载等等。了解二维码的原理，可以为技术人员在技术选型时提供新的思路。对于非技术人员呢，除了解惑，还可以引导他更好地辨别生活中遇到的各种二维码，防止上当受骗。 在扫码的过程中，大家可能会有疑问：这二维码安全吗？会不会泄漏我的个人信息？更深
阅读全文
摘要：一、在页面关闭时，前端上传监控数据的5个解决方案 1、同步XMLHttpRequest const data = JSON.stringify({ time: performance.now() }); var xhr = new XMLHttpRequest(); // 第三个参数false，表示
阅读全文
摘要：面试题： 1、批量请求：要实现批量请求，而且并不需要按顺序发起请求（如果需要按顺序可以存入队列中，按优先级则可以存入优先队列中），所以这里我们存入数组中即可，然后进行遍历，取出数字中的每一项丢去fetch中进行调用。 2、可控制并发度：控制并发数，一个简单的办法就是对数组进行切片，分成一段一段，完成
阅读全文
摘要：如果你了解JS 事件循环之宏任务和微任务的话，那么你就很清楚 setInterval 是一个宏任务。用多了你就会发现它并不是准确无误，极端情况下还会出现一些令人费解的问题。下面我们一一罗列： 一、setInterval()常见问题 1、推入任务队列后的时间不准确 定时器代码：setInterval(
阅读全文
摘要：在javascript中有两种数据类型： 基本类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol 引用类型：对象(Object)、数组(Array)、函数(Function) 在 JavaScript 中，有四个基本
阅读全文
摘要：在看《你不知道的JavaScript》的时候，看到了这个么一段代码： function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; } 并且我们在使用 ?. 操作符，比如：let name = pe
阅读全文
摘要：在学习AST之前，可以结合此篇博客（浅析代码编译过程 ）一起看。 抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，对于一种具体编程语言下的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。 如果你查看目前任何主
阅读全文
摘要：在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在浅析如何利用时间分片高性能渲染十万级数据一文中，提到了可以使用时间分片
阅读全文
摘要：我们都知道React 16实现了新的调度策略(Fiber)，新的调度策略提到的异步、可中断，其实就是基于浏览器的 requestIdleCallback 和 requestAnimationFrame 这两个API。 requestAnimationFrame就不多说可以看刚刚这篇博客：浅析requ
阅读全文
摘要：在Web应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即 req
阅读全文
摘要：在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。对于一次性插入大量数据的情况，一般有两种做法： 1、时间分片 2、虚拟列表 我们首先来看一下“时间分片”的原理
阅读全文