Question: How to get typesafe injection
Question: Why should I use inject decorator?
issue: deprecate inject and Provider
Problem Unit Testing a Parent Component whose Child Inject a Store

正则表达式：

• regex101
• learn-regex

vscode 内无法预览代码的图片，通过插件 Markdown Preview Enhanced 来解决，首先安装此插件，然后 ctrl+shift+P 输入

1

Markdown Preview Enhanced: Extend Parser

调出插件的 parse.js 文件，修改其中的 onWillParseMarkdown 方法：

1
2
3
4
5
6
7
8
9
10
11
12
13

module.exports = {
  onWillParseMarkdown: function (markdown) {
    return new Promise((resolve, reject) => {
      const title = /title:\s*(.*)/.exec(markdown)[1].replace(/\s/, '-')
      markdown = markdown.replace(
        /\{%\s*asset_img\s*(\S*)\s*(.*)\s+%\}/g,
        (whole, $1, $2) =>  (`![${$2}](${title}/${$1})`)
      )
      return resolve(markdown)
    })
  },
  ...  ...
};

安斯库姆四重奏（Anscombe’s quartet）是四组基本的统计特性一致的数据，但由它们绘制出的图表则截然不同。每一组数据都包括了11个 ($x$,$y$) 点。这四组数据由统计学家弗朗西斯·安斯库姆（Francis Anscombe）于1973年构造，他的目的是用来说明在分析数据前先绘制图表的重要性，以及离群值对统计的影响之大。
这四组数据的共同统计特性如下：

参见：Wiki: 安斯库姆四重奏

做数据分析如果用到了数据库作为数据源，pandas 提供了 read_sql 函数，那么如果数据库使用了 SQLAlchemy ORM 该怎么利用这个函数呢？
官方文档上说明可以使用，只是说的比较笼统，具体代码如下：

1

df = pd.read_sql(query.statement, query.session.bind)

如果使用的是 Flask-SQLAlchemy 则可以为：

1

df = pd.read_sql(User.query.filter().statement, db.session.bind)

参考：SQLAlchemy ORM conversion to pandas DataFrame

在使用 Flask-SQLAlchemy 时，如果想调试相关代码，一般和调试 Flask 调试一样，运行

1

flask shell

进入 Shell 环境进行。
注意，原生运行此命令，Shell 环境为默认的 Python 环境，没有 IPython 提供的代码高亮和代码提示。
此时安装 flask-shell-ipython 插件可以解决此问题。

如果不想使用上述插件，我们可以创造一个应用上下文环境，即控制台运行 ipython，进入 IPython 环境，在其中运行代码：

1
2
3

from manage import app, db
ctx = app.app_context()
ctx.push()

这样既创造了一个应用上下文环境。下面我们就可以正常完成数据库的增删查改操作。

如果使用 PyCharm 编辑器，其提供的 Python Console 提供了查看当前变量值等功能更加的方便，同理可以在其中运行上述代码。
每次运行上述代码嫌麻烦，PyCharm 提供了 Starting script 功能，具体操作如下：

Setting > Build, Execution, Deployment > Console > Python Console > Starting script

然后将上述代码，添加到其中，每次运行 Python Console 就能自动加载上述代码。

D3js

前端可视化领域当之无愧的 No.1，提供的 API 相对基础，相对灵活度最好，适合完成定制化有较高要求的图形。

网上的参考资料很多，摘录两个：

• D3js 官网
• Awesome D3

封装 D3js，以提供更易用的 API 的库也很多：

• vx - 基于 React 封装
• C3js
• victory
• vega
• nvd3
• ReCharts

期中 Recharts 是基于 React 的组合式图表，有官方中文文档。
设计比较简约，可满足一般数据可视化需要。

Chart.js

官方介绍：

为设计和开发人员准备的简单、灵活的 JavaScript 图表工具

相比其他可视化库，其使用可能最为简单、轻量。目前中文文档翻译完成度较低。

Echarts

基于 React 封装库有 echarts-for-react，其只是体统了一个简单的封装组件，使用中仍按照 Echarts 的 API 来完成数据可视化。

基于 Vue2.x 封装的有v-charts，其封装度更高。

AntV

蚂蚁金服开源的数据可视化解决方案，包含：

• G2: 一般的数据可视化
• G6: 关系数据可视化
• F2: 专注移动端的数据可视化解决方案

一般我们用到最多的是 AntV/G2，相比 Echarts 算是后起之秀，官方介绍为：

G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

与 Echarts 相比，因为其封装了一些细节，使用上可能相对简单，但是没有 Echarts 那么高的可定制度，相对图形做细微定制化调整，按照官方的 API 可能让人摸不着头脑。而自 Echarts V4 版本，也加入了 数据集(dataset) 等功能，减少了代码繁琐度，相比来说可能 Echarts 更好用一些。就系统化解决方案来说，因AntV 包含各端以及覆盖 React、Vue、Angular 的官方封装，会更胜一筹。就主题配色来啊，个人感觉 AntV 提供的默认主题更好看一点，若你是颜控，不妨试试 AntV/G2。

G2 和 G6 有基于其的 React 封装库：

• BizCharts: 一个基于 G2 封装的 React 图表库，具有 G2、React 的全部优点，可以让用户以组件的形式组合出无数种图表；并且集成了大量的统计工具，支持多种坐标系绘制，交互定制，动画定制以及图形定制等等。
• BizGoblin: 一个基于 F2 封装的 React 图表库，具有 F2、React 的全部优点，可以让用户以组件的形式组合出无数种移动端图表。

不过如果不研究 G2 文档，直接上手 BizCharts 是个大坑……

Highcharts

另一个比较流行的数据可视化框架，有中文文档，网上和 Echarts 对比的文章较多，可自行查阅。有些方面比 Echarts 更强大易用。不过其商用授权费用大部分国内公司会望而却步，单个开发者授权为7900元。

若想启用 Prettier 格式化代码，需要自行安装 Prettier：

1

yarn add --dev prettier

这样编辑器会自动选择 Prettier 路径，完成配置。格式化快捷键 Ctrl+Shift+Alt+P。

注意，使用 Prettier 格式化代码与内置的格式化引擎（快捷键为 Ctrl+Shift+L）存在差异，而且 WebStorm 编辑器无法像 VSCode 那样在不同的语言环境下选择格式化引擎，即无法达到在编辑 JavaScript 代码时按 Ctrl+Shift+L 使用的是 Prettier 来个格式化代码的效果。

此时若手误按 Ctrl+Shift+L 快捷键，格式化的代码和原来的不符，给 Git 版本控制带来麻烦。

为解决上述问题，我们通过 WebStorm 提供的 Watch Filers 来迂回解决，具体操作为：打开 Setting，选择 Tools>File Watchers，点击 +，选择 Prettier，用默认设置点及 Ok 保存即可。

这样，我们在保存代码是时候，能自动使用 Prettier 来格式化代码，不用再考虑快捷键格式化代码的问题。

禁止某行的 tslint 检查（Comment flags in source code）：

1

someCode(); // tslint:disable-line

tsconfig.json 配置

下面对 tsconfig.json 配置文件中常用配置做相关说明

若想使用下面语法导入 React

1

import React, { Component } from 'react';

而不是使用

1

import * as React from 'react';

需要在 tsconfig.json 配置文件中添加：

1
2
3
4
5

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

tslint.json 配置

允许成员函数不加 public 说明：

1
2
3
4
5

{
  "rules": {
    "member-access": [true, "no-public"] // Or false. Read the rule and see what you want.
  }
}