chenxiaochun
chenxiaochun
 Vim 配置：https://github.com/chenxiaochun/editor-preferences/blob/master/.vimrc ## 指令列表 ### 移动光标操作 * `^`，移动到当前行的第一个字符位置 * `$`，移动到当前行的最后一个字符位置 * `0`，移动到当前行首 * `gg`，移动到文件开头 * `shift+g`，移动到文件末尾 * `ctrl+o`，回到上一次光标的位置 * `j`，往下移动一行 * `k`，往上移动一行 * `l`，往后移动一个字符 * `h`，往前移动一个字符 * `w`，向后移动一个单词，光标停留在单词首部 *...
我个人对英语的情愫由来已久。想来在上小学的时候，河北电视台好像是每天 6 点有一档英语新闻联播的节目。我那个时候只要记得或者赶上了就一定会看。当然了，我其实一句也听不懂，但就是很羡慕里面那个主持人能够说一口如此流利的英文。一边听，一边幻想着自己什么时候也能够像 TA 一样。 所以，那个时候的理想就是长大了如果能当一名英文翻译，简直是不能再帅了。后来，上学之后，本着对英文的这种热情，也使得自己的英文学习成绩一直还算可以。 工作多年之后，其实心里一直没有放下对英文的那种惦记。由于从事的工作原因也需要经常看英文资料，所以其实一直在有意的锻炼自己阅读英文资料的能力。现在清楚的记得第一次系统化的、完整的读完的英文资料就是 jQuery 英文文档。我把 jQuery 英文文档的每一个方法，每一个参数都仔细的啃了一遍。 不清楚别人是什么感觉。我最初读英文资料特别有心理很排斥。再加上当时 jQuery 的中文资料其实到处都是。所以，总是看着看着就想，我干嘛不读中文的呢，啃这玩意儿简直是太累了。你会不断的出现这种想法，一旦没有绷住，就有可能放弃。但是，我最后还是坚持读完了，最大的收获就是不仅对 jQuery 有了更深入的了解，而且大大降低了对英文资料的排斥感。后来，也主动的翻译了若干篇英文技术文档，更加消除了心理的排斥感。慢慢的直到现在，阅读与工作相关的英文资料已经没有了任何心理负担。 在 2018 年底的时候，无意中在朋友圈刷到了技术圈著名大拿池建强在推荐水滴阅读，他说自己也要好好的学习一下英文，争取将来能来一场全英文的演讲（原话貌似是这样）。 我好奇点进去，发现这款产品是这样的： 1. 一个学期时间是 100 天 2. 学费 89 元，相当于每天不到一块钱 3. 会有专属老师和你一起学习，所有的学员会被拉到一个微信群里。大家可以互相督促、交流。有任何问题都可以直接...
MobX 是一个简单的、可扩展的、经过测试的状态管理解决方案。本教程将在十分钟内教给您介绍 MobX 的所有重要概念。 ## 核心概念 状态是每个应用程序的核心。生成了不一致的状态或状态与本地变量的状态不同步，会造成应用程序很不容易管理，极易产生 bug。因此，许多状态管理解决方案试图限制你修改状态的方式，比如使用不可变的 state。但这会带来了一些新的问题，比如数据必须规范化，完整性约束失效等。 为了解决这些根本问题，MobX 再次使状态管理变得简单：使用它不可能产生不一致的状态。而且实现这一目标的策略很简单，就是确保一切都是从应用程序状态中自动派生出的。 MobX 处理你的应用程序状态如下图所示：  1. 首先有一个 state，它可以是一个 object、array、primitives 等任何组成你程序的部分，你可以把这个想象成你应用程序的“单元格”。 2. 其次就是 derivations，它一般是指可以从 state 中直接计算出来的结果。比如未完成的任务数量，也可以是稍微复杂的任务，比如渲染 html。你可以把它想象成电子表格中的“公式和图表”。 3. Reactions 和 derivations 很像，主要的区别在于...
 最近一段时间使用 TypeScript，对遇到的问题做一些总结： ## 如何解决`antd`的`@Form.Create()`修饰器无法使用的问题 一般我们会这样使用`antd`的`@Form.create()`修饰器： ```js @Form.create() class Test{} ``` 但它可能会提示下面的类型错误： ```log Unable to resolve signature of class decorator when called as an expression. Type 'ComponentClass' is not assignable...
