? R : T;
25 | ```
26 |
27 | 1. 首先判断泛型 `T` 是否 Promise 的子集；
28 | 2. 如果是，将 Promise 中的泛型 `R` 抽出来并返回；
29 | 3. 如果不是则原样返回 `T`；
30 |
31 | 再来看一个复杂一点的例子：
32 |
33 | ```ts
34 | type FunctionWithOneObjectArgument = (
35 | props: P,
36 | ) => R;
37 |
38 | type DestructuredArgsOfFunction<
39 | F extends FunctionWithOneObjectArgument
40 | > = F extends FunctionWithOneObjectArgument ? P : never;
41 |
42 | const myFunction = (props: { x: number; y: number }): string => {
43 | return 'ok';
44 | };
45 |
46 | const props: DestructuredArgsOfFunction = {
47 | x: 1,
48 | y: 2,
49 | };
50 | ```
51 |
52 | 代码分析：
53 |
54 | - `FunctionWithOneObjectArgument` 接收两个泛型 `P` 和 `R`，然后返回一个函数签名 `(props: P) => R`，而 `P extends { [x: string]: any }` 这部分则将参数类型 `P` 限定为一个对象。
55 |
56 | - `DestructuredArgsOfFunction` 接收一个泛型 `F`，然后判断 `F` 是否 `FunctionWithOneObjectArgument` 的子集，如果是子集则将其中的 `P` 类型抽出来返回，如果不是则返回 `never`
57 |
58 | - `typeof myFunction` 会返回 `myFunction` 的函数签名，也就是 `(props: { x: number; y: number }): string`
59 |
60 | - `DestructuredArgsOfFunction` 就相当于 `DestructuredArgsOfFunction<(props: { x: number; y: number }): string>`，我们可以将它代入到 `DestructuredArgsOfFunction` 的类型定义中，容易看出 `infer P` 会将 `P` 推导为 `{ x: number; y: number }`，然后我们返回了 `P`，所以 `props` 变量的类型就是 `{ x: number; y: number }` 了。
61 |
--------------------------------------------------------------------------------
/articles/workflow/npm-publish.md:
--------------------------------------------------------------------------------
1 | # 如何发布一个 npm package
2 |
3 | ## 简单发布
4 |
5 | 1. 注册一个 npm 账号
6 | 2. 创建一个 npm package
7 | 3. 运行 `npm login` 登录
8 | 4. 运行 `npm publish` 发布
9 |
10 | 完事，发布一个 npm package 就这么简单。
11 |
12 | ## 解决 package 命名冲突
13 |
14 | 不过，如果你要发布的 package 名字已经有人用了，npm 可能会提示 `You do not have permission to publish "package-name". Are you logged in as the correct user?`，要解决这个问题，你有以下两种做法可以选择：
15 |
16 | 1. 换一个名字继续发布
17 | 2. 在命名空间下发布
18 |
19 | ### 换一个名字发布
20 |
21 | 1. 通过 `npm search [name]` 命令搜索 package 名称是否已经存在
22 | 2. 在 `package.json` 中将 `name` 替换成没有人使用过的名字
23 | 3. 重新运行 `npm publish` 发布
24 | 4. 一般我们也会相应地修改项目文件名(tips: `mv [old-name] [new-name]` 命令可以用来做这件事情哦)
25 |
26 | ### 在命名空间下发布
27 |
28 | 要找到一个没有人用过的 package 名称不是易事，为了解决这个问题，npm 给我们提供了命名空间。我们的用户名或者组织名就是一个命名空间，如果要在命名空间下发布 package，只需要保证 package 名称在这个命名空间下是唯一就行。
29 |
30 | 要将 package 发布到命名空间下，要做如下改动：
31 |
32 | 1. 修改 package 名称，有两种做法：
33 | 1. 手动在 `package.json` 中将 `name` 改成 `@username/package-name`
34 | 2. 或者在创建 package 的时候使用 `npm init --scope=username` 而不是 `npm init`
35 | 2. 使用 `npm publish --access public` 命令进行发布(因为 private package 是收费服务)
36 |
37 | ## 专业发布
38 |
39 | 正经情况下，发布 package 不止这么简单，一般我们可能需要完成以下步骤：
40 |
41 | - 运行测试
42 | - 更新版本号
43 | - 创建 git tag
44 | - 推送最新代码到 github
45 | - 发布 package 到 npm
46 | - 创建 release notes
47 |
48 | 这么规律又繁复的工程，还是交给工具来吧，`np` 就是这个工具。
49 |
50 | **前置工作**
51 |
52 | 1. 你的项目得是一个 git 仓库，而且还需要一个远程仓库
53 | 2. 起码得 push 过一次到远程仓库
54 | 3. 工作区目前是没有改动的
55 |
56 | 如果前置条件不满足就会发布失败。
57 |
58 | **安装 np**
59 |
60 | 全局安装：
61 |
62 | ```shell
63 | npm install --global np
64 | ```
65 |
66 | **使用 np**
67 |
68 | 直接运行 `np` 就可以了，np 会弹出一个交互 UI 让你做各种选择，做完选择后剩下的发布工作就由 np 来完成了。
69 |
70 | **np 文档**
71 |
72 | https://github.com/sindresorhus/np
73 |
74 | ## Reading
75 |
76 | - https://medium.com/@bretcameron/how-to-publish-your-first-npm-package-b224296fc57b
77 | - https://zellwk.com/blog/publish-to-npm/
78 | - [adding badges to readme](https://shields.io/)
79 |
--------------------------------------------------------------------------------
/articles/javascript/tail_call_optimization.md:
--------------------------------------------------------------------------------
1 | # 尾调用优化
2 |
3 | 虽然尾调用优化(Tail Call Optimization)是 ES6 规范中的一部分，但其实[大部分 JS 引擎都没有实现]()。
4 |
5 | ## 什么是尾调用优化？
6 |
7 | 正常情况下代码执行时，如果执行到一个函数，就会创建一个执行上下文推入到执行栈中，等到函数执行结束后再将这个执行上下文出栈。
8 |
9 | 如果我们在一个函数中调用了另一个函数，执行上下文就会在执行栈中一个一个摞起来。
10 |
11 | 下面是一个简单的递归：
12 |
13 | ```js
14 | const recursive = n => {
15 | if (n < 0) return;
16 | console.log(n);
17 | recursive(n - 1);
18 | };
19 | recursive(10000);
20 | ```
21 |
22 | 在执行这段代码的时候，JS 引擎会不断地创建新的 `recursive` 执行上下文并推入执行栈中，如果 `n` 足够大，执行栈的内存空间最终会被用完并抛出栈溢出错误。
23 |
24 | 
25 |
26 | 如果我们仔细观察下上面的代码，会发现在调用了 `recursive(n - 1)` 之后，`recursive(n)` 的执行上下文其实已经没用了。因为在 `recursive(n - 1)` 这个操作之后，已经没有别的代码需要用到 `recursive(n)` 上下文中的任何变量了。那么，`recursive(n)` 的执行上下文其实没必要等到 `recursive(n - 1)` 执行完毕之后再出栈，而是在调用 `recursive(n - 1)` 的时候就可以出栈了，这就是尾调用优化。
27 |
28 | 
29 |
30 | ## 尾调用优化的实现
31 |
32 | V8 曾经实现过尾调用优化，但后来又放弃了，主要是因为实现尾调用优化意味着要在代码执行的过程中修改调用栈，这样的话，执行流的信息就不完整了，而且还会导致两个问题：
33 |
34 | 1. debug 的时候调用栈信息不完整
35 | 2. [error.stack](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack) 的信息会不完整
36 |
37 | 鉴于这些原因，V8 团队建议修改规范，把 [PTC(Proper Tail Calls)](http://www.ecma-international.org/ecma-262/6.0/#sec-tail-position-calls) 改为 [STC(Syntatic Tail Calls)](https://github.com/tc39/proposal-ptc-syntax)，也就是要用特定的语法来使用尾调用，比如 `return continue func()`。目前 V8 还是不支持的，曾经它提供了 `--harmony-tailcalls` 和 `--harmony-explicit-tailcalls` 来开启尾调用优化，不过后来又移除了。
38 |
39 | ## 如何分辨尾调用
40 |
41 | https://2ality.com/2015/06/tail-call-optimization.html#checking-whether-a-function-call-is-in-a-tail-position
42 |
43 | ## 相关资料
44 |
45 | - https://v8.dev/blog/modern-javascript#proper-tail-calls
46 | - https://2ality.com/2015/06/tail-call-optimization.html
47 | - https://github.com/tc39/proposal-ptc-syntax
48 |
--------------------------------------------------------------------------------
/articles/security/clickjacking.md:
--------------------------------------------------------------------------------
1 | # 点击劫持
2 |
3 | ## 什么是点击劫持？
4 |
5 | 点击劫持是一种视觉欺骗的攻击手段，攻击方诱导用户点击一个看不见的网页或者经过伪装的元素，实际上用户点击的并不是自己看到的网页，而是这个网页上层的一个透明网页，这种攻击可能会导致用户下载恶意软件、泄露个人信息、或者在不知情的情况下进行转账、购物等等。
6 |
7 | 一般情况下，攻击方是把需要攻击的网站通过 iframe 嵌入到自己的网页中，再设置其为透明或伪装成其他元素。用户访问攻击方的网页，可能会看到一个“领取免费礼物”的按钮，但实际上用户点击这个按钮，却是点击了这个按钮上方的透明网页，这个看不见的网页可能是用户的银行转账页面，而用户点击了按钮之后，就同意转账了。
8 |
9 | > p.s. 因为浏览器可能会对透明的 iframe 做一些安全检测，所以攻击方可能会把网页设置成 `opacity: 0.0001;` 之类的，越过浏览器的检测阈值。
10 |
11 | ## 如何防御点击劫持？
12 |
13 | 1. 客户端防御：JS 防御
14 | 2. 服务器防御：X-Frame-Options 和 Content Security Policy (CSP)
15 |
16 | ### JS 防御
17 |
18 | - 检查当前网页的 window 是否 top-window，如果不是，那就把它改成 top-window
19 | - 把所有 frame 都设为不透明的
20 | - 阻止透明 frame 上的点击事件
21 | - ...
22 |
23 | 但 JS 防御很容易被绕过，比如浏览器可能设置了禁止执行 JS 脚本，或者攻击方可能会利用 HTML5 iframe 的 `sandbox` 属性。
24 |
25 | ### X-Frame-Options
26 |
27 | `X-Frame-Options` 是一个 HTTP 响应头部字段，用来控制浏览器是否可以在 `` 或者 `