zhongxia

【plan】学习一下 d3，并写一下 d3的教程

思维导图中的参考的文章 1. [聊聊前端开发中的长列表](https://zhuanlan.zhihu.com/p/26022258) 2. [requestAnimationFrame的应用](https://medium.com/@yundong/%E4%BD%BF%E7%94%A8requestanimationframe%E8%BF%9B%E8%A1%8C%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-6a8d2c79ced3) 3. [浅说虚拟列表的实现原理](https://github.com/dwqs/blog/issues/70)

简单的防抖，节流函数的实现，面试中，可能让你手写这两个方法，因此需要自己理解下原理，然后敲一两遍，加深记忆。（看了都懂，听了都会，上手全废） ```javascript /** * 【简单版】防抖函数 * 使用 setTimeout 和 clearTimeout 来实现 * @param {function} fn 需要防抖的函数 * @param {number} wait 防抖的等待时间 */ const debounce = (fn, wait = 100) =>...

补充一些相关多线程配置的webpack plugins 文档 1. [happypack](https://github.com/amireh/happypack#using-multiple-instances) 2. [uglifyjs-webpack-plugin](https://github.com/webpack-contrib/uglifyjs-webpack-plugin) 3. [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin)

# 如何理解Virtual DOM? > 时间：2019-09-05 15:09:08 **管理应用程序状态和用户界面的同步一直是UI开发复杂性的主要来源**。 因此出现了 一系列的框架来解决这个问题， 其中 Virtual DOM 正是 React 框架采用的解决方案。 Virtual DOM 就是用 JS 来模拟 DOM 的结构，Virtual DOM 是一个 JS 对象。 React 状态发生改变后，会生成一个新的 VDOM，然后利用 Diff...


>建议直接看图 >- [ ] 找时间整理一下这块笔记 >因为记录笔记的思路使用思维导图，这里是思维导图导出的 MD # Webpack编写 Loader 和 Plugin 插件 ## loader ### 文章地址：https://juejin.im/post/5a698a316fb9a01c9f5b9ca0 ### loader是什么？ - 把源模块转换成通用模块的加载器 - 本质上就是一个 node 模块，导出一个函数。 webpack 会把需要转换的资源的时候调用该函数， 该函数可以利用 this 调用...

图片很大，可以直接下载上面的 pdf，或者看原文章。 

不使复杂的应用，可以使用 react-hook + context 来管理全局状态， 但是复杂的话，还是可以考虑 redux , mobx ,dva 等之类的。

[占坑]，补充前端生成图片的原理 ## 原理 把 html 变成 canvas ， 利用 canvas 的 toDataURL 方法， 把 canvas 变成 base64 格式的数据。 html 是如何变成 canvas 的呢？ html =》 svg =》 canvas 可以看下[SVG 简介与截图等应用](https://www.zhangxinxu.com/wordpress/2017/08/svg-foreignobject/) 这篇文章，详细讲解了...