### 编写单元测试时要尽量严谨 下面是一个页面的`index.jsx`代码。一般在`index.jsx`文件中，我通常仅用它来描述当前页面结构，不会在其中编写任何具体的逻辑。这样在编写单元测试时，仅需要测试页面的渲染结构是否正确即可。 通过代码可以看出，页面渲染时，`Card`组件中必须要渲染三个组件：`Operation`、`List`、`CreateModal`，并且`Card`的 title 属性上还要渲染一个`CardTitle`组件。 源代码： ```jsx import React from 'react' import { Card } from 'antd' import CardTitle from 'component/CardTitle' import Operation from './Operation' import List from './List'...
 ## 问题现象 如果你的项目依赖了 node-sass，有时在运行时，可能会抛出以下异常： ``` ./node_modules/node-sass/lib/binding.js:13 throw new Error(errors.unsupportedEnvironment()); ^ Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64) ``` ##...
## 错误异常一 当运行单元测试时，如果抛出了下面的异常。说明你的代码中使用了`window.location.href`，而在 jsdom 环境中并没有`location`这个对象，所以就抛出了异常。 ``` Error: Not implemented: navigation (except hash changes) ``` 解决办法就是将你源代码中的`window.location.href`替换成`window.location.assign(url)`。然后在单元测试中使用`jest.spyOn(window.location, 'assign').mockImplementation(() => jest.fn())`来 mock 这个方法即可解决问题。具体详情可参考 [#2112](https://github.com/jsdom/jsdom/issues/2112)。
`toLocaleString()`方法会根据传入的语言参数，将数值转换成对应语言的本地格式字符串。先看几个示例： ```js function eArabic(x){ return x.toLocaleString('ar-EG'); } console.log(eArabic(123456.789)); // expected output: "١٢٣٬٤٥٦٫٧٨٩" console.log(eArabic("123456.789")); // expected output: "123456.789" console.log(eArabic(NaN)); // expected output: "ليس رقم" ``` `ar-EG`表示阿拉伯语言。所以，第一次调用传入的数值被转换成了阿拉伯语言数字；第二次传入的是一个字符串，不做任何转换；第三次传入的`NaN`也被进行了转换，如果你不相信它是`NaN`，可以进行一下测试： ```js isNaN('يس رقم') // true...
### 1、`Checkbox`的`value`必须为字符串 如下所示，当你想给这组`Checkbox`设置默认值时，`CheckboxGroup`上的`value`必须为`['1', '2']`，而不能是`[1, 2]`，否则会不起作用。 ```js 1 2 3 4 ``` ### 2、`validateFieldsAndScroll`方法 当表单的高度超过一屏之后，建议使用此方法去校验表单，当某个表单元素验证不通过时，页面会自动滚动到有错误提示的对应元素上。 ### 3、设置 table 的 column width 有效的用法1： ```js { key: 'skuName', title: '商品名称', dataIndex: 'skuName', width:...
 Chrome69 刚刚发布，翻了一下它的官方文档。所以，这篇文章就是向大家介绍一下它新支持的一些有趣功能特性。 写这篇文章的目的也仅仅是对新技术的一种了解和探索，各位也不要看完之后，就急着应用到自己的项目中去；或者看完之后，就开始纠结各种浏览器的兼容性问题。我个人认为，在项目中使用技术要保守一点，尽量选择那些比较熟悉的技术方案，但是，学习新技术还是应该尽量激进。 ## CSS Scroll Snap CSS Scroll Snap 用来创建平滑的滚动体验，并且还可以控制元素每次滚动操作之后的停止位置。这个新特性非常合适用在图片轮播和滚动分页的操作效果。 拿图片轮播举例，我需要给滚动的容器添加`scroll-snap-type: x mandatory;`，`mandatory`的意思就是“强制的”，也就是强制里面的元素以水平方向滚动。然后给里面滚动的每一张图片添加`scroll-snap-align: center;`。然后当用户滚动轮播的时候，每一张图片就能恰好顺滑的滚动到完美的位置上。 ```css #gallery { scroll-snap-type: x mandatory; overflow-x: scroll; display: flex; } #gallery img {...