FrankKai.github.io
FrankKai.github.io copied to clipboard
FrankKai
FE blog
es6+ 常用语法
入职新公司后，前端老大非常提倡使用新技术，终于在8102年遇到了项目中全覆盖es6这种2015年就发布了的前端技术了，当然其中包括一些es6+的内容，比如async，await，但是应用最广泛的还是es6，let，const，Symbol，arrow function，class。 之前也自学过一段时间es6，仅仅在vue层使用了一些，而且也没有使用es6写过非常底层的工具，对于es6的理解其实比较差。 下面我将记录自己在新项目中遇到的es6+的语法。 - Symbol - Template String - async - class - Promise若是存在多个then，但是只有一个catch，catch会捕捉哪一个错误？ - Promise的 return 和 resolve 有什么区别？ - Promise的catch与顺序有关系吗？ - es6的关键词static - es6的BigInt类型 - export 与...
开门见山，先来看一张bug图（状态下面有个00）。  预期是：状态为0时，2个组件不做渲染。 现状：状态为0时，2个组件不做渲染，但是渲染出了00。 - 零渲染 bug 代码 - 如何修复零渲染问题 - 初窥源码 - 源码疑惑 - 原因总结 - 源码实锤 #### 零渲染 bug 代码 什么是React的零渲染问题？ 看下下面这段代码，我们会经常这样写： ```js // bug代码 0 {obj?.count &&...
一些特别棒的面试题[4]
最近面试了一些公司，拿了一些offer，不记录概念题目，仅记录coding类题目。 小伙伴们空闲时间可以做这些题目练练手。 - 只出现一次的数字 - 汇总区间 - 实现红绿灯效果 - 数组去重 - 返回 excel 表格列名 - 检测空对象 - 实现a+a+a打印'abc' - 实现一个Event模块 - 大整数相加 - SuperPerson继承Person - 字符串隐藏部分内容 - 实现一个sum(1,2,3)(4)(5)(6,7)(8)() - 实现一个sum(1,2,3)(4)(5)(6,7)(8)()升级版：如何实现加，减，乘，除呢？
- input事件 - change事件 - hashchange事件 - DOMContentLoaded事件 vs load事件 起源于对input的change事件的困惑，因此特地开一个issue记录遇到的浏览器事件。
- 混入本地和全局的样式(Mixing Local and Global Styles) - 子组件根元素 - 深度选择器 - 动态生成内容 - 时刻提醒自己 当一个``标签有scoped属性时，它的CSS只作用于当前组件的元素。这和Shadow DOM的样式封装是一样的。它有一些警告(caveats)，但是不需要任何填充(polyfill)。是通过PostCSS实现转换的： ```html .example { color: red; } hi ``` 转化成下面的: ```html // 选择有data-v-f3f3eg9属性，并且class名为example的元素 .example[data-v-f3f3eg9] {...
- 记忆一次缓存 - 记忆所有缓存 - LRU缓存 - 低性能版(栈+Map) - 性能较好版(Map) - WeakMap式缓存（入参为对象类型的缓存且方便浏览器垃圾回收） ### 实现一个缓存函数 #### 记忆一次缓存 > 记忆化的意思就是：对于纯函数来说，相同输入产生相同输出。那么如果多次调用输入没有变化的函数时，产生的结果都是相同的，函数体内代码的多次执行是没有意义的，如果使得函数记忆住入参及其结果，下一次调用时直接返回结果即可。 ```js function memoize(fn) { var cachedArg; var cachedResult; return function(arg) { if...
在学习[缓存函数](https://whatthefork.is/memoization)时，最后提到了**WeakMap方式缓存（对入参类型为对象做缓存，并且当对象在WeakMap中的key没有引用时方便浏览器垃圾回收）** >If our parameter were an object (rather than a string, like it is above), we could use WeakMap instead of Map in modern browsers. The benefit of WeakMap is...
 前端工程师们都听过看起来很高级的词，节流和防抖，其实节流就是throttle，防抖就是debounce，其实这个也属于前端性能优化的一部分。 - 节流 像阀门一样控制水流，避免单位时间内流量过大 - 防抖 防止抖动，比节流的流量控制效果更佳明显 在做远程搜索时，如果每输入1个字就调用1次接口，就会频繁查询数据库，假设我们的查询是"12345"，不考虑用户输入错误的情况，至少会请求5次。 再思考一个问题，按钮的click重复触发(例如快速点击2次，3次，...n次)该如何在前端做一层拦截，避免发送重复请求到服务端，最常见的是新增时插入重复数据，这个问题该怎么办呢？ - 查询是"12345"，至少会请求5次导致频繁查询数据库 - 有没有一种方法，可以隔个几百毫秒再去查询呢？（setTimeout） - 有没有更加高级的做法，用户输入完成后，停顿了几百毫秒再去查询呢？（debounce） - 有没有用户体验更加好的做法，不用等待漫长的等待时间从而响应更快呢？（throttle） - 快速点击2次，3次，...n次新增按钮导致插入重复数据 - 如何避免用户单位时间内频繁点击按钮导致重复发送请求的问题？（debounce） - 有没有除了debounce之外的更加精准的方法？（loading） - debounce适用场景 - throttle适用场景 - debounce和throttle的对比...