FrankKai
FrankKai
- 混入本地和全局的样式(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的对比...
 通过阅读这篇文章，可以学习到如何使用webpack-chain插件使得前端项目更加工程化。vue-cli3.0的vue.config.js采用webpack-chain插件的方式进行链式配置，所以这个插件非常值得一学。 - 命令式编程->声明式编程 - 为什么要使用webpack-chain插件？ - webpack-plugin使用示例 - 一些常用的webpack-chain 缩写方法 - 引入webpack-chain后如何配置plugin? - vue-cli3.0引入webpack-chain后，如何配置最常用的DefinePlugin呢？ #### 命令式编程->声明式编程（函数式编程） 使用前的声明式编程： ```js const path = require('path'); const config = { entry: './src/index.js', output:...
- 初识sort() - sort() demo - sort() 语法 - sort() 升降序规则（重点） - 创建、展示和排序数组 - 排序non-ASCII字符 - map()结合sort()一起使用 - 对象根据value给key排序 ### 初识sort() - sort()函数会**原地(in place)**排序数组中的元素，返回排序的数组。（**原地意味着在原数组的基础上做修改，不会开辟新的空间**） - sort()函数默认的排序顺序为升序，默认排序建立在**将元素转换为字符串**的基础上，然后比较UTF-16单位的序列。 - sort()函数的时间复杂度和空间复杂度无法保证，因为依赖于实现。**在sort()函数内部，采用了插排和快排以及一系列排序优化，因此时间复杂度和空间度是跟着情况变化的。** 更多可以查看：[发现算法之美-排序](https://segmentfault.com/a/1190000022852314) 举例说明"将元素转换为字符串"：...
在css-tricks的[A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background)一文中，有这样一句话： >Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts. -...
使用过mqtt的同学都知道，mqtt连接时，在Network面板中的status是101。 | Name | Status | Time | | -------- | ------ | ------ | | mqtt | 101（Switching Protocols） | Pending | 那么101（Switching Protocols）到底是什么意思呢？ 这篇文章将带你理解101交换协议是什么，以及101交换协议运用的协议升级机制。 - 101交换协议 - 协议升级机制
原文链接：[Node.js中的进程与线程](https://mp.weixin.qq.com/s/CRAptkRRCWunLgwjA6BFrQ) 原文中spawn，fork，exec，execFile的示例需要补充一下，我把目录结构和代码做了一些调整，更加易读和理解。 ```js ./sub_test sub_spawn_pipe.js sub_spawn_ipc.js sub_fork_ipc.js sub_exec.js sub_execFile.js ./test sub_process.js ``` ### spawn进程（流方式通信，on('data')） sub_spawn_pipe.js ```js let { spawn } = require("child_process"); let path = require("path"); // 通过node命令执行sub_process.js文件 let childProcess...
- useContext是什么意思？ - useMemo是什么意思？ - useCallback是什么意思？ - useEffect与useCallback(useMemo)的区别是什么？ - useRef如何解决空指针问题？ - 如何通过useReducer实现forceUpdate的效果？