JavaScript 中的 bind 函数

发表于 | 分类于 |

bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体。当新函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被调用时，bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用 new 操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

语法

1
fun.bind(thisArg[, arg1[, arg2[, ...]]])
阅读全文 »

JavaScript 中的原型

发表于 | 分类于 |

在 JavaScript 中没有类的概念，而是通过原型的设计模式实现了面向对象的功能。虽然在 ES6 中引入了 class 关键字，但是这只是一个语法糖。

构造函数

在 JavaScript 中创建一个自定义的对象需要编写构造函数以及通过 new 运算符来创建对象的实例。另外 JavaScript 提供了一个使用语法结构创建对象的语法糖。

1
2
3
4
5
// 构造函数创建对象
const obj1 = new Object();
obj1.key = 1;
// 语法结构创建对象
const obj2 = { key: 1 };
阅读全文 »

JavaScript 中的不可变对象

发表于 | 分类于 |

在面向对象或函数式编程中，不可变对象指的是在创建后它的状态不能改变的对象。相应的，状态可以被改变的对象，则被称为可变对象。

JavaScript 默认对象

JavaScript 只有一种结构，那就是对象。那么在 JavaScript 中的默认对象具有什么特性呢？

1
2
3
4
const person = {
  name: 'A',
  age: 18,
};
阅读全文 »

JavaScript 中的 this

发表于 | 更新于 | 分类于 |

在许多面向对象语言中，this 是实例方法用来引用它们自身的一个变量。在所有语言中 this 通常都是一个不可变的引用或者指针，用来引用当前运行代码的对象、类或其他实体的关键字。因此，this 所引用的实体取决于执行上下文（例如，哪个对象正在调用它的方法）。

阅读全文 »

tmux 配置

发表于 | 分类于 |

tmux 是一个优秀的终端复用器类软件。用户可以通过 tmux 在一个终端内管理多个分离的会话，窗口及面板，对于同时使用多个命令行，或多个任务时非常方便。同时 tmux 可以保存会话的 session，方便了 SSH 连接工作状态的保存恢复。

阅读全文 »

配置 SSH config

发表于 | 更新于 | 分类于 |

说明

SSH 的经典用途是登录到远程服务器中执行命令，除此之外 SSH 也支持隧道协议、端口映射和 X11 连接。借助 SFTP 或 SCP 协议还可以传输文件。

一般来说利用 SSH 登录远程服务器需要执行下面指令:

1
$ ssh user@host

这里默认通过 SSH 连接远程服务器的 22 端口，如需要指定端口可使用 -p port 。

阅读全文 »

使用 iTerm2 shell integration

发表于 | 分类于 |

说明

iTerm2 可以与 unix shell 集成在一起，在安装了 iTerm2 的 shell 集成工具后，可以在 iTerm2 中看到命令历史、当前工作目录、主机名、上传下载文件等。

安装

可以点击菜单栏 iTerm2 > Install Shell Integration 或者终端输入指令

1
$ curl -L https://iterm2.com/misc/install_shell_integration.sh | bash

该 bash 脚本会自动安装当前终端 shell 的对应脚本，并写入到对应的 shell 配置文件中。支持的 shell 有：bash、fish、tcsh、zsh 。

阅读全文 »

jest 测试 React 组件函数调用

发表于 | 分类于 |

问题

React 组件代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React from 'react';

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.onClickButton1 = this.onClickButton1.bind(this);
  }

  onClickButton1() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  onClickButton2 = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    const { count } = this.state;
    return (
      <div>
        <span>State: {count}</span>
        <button className="button1" onClick={this.onClickButton1}>Button1</button>
        <button className="button2" onClick={this.onClickButton2}>Button2</button>
      </div>
    );
  }
}

export default Sample;

Sample 组件有两个方法分别是：onClickButton1() 和 onClickButton2() 。虽然这两个方法都是将 state 的 count 加1，但是 onClickButton1 是 Sample 类的原型方法，而 onClickButton2 是 Sample 实例的属性方法。

阅读全文 »

Git commit 提交规范

发表于 | 更新于 | 分类于 |

在 git commit 时根据 Angular Git Commit 提交规范提交 commit ，这样提交历史看起来更加清晰。

模板如下:

1
2
3
4
5
<type>(<scope>): <subject>
<空一行>
<body>
<空一行>
<footer>

commit 头信息 (第一行) 是必填的，其中 <scope> 是可选的。

提交信息的头信息不能超过 52 个字符，内文信息不能超过 72 个字符！这样将使得提交信息在 Github 和各种 Git 工具中更容易阅读。

阅读全文 »

jest 单元测试生成测试覆盖率时 antd 组件未定义错误

发表于 | 更新于 | 分类于 |

问题

使用 jest 进行单元测试时，对引用了 antd 的组件进行单元测试时可以成功通过测试。但是当使用 --coverage 参数生成测试覆盖率报告时，出现了报错。

测试的 UI 组件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import { Card } from 'antd';

const { Meta } = Card;

class User extends React.Component {
  render() {
    return (
      <Card>
        <Meta />
      </Card>
    );
  }
}

报错信息如下:

1
2
3
4
FAIL  src/routes/User/__test__/User.test.js
 ● Test suite failed to run

   ReferenceError: Card is not defined
阅读全文 »