如何写一个好的 README 文档
README 文件是一个一站式的文档文件。通常来说，它不仅仅是那些第一次访问你项目的人首先会阅读的文件，同时对那些常用你项目的人来说也是一份重要文件。
README 为什么那么重要？几周前我需要安装一个开源项目到我的电脑上。这是我第一次接触到这个项目但是体验却很糟糕。本来只需要花费我一到两个小时的时间却花费了我两天，其中最主要的原因就是它没有一个帮助提升接触项目的开发人员以获得更好的首次交互体验的 README 文档。
谁是你的主要读者？在挖掘什么是好的文档和怎么去写一个 README 文档之前，我们先挖掘下谁会去阅读这个文件。
写一个好的 README 文档的其中一个关键是以读者的角度思考。这篇文档主要受众是谁？谁是你的读者？在这种思维下，我喜欢将他们分为三类：
终端用户：
他们是你应用的真实用户，也可能是寻找解决方案的业务分析师。他们可能没有那么强的技术知识，同时他们可能更关注你的解决方案的基础方面而不是技术实施。
技术用户：
这些人一般都有一定的技术背景并且他们希望在自己的环境中安装这个项目。你也可以将他们想象成一种集成器，他们将会把你的项目集成到他们所工作的项目中。他们 ...
React Protal(传送门)
正常的 JSX 书写，从外到内，父组件到子组件顺序，生成的 DOM 结构也是子组件的节点肯定在父组件里面的结构。而在某些情况下，需要我们在代码逻辑中写入的 JSX 渲染到跳出当前组件的 DOM 结构中，比如类似 antd 中 Modal 组件的全局提示框，我们写一个对话框（Dialog）组件：
1234<div class="father"> <div class="brother"></div> {showDialog ? <Dialog /> : null}</div>
生成的 DOM 结构如下：
1234<div class="father"> <div class="brother"></div> <div class="dialog">Dialog</div></div>
对于用户来说，这个对话框应该是一个独立的组件 ...
svg 中 update、enter、exit 行为的理解
d3 是基于数据绑定的思想，选择器选择元素并与数据绑定到一起，根据数据的内容给元素添加不同的属性，就可以实现各种可视化效果。但由于元素的数量和数据未必一致，因此在绑定的时候 d3 会根据数量的差异执行不同的处理：
元素与数据一一对应：执行 update 部分，表示已经存在的元素，用于更新
元素少于数据：执行 enter 部分，表示即将进入的元素，用于添加
元素多于数据：执行 exit 部分，表示即将退出的元素，用于删除
data()在执行不同的方法之前，需要先将数据绑定到选择的 DOM 元素上，这样就可以针对这些数据进行相关操作，比如设置属性等。
1d3.select("svg").selectAll("circle").data([1, 2, 3]);
data 方法的作用是给对应的 DOM 元素添加一个__data__属性，可以通过document.getElementsByTagName("p")[0].__data__看到
update()给定的数组中的个数和 DOM 元素的数量相等则进行 update 操作
...
屏幕下的 React 是如何工作的
屏幕下的 React 是如何工作的React 是用来做用户交互页面的最流行的 JavaScript 库。它是声明式的、高效的和灵活的。
但是，你有没有思考过在屏幕下 React 是如何真正工作的？让我们一起看下 React 在基本层上是如何运行的。
React 是一个 JavaScript 库，用于创建和维护 UI 在内存中的表示。当用户使用一个 React 应用做交互时，React 更新内存中的表示方式并且把改变通过 UI 反应出来。
React 使用虚拟 DOM，虚拟 DOM 就是一种能表达时真实 DOM 的 JavaScript 对象。它是一颗轻量级的树，因为它只包含渲染一个 UI 所必要的信息。
当一个用户使用 React 应用时，React 会更新虚拟 DOM。然后 React 会比较虚拟 DOM 和真实的 DOM。React 只会对真实 DOM 做一些必要的改变，也就是显示在 UI 上的改变。
虚拟 DOM 时一个 JavaScript 对象。这个对象由 React 元素组成，而 React 元素则是最小单位的 React 应用。
React 元素是不可变的，也就是说它们无 ...
使用 Javascript 编写简洁代码的 8 个必备技巧
使用 Javascript 编写简洁代码的 8 个必备技巧Javascript 是一个优秀的编程语言，但是，即使对一些资深的程序员来说，编写简洁明了的 javascript 代码也可能是一个巨大的挑战。
那简洁的代码应该是什么样的呢？它应该是：
可读性高
易于调试
高效和高性能并重
下面是一些工具和技巧可以使你的 javascript 代码质量上一个台阶：
1. 在一个 api 请求以及 json 解析时使用 try catch 捕获在请求 api 的时候可能会发生很多错误，因此必须小心处理这些场景。而当处理 JSON 的时候，不要自动认为提供的内容是值得信任的，尝试处理可能的不一致从而使你的代码更加健壮。
12345try { // 做一个请求或事复杂JSON的解析} catch (err) { // 处理错误}
2. 使用代码检查工具（ESLint）一个代码检查工具是一个静态代码分析工具，可以根据一组预定义的规则和配置检查程序和风格错误。简单来说它可以提升你的 JS 或 TS 代码质量并使它们更加连贯。
3. 在你的编辑器中追踪 J ...
svg 中 viewBox 图解
定义viewBox 属性定义了画布上可以显示的区域
12<!-- viewBox="minX, minY, width, height" --><svg width="200" height="200" viewBox="0 0 100 100"></svg>
示例首先定义一个宽高都为 300 的 svg，并在其中画一个矩形，这时候看到的就是一个完整的矩形：
12345678910<svg width="300" height="300" style="border: 1px solid"> <defs> <linearGradient id="color1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset=&qu ...