From 07087c160811a257d4583681919f5d62c056b418 Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Wed, 28 Sep 2022 05:36:21 +0000 Subject: [PATCH] feat: add `package.json` cheatsheet. 7ab9ddf7665ff6ff89b0c237df87023f4b7dc43c --- docs/cron.html | 18 +- docs/git.html | 70 +++---- docs/javascript.html | 268 +++++++++++++-------------- docs/jest.html | 90 ++++----- docs/json.html | 50 ++--- docs/markdown.html | 36 ++-- docs/npm.html | 16 +- docs/package.json.html | 406 +++++++++++++++++++++++++++++++++++++++++ docs/sketch.html | 22 +-- docs/toml.html | 58 +++--- docs/typescript.html | 180 +++++++++--------- docs/vscode.html | 26 +-- index.html | 13 +- style/style.css | 83 +++++---- 14 files changed, 875 insertions(+), 461 deletions(-) create mode 100644 docs/package.json.html diff --git a/docs/cron.html b/docs/cron.html index 361d26b2..744a888c 100644 --- a/docs/cron.html +++ b/docs/cron.html @@ -9,10 +9,10 @@ -

Cron 备忘清单

+

Cron 备忘清单

Cron 最适合安排重复性任务。 可以使用关联的 at 实用程序来完成一次性任务的调度。

-

Crontab 格式

-

格式

+

Crontab 格式

+

格式

Min  Hour Day  Mon  Weekday
 分钟  小时  天   月   周
@@ -62,7 +62,7 @@ -

示例

+

示例

@@ -121,7 +121,7 @@
-

特殊字符串

+

特殊字符串

@@ -164,7 +164,7 @@
-

Crontab 命令

+

Crontab 命令

@@ -195,7 +195,7 @@
-

特殊字符

+

特殊字符

@@ -234,12 +234,12 @@
-

Also see

+

Also see

-
+ diff --git a/docs/git.html b/docs/git.html index b61a2d76..67fd0ead 100644 --- a/docs/git.html +++ b/docs/git.html @@ -9,10 +9,10 @@ -

Git 备忘清单

+

Git 备忘清单

本备忘单总结了常用的 Git 命令行指令，以供快速参考。

-

入门

-

创建存储库

+

入门

+

创建存储库

创建一个新的本地存储库

$ git init [project name]
@@ -22,7 +22,7 @@

将存储库克隆到指定目录

$ git clone git_url 指定目录
-

做出改变

+

做出改变

在工作目录中显示修改后的文件，为您的下一次提交暂存

$ git status
@@ -53,7 +53,7 @@

在指定分支之前应用当前分支的任何提交

$ git rebase [branch]
-

配置

+

配置

设置将附加到您的提交和标签的名称

$ git config --global user.name "name"
@@ -66,7 +66,7 @@

在文本编辑器中编辑全局配置文件

$ git config --global --edit
-

使用分支

+

使用分支

列出所有本地分支

$ git branch
@@ -89,7 +89,7 @@

标记当前提交

$ git tag my_tag
-

观察你的存储库

+

观察你的存储库

显示当前活动分支的提交历史

$ git log
@@ -105,7 +105,7 @@

以人类可读的格式显示 Git 中的任何对象

$ git show [SHA]
-

同步

+

同步

从该 Git 远程获取所有分支

$ git fetch [alias]
@@ -125,7 +125,7 @@

将另一个分支的一个特定提交合并到当前分支

$ git cherry-pick [commit_id]
-

远程

+

远程

添加一个 git URL 作为别名

$ git remote add [alias] [url]
@@ -141,7 +141,7 @@

更改 git repo 的 URL

$ git remote set-url origin [git_url]
-

临时提交

+

临时提交

保存已修改和分阶段的更改

$ git stash
@@ -154,7 +154,7 @@

丢弃存储堆栈顶部的更改

$ git stash drop
-

跟踪路径更改

+

跟踪路径更改

从项目中删除文件并暂存删除以进行提交

$ git rm [file]
@@ -164,7 +164,7 @@

显示所有提交日志，并指示任何移动的路径

$ git log --stat -M
-

忽略文件

+

忽略文件

/logs/*
 # “！” 意思是不要忽视
 !logs/.gitkeep
@@ -176,20 +176,20 @@
 .sass-cache

.gitignore 文件指定了 Git 应该忽略的未跟踪的文件

-

Git 技巧

-

重命名分支

-

重命名为new

+

Git 技巧

+

重命名分支

+

重命名为new

$ git branch -m <new>
 $ git branch -m <old> <new> # 重命名分支
-

推送并重置

+

推送并重置

$ git push origin -u <new>
-

删除远程分支

+

删除远程分支

$ git push origin --delete <old> # 方法1
 $ git push origin :oldBranchName # 方法2
-

Log

+

Log

按内容搜索更改

$ git log -S'<a term in the source>'
@@ -197,9 +197,9 @@ 
$ git log -p <file_name>

打印出很酷的日志可视化

-
$ git log --pretty=oneline --graph --decorate --all
-
-

分支

+
$ git log --pretty=oneline --graph --decorate --all
+
+

分支

列出所有分支及其上游

$ git branch -vv
@@ -215,22 +215,22 @@

删除本地存在远程不存在的分支

git remote prune origin
-

Commit

+

Commit

$ git commit -v --amend

重写最后的提交信息

-

忽略文件的权限变化

+

忽略文件的权限变化

git config core.fileMode false

不再将文件的权限变化视作改动

-

Git 别名

+

Git 别名

$ git config --global alias.co checkout
 $ git config --global alias.br branch
 $ git config --global alias.ci commit
 $ git config --global alias.st status

也可以看看：More Aliases

-

设置大小写敏感

+

设置大小写敏感

# 查看git 的设置
 $ git config --get core.ignorecase
 # 设置大小写敏感
@@ -238,7 +238,7 @@
 # 远程有俩相同目录，通过这种方式清除掉，然后提交记录
 $ git rm -r --cached <目录/文件>
-

修改远程 Commit 记录

+

修改远程 Commit 记录

$ git rebase -i HEAD~3
 # 表示要修改当前版本的倒数第三次状态
 # 将要更改的记录行首单词 pick 改为 edit
@@ -275,13 +275,13 @@
 # 最后，确保没有人提交进行推送，最好不要加 -f 强制推送
 $ git push -f origin master
-

撤销远程记录

+

撤销远程记录

# 撤销一条记录   
 $ git reset --hard HEAD~1
 # 强制同步到远程仓库  
 $ git push -f origin HEAD:master
-

放弃本地修改内容

+

放弃本地修改内容

# 如果有的修改以及加入暂存区的话
 $ git reset --hard 
 # 还原所有修改，不会删除新增的文件
@@ -289,23 +289,23 @@
 # 下面命令会删除新增的文件
 $ git clean -xdf
-

获取最近一次提交的 Hash

+

获取最近一次提交的 Hash

$ git rev-parse HEAD # e10721cb8859b2c
 # 获取短 hash
 $ git rev-parse --short HEAD # e10721c
-

删除已经合并到 master 的分支

-
$ git branch --merged master | grep -v '^\*\|  master' | xargs -n 1 git branch -d
-
-

中文乱码的解决方案

+

删除已经合并到 master 的分支

+
$ git branch --merged master | grep -v '^\*\|  master' | xargs -n 1 git branch -d
+
+

中文乱码的解决方案

$ git config --global core.quotepath false
-

把 A 分支的某一个 commit，放到 B 分支上

+

把 A 分支的某一个 commit，放到 B 分支上

# 切换到 B 分支
 $ git checkout <B>
 # 将 A 分支 <hash-id> 的内容 pick 到 B 分支
 $ git cherry-pick <hash-id>
-
+ diff --git a/docs/javascript.html b/docs/javascript.html index 38167bbc..821107ec 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -9,17 +9,17 @@ -

JavaScript 备忘清单

+

JavaScript 备忘清单

包含最重要概念、函数、方法等的 JavaScript 备忘单。 初学者的完整快速参考。

-

入门

-

介绍

+

入门

+

介绍

JavaScript 是一种轻量级的解释型编程语言。

-

打印调试

+

打印调试

// => Hello world!
 console.log('Hello world!');
 // => Hello QuickReference
@@ -27,31 +27,31 @@
 // 将错误消息打印到 stderr
 console.error(new Error('Oops!'));
-

断点调试

+

断点调试

function potentiallyBuggyCode() {
   debugger;
   // 做可能有问题的东西来检查，逐步通过等。
 }

debugger 语句调用任何可用的调试功能。

-

数字

+

数字

let amount = 6;
 let price = 4.99;
 let home = 1e2;
 let m = 0644;   // 八进制数字 420
-

let 关键字

+

let 关键字

let count; 
 console.log(count); // => undefined
 count = 10;
 console.log(count); // => 10
-

const 关键字

+

const 关键字

const numberOfColumns = 4;
 // TypeError: Assignment to constant...
 numberOfColumns = 8;
-

变量

+

变量

let x = null;
 let name = "Tammy";
 const found = false;
@@ -60,20 +60,20 @@
 var a;
 console.log(a); // => undefined
-

字符串

+

字符串

let single = 'Wheres my bandit hat?';
 let double = "Wheres my bandit hat?";
 // => 21
 console.log(single.length);
-

算术运算符

+

算术运算符

5 + 5 = 10     // 加法 Addition
 10 - 5 = 5     // 加法 Subtraction
 5 * 10 = 50    // 乘法 Multiplication
 10 / 5 = 2     // 除法 Division
 10 % 5 = 0     // 取模 Modulo
-

注释

+

注释

// 此行将表示注释
 /* 
 多行配置
@@ -81,7 +81,7 @@
 以下配置。
 */
-

赋值运算符

+

赋值运算符

let number = 100;
 // 两个语句都会加 10
 number = number + 10;
@@ -89,14 +89,14 @@
 console.log(number); 
 // => 120
-

字符串插值

+

字符串插值

let age = 7;
 // 字符串拼接
 'Tommy is ' + age + ' years old.';
 // 字符串插值
 `Tommy is ${age} years old.`;
-

字符串

+

字符串

var abc = "abcdefghijklmnopqrstuvwxyz";
 var esc = 'I don\'t \n know';    // \n 换行
 var len = abc.length;            // 字符串长度
@@ -118,7 +118,7 @@
 // 数字转为十六进制 (16)、八进制 (8) 或二进制 (2)
 128.toString(16);
-

数字

+

数字

var pi = 3.141;
 pi.toFixed(0);    // 返回 3             
 pi.toFixed(2);    // 返回 3.14 - 使用金钱
@@ -140,7 +140,7 @@
 // 无穷
 Number.POSITIVE_INFINITY
-

Math

+

Math

const pi = Math.PI; // 3.141592653589793
 Math.round(4.4); // = 4 - 数字四舍五入
 Math.round(4.5); // = 5
@@ -167,7 +167,7 @@
 // 随机整数，从 1
 Math.floor(Math.random() * 5) + 1;
-

全局函数

+

全局函数

// 像脚本代码一样执行字符串
 eval();                     
 // 从数字返回字符串
@@ -193,20 +193,20 @@
 // 解析一个字符串并返回一个整数
 parseInt();
-

JavaScript 条件

-

操作符

+

JavaScript 条件

+

操作符

true || false;       // true
 10 > 5 || 10 > 20;   // true
 false || false;      // false
 10 > 100 || 10 > 20; // false
-

逻辑运算符 &&

+

逻辑运算符 &&

true && true;        // true
 1 > 2 && 2 > 1;      // false
 true && false;       // false
 4 === 4 && 3 > 1;    // true
-

比较运算符

+

比较运算符

1 > 3                 // false
 3 > 1                 // true
 250 >= 250            // true
@@ -214,32 +214,32 @@
 1 === 2               // false
 1 === '1'             // false
-

逻辑运算符 !

+

逻辑运算符 !

let lateToWork = true;
 let oppositeValue = !lateToWork;
 // => false
 console.log(oppositeValue);
-

空值合并运算符 ??

+

空值合并运算符 ??

null ?? 'I win';         //  'I win'
 undefined ?? 'Me too';   //  'Me too'
 false ?? 'I lose'        //  false
 0 ?? 'I lose again'      //  0
 '' ?? 'Damn it'          //  ''
-

if Statement (if 语句)

+

if Statement (if 语句)

const isMailSent = true;
 if (isMailSent) {
   console.log('Mail sent to recipient');
 }
-

Ternary Operator (三元运算符)

+

Ternary Operator (三元运算符)

var age = 1;
 
 // => true
 var status = (age >= 18) ? true : false;
-

else if

+

else if

const size = 10;
 if (size > 20) {
   console.log('Medium');
@@ -250,7 +250,7 @@
 }
 // Print: Small
-

== vs ===

+

== vs ===

0 == false     // true
 0 === false    // false, 不同类型
 1 == "1"       // true,  自动类型转换
@@ -261,7 +261,7 @@
 '0' === false      // false

== 只检查值，=== 检查值和类型。

-

switch 语句

+

switch 语句

const food = 'salad';
 
 switch (food) {
@@ -273,7 +273,7 @@
     console.log('请您用餐');
 }
-

switch 多 case - 单一操作

+

switch 多 case - 单一操作

const food = 'salad';
 
 switch (food) {
@@ -285,8 +285,8 @@
     console.log('请您用餐');
 }
-

JavaScript Functions 函数

-

函数

+

JavaScript Functions 函数

+

函数

// 定义函数：
 function sum(num1, num2) {
   return num1 + num2;
@@ -294,7 +294,7 @@
 // 调用函数：
 sum(3, 6); // 9
-

匿名函数

+

匿名函数

// Named function
 function rocketToMars() {
   return 'BOOM!';
@@ -304,32 +304,32 @@
   return 'BOOM!';
 }
-

箭头函数 (ES6)

-

有两个参数

+

箭头函数 (ES6)

+

有两个参数

const sum = (param1, param2) => { 
   return param1 + param2; 
 }; 
 console.log(sum(2,5)); // => 7
-

没有参数

+

没有参数

const printHello = () => { 
   console.log('hello'); 
 }; 
 printHello(); // => hello
-

只有一个参数

+

只有一个参数

const checkWeight = weight => { 
   console.log(`Weight : ${weight}`); 
 }; 
 checkWeight(25); // => Weight : 25
-

简洁箭头函数

+

简洁箭头函数

const multiply = (a, b) => a * b; 
 // => 60 
 console.log(multiply(2, 30));

从 ES2015 开始提供箭头函数

-

返回关键字

+

返回关键字

// 有 return
 function sum(num1, num2) {
   return num1 + num2;
@@ -339,7 +339,7 @@
   num1 + num2;
 }
-

调用函数

+

调用函数

// 定义函数
 function sum(num1, num2) {
   return num1 + num2;
@@ -347,24 +347,24 @@
 // 调用函数
 sum(2, 4); // 6
-

函数表达式

+

函数表达式

const dog = function() {
   return 'Woof!';
 }
-

函数参数

+

函数参数

// 参数是 name
 function sayHello(name) {
   return `Hello, ${name}!`;
 }
-

函数声明

+

函数声明

function add(num1, num2) {
   return num1 + num2;
 }
-

JavaScript 范围

-

范围

+

JavaScript 范围

+

范围

function myFunction() {
   var pizzaName = "Margarita";
   // 这里的代码可以使用 PizzaName
@@ -388,7 +388,7 @@
 const x = 2;       // Global scope

ES6 引入了两个重要的新 JavaScript 关键字：let 和 const。这两个关键字在 JavaScript 中提供了块作用域。

-

块作用域变量

+

块作用域变量

const isLoggedIn = true;
 if (isLoggedIn == true) {
   const statusMessage = 'Logged in.';
@@ -397,7 +397,7 @@
 // 未捕获的引用错误...
 console.log(statusMessage);
-

全局变量

+

全局变量

// 全局声明的变量
 const color = 'blue';
 function printColor() {
@@ -406,7 +406,7 @@
 
 printColor(); // => blue
-

let vs var

+

let vs var

for (let i = 0; i < 3; i++) {
   // 这是“let”的最大范围
   // i 可以访问 ✔️
@@ -420,7 +420,7 @@
 // i 可以访问 ✔️

var 的范围是最近的函数块，而 let 的范围是最近的封闭块。

-

带闭包的循环

+

带闭包的循环

// 打印三次，不是我们的意思。
 for (var i = 0; i < 3; i++) {
   setTimeout(_ => console.log(i), 10);
@@ -433,23 +433,23 @@
 }

变量使用 let 有自己的副本，变量有使用 var 的共享副本。

-

JavaScript Arrays

-

数组

+

JavaScript Arrays

+

数组

const fruits = ["apple", "dew", "banana"];
 // 不同的数据类型
 const data = [1, 'chicken', false];
-

属性 .length

+

属性 .length

const numbers = [1, 2, 3, 4];
 numbers.length // 4
-

索引

+

索引

// 访问数组元素
 const myArray = [100, 200, 300];
 console.log(myArray[0]); // 100
 console.log(myArray[1]); // 200
-

可变图表

+

可变图表

@@ -491,7 +491,7 @@
-

方法 .push()

+

方法 .push()

// 添加单个元素：
 const cart = ['apple', 'orange'];
 cart.push('pear'); 
@@ -500,19 +500,19 @@
 numbers.push(3, 4, 5);

将项目添加到末尾并返回新的数组长度。

-

方法 .pop()

+

方法 .pop()

const fruits = ["apple", "dew", "banana"];
 const fruit = fruits.pop(); // 'banana'
 
 console.log(fruits); // ["apple", "dew"]

从末尾删除一个项目并返回已删除的项目。

-

方法 .shift()

+

方法 .shift()

let cats = ['Bob', 'Willy', 'Mini'];
 cats.shift(); // ['Willy', 'Mini']

从头删除一个项目并返回已删除的项目。

-

方法 .unshift()

+

方法 .unshift()

let cats = ['Bob'];
 // => ['Willy', 'Bob']
 cats.unshift('Willy');
@@ -520,7 +520,7 @@
 cats.unshift('Puff', 'George');

将项目添加到开头并返回新的数组长度。

-

方法 .concat()

+

方法 .concat()

const numbers = [3, 2, 1]
 const newFirstNumber = 4
     
@@ -531,8 +531,8 @@
 numbers.concat(newFirstNumber)

如果你想避免改变你的原始数组，你可以使用 concat。

-

JavaScript 循环

-

While 循环

+

JavaScript 循环

+

While 循环

while (condition) {
   // 要执行的代码块
 }
@@ -542,7 +542,7 @@
   i++;
 }
-

反向循环

+

反向循环

const fruits = ["apple", "dew", "berry"];
 for (let i = fruits.length - 1; i >= 0; i--) {
   console.log(`${i}. ${fruits[i]}`);
@@ -551,7 +551,7 @@
 // => 1. dew
 // => 0. apple
-

Do...While 语句

+

Do...While 语句

x = 0
 i = 0
 do {
@@ -561,26 +561,26 @@
 } while (i < 5);
 // => 0 1 3 6 10
-

For 循环

+

For 循环

for (let i = 0; i < 4; i += 1) {
   console.log(i);
 };
 // => 0, 1, 2, 3
-

遍历数组

+

遍历数组

for (let i = 0; i < array.length; i++){
   console.log(array[i]);
 }
 // => 数组中的每一项
-

Break

+

Break

for (let i = 0; i < 99; i += 1) {
   if (i > 5) break;
   console.log(i)
 }
 // => 0 1 2 3 4 5
-

Continue

+

Continue

for (i = 0; i < 10; i++) {
   if (i === 3) {
     continue;
@@ -588,14 +588,14 @@
   text += "The number is " + i + "<br>";
 }
-

嵌套循环

+

嵌套循环

for (let i = 0; i < 2; i += 1) {
   for (let j = 0; j < 3; j += 1) {
     console.log(`${i}-${j}`);
   }
 }
-

for...in 循环

+

for...in 循环

const fruits = ["apple", "orange", "banana"];
 for (let index in fruits) {
   console.log(index);
@@ -604,7 +604,7 @@
 // => 1
 // => 2
-

label 语句

+

label 语句

var num = 0;
 
 outPoint:
@@ -620,7 +620,7 @@
 alert(num);  // 95

从 alert(num) 的值可以看出，continue outPoint; 语句的作用是跳出当前循环，并跳转到 outPoint（标签）下的 for 循环继续执行。

-

for...of 循环

+

for...of 循环

const fruits = ["apple", "orange", "banana"];
 for (let fruit of fruits) {
   console.log(fruit);
@@ -629,7 +629,7 @@
 // => orange
 // => banana
-

for await...of

+

for await...of

async function* asyncGenerator() {
   var i = 0;
   while (i < 3) {
@@ -647,7 +647,7 @@
 // 1
 // 2
-

可选的 for 表达式

+

可选的 for 表达式

var i = 0;
 
 for (;;) {
@@ -656,8 +656,8 @@
   i++;
 }
-

JavaScript 迭代器(Iterators)

-

分配给变量的函数

+

JavaScript 迭代器(Iterators)

+

分配给变量的函数

let plusFive = (number) => {
   return number + 5;  
 };
@@ -667,7 +667,7 @@
 // 由于 f 具有函数值，因此可以调用它。
 f(9); // 14
-

回调函数

+

回调函数

const isEven = (n) => {
   return n % 2 == 0;
 }
@@ -679,34 +679,34 @@
 printMsg(isEven, 4); 
 // => The number 4 is an even number: True.
-

数组方法 .reduce()

+

数组方法 .reduce()

const numbers = [1, 2, 3, 4];
 const sum = numbers.reduce((accumulator, curVal) => {  
   return accumulator + curVal;
 });
 console.log(sum); // 10
-

数组方法 .map()

+

数组方法 .map()

const members = ["Taylor", "Donald", "Don", "Natasha", "Bobby"];
 const announcements = members.map((member) => {
   return member + " joined the contest.";
 });
 console.log(announcements);
-

数组方法 .forEach()

+

数组方法 .forEach()

const numbers = [28, 77, 45, 99, 27];
 numbers.forEach(number => {  
   console.log(number);
 });
-

数组方法 .filter()

+

数组方法 .filter()

const randomNumbers = [4, 11, 42, 14, 39];
 const filteredArray = randomNumbers.filter(n => {  
   return n > 5;
 });
-

JavaScript 对象(Objects)

-

访问属性

+

JavaScript 对象(Objects)

+

访问属性

const apple = { 
   color: 'Green',
   price: { bulk: '$3/kg', smallQty: '$4/kg' }
@@ -714,7 +714,7 @@
 console.log(apple.color);      // => Green
 console.log(apple.price.bulk); // => $3/kg
-

命名属性

+

命名属性

// 无效键名示例
 const trainSchedule = {
   // 由于单词之间的空格而无效。
@@ -725,13 +725,13 @@
   +compartment: 'C'
 }
-

不存在的属性

+

不存在的属性

const classElection = {
   date: 'January 12'
 };
 console.log(classElection.place); // undefined
-

可变的

+

可变的

const student = {
   name: 'Sheldon',
   score: 100,
@@ -746,7 +746,7 @@
 student = {}
 // TypeError: TypeError：分配给常量变量。
-

赋值简写语法

+

赋值简写语法

const person = {
   name: 'Tom',
   age: '22',
@@ -755,7 +755,7 @@
 console.log(name); // 'Tom'
 console.log(age);  // '22'
-

删除运算符

+

删除运算符

const person = {
   firstName: "Matilda",
   age: 27,
@@ -772,7 +772,7 @@
 }
 */
-

对象作为参数

+

对象作为参数

const origNum = 8;
 const origObj = {color: 'blue'};
 const changeItUp = (num, obj) => {
@@ -786,7 +786,7 @@
 // 通过引用，因此是可变的。
 console.log(origObj.color);
-

工厂函数

+

工厂函数

// 一个接受 'name'，'age' 和 'breed' 的工厂函数，
 //  参数返回一个自定义的 dog 对象。
 const dogFactory = (name, age, breed) => {
@@ -800,12 +800,12 @@
   };
 };
-

速记对象创建

+

速记对象创建

const activity = 'Surfing';
 const beach = { activity };
 console.log(beach); // { activity: 'Surfing' }
-

this 关键字

+

this 关键字

const cat = {
   name: 'Pipey',
   age: 8,
@@ -815,7 +815,7 @@
 };
 console.log(cat.whatName()); // => Pipey
-

方法

+

方法

const engine = {
   // 方法简写，有一个参数
   start(adverb) {
@@ -829,7 +829,7 @@
 engine.start('noisily');
 engine.sputter();
-

Getters 和 setters

+

Getters 和 setters

const myCat = {
   _name: 'Dottie',
   get name() {
@@ -844,8 +844,8 @@
 // 赋值调用 setter
 myCat.name = 'Yankee';
-

JavaScript Classes

-

静态方法/字段

+

JavaScript Classes

+

静态方法/字段

class Dog {
   constructor(name) {
     this._name = name;  
@@ -871,7 +871,7 @@
 // 调用静态方法
 Dog.bark();
-

公有静态字段

+

公有静态字段

class ClassStaticField {
   static staticField = 'static field'
 }
@@ -879,7 +879,7 @@
 console.log(ClassStaticField.staticField)
 // 预期输出值："static field"​
-

Class

+

Class

class Song {
   constructor() {
     this.title;
@@ -894,7 +894,7 @@
 const mySong = new Song();
 mySong.play();
-

extends

+

extends

// Parent class
 class Media {
   constructor(info) {
@@ -915,7 +915,7 @@
   publishDate: 1975
 });
-

Class Constructor

+

Class Constructor

class Song {
   constructor(title, artist) {
     this.title = title;
@@ -925,7 +925,7 @@
 const mySong = new Song('Bohemian Rhapsody', 'Queen');
 console.log(mySong.title);
-

Class Methods

+

Class Methods

class Song {
   play() {
     console.log('Playing!');
@@ -936,8 +936,8 @@
   }
 }
-

JavaScript Modules

-

Export / Import

+

JavaScript Modules

+

Export / Import

// myMath.js
 // 默认导出 Default export
 export default function add(x,y){
@@ -958,7 +958,7 @@
   multiply, duplicate
 }
-

import 加载模块

+

import 加载模块

// main.js
 import add, { subtract, multiply, duplicate } from './myMath.js';
 console.log(add(6, 2));      // 8 
@@ -968,7 +968,7 @@
 // index.html
 <script type="module" src="main.js"></script>
-

Export Module

+

Export Module

// myMath.js
 function add(x,y){
   return x + y
@@ -990,7 +990,7 @@
   duplicate
 }
-

require 加载模块

+

require 加载模块

// main.js
 const myMath = require('./myMath.js')
 console.log(myMath.add(6, 2));      // 8 
@@ -998,8 +998,8 @@
 console.log(myMath.multiply(6, 2)); // 12
 console.log(myMath.duplicate(5))    // 10
-

JavaScript Promises

-

Promise

+

JavaScript Promises

+

Promise

创建 promises

new Promise((resolve, reject) => {
   if (ok) {
@@ -1009,30 +1009,30 @@
   }
 })
-

使用 promises

+

使用 promises

promise
   .then((result) => { ··· })
   .catch((error) => { ··· })
-

Promise 方法

+

Promise 方法

Promise.all(···)
 Promise.race(···)
 Promise.reject(···)
 Promise.resolve(···)
-

执行器函数

+

执行器函数

const executorFn = (resolve, reject) => {
   resolve('Resolved!');
 };
 const promise = new Promise(executorFn);
-

setTimeout()

+

setTimeout()

const loginAlert = () => {
   console.log('Login');
 };
 setTimeout(loginAlert, 6000);
-

Promise 状态

+

Promise 状态

const promise = new Promise((resolve, reject) => {
   const res = true;
   // 一个异步操作。
@@ -1048,7 +1048,7 @@
   (err) => console.error(err)
 );
-

.then() 方法

+

.then() 方法

const promise = new Promise((resolve, reject) => {    
   setTimeout(() => {
     resolve('Result');
@@ -1061,7 +1061,7 @@
   console.error(err);
 });
-

.catch() 方法

+

.catch() 方法

const promise = new Promise(
   (resolve, reject) => {  
   setTimeout(() => {
@@ -1077,7 +1077,7 @@
   console.error(err);
 });
-

Promise.all()

+

Promise.all()

const promise1 = new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve(3);
@@ -1093,7 +1093,7 @@
   console.log(res[1]);
 });
-

链接多个 .then()

+

链接多个 .then()

const promise = new Promise(
   resolve => 
     setTimeout(() => resolve('dAlan'),100)
@@ -1110,7 +1110,7 @@
   console.error(err)
 });
-

避免嵌套的 Promise 和 .then()

+

避免嵌套的 Promise 和 .then()

const promise = new Promise((resolve, reject) => {  
   setTimeout(() => {
     resolve('*');
@@ -1128,8 +1128,8 @@
 // 将它们链接在一起
 promise.then(twoStars).then(oneDot).then(print);
-

JavaScript Async-Await

-

异步

+

JavaScript Async-Await

+

异步

function helloWorld() {
   return new Promise(resolve => {
     setTimeout(() => {
@@ -1153,7 +1153,7 @@
 msg(); // Message: Hello World! <-- 2 秒后
 msg1(); // Message: Hello World! <-- 2 秒后
-

解决 Promises

+

解决 Promises

let pro1 = Promise.resolve(5);
 let pro2 = 44;
 let pro3 = new Promise(function(resolve, reject) {
@@ -1164,7 +1164,7 @@
 });
 // expected => Array [5, 44, "foo"]
-

异步等待 Promises

+

异步等待 Promises

function helloWorld() {
   return new Promise(resolve => {
     setTimeout(() => {
@@ -1178,7 +1178,7 @@
 }
 msg(); // Message: Hello World! <-- 2 秒后
-

错误处理

+

错误处理

// 数据不完整
 let json = '{ "age": 30 }';
 
@@ -1189,7 +1189,7 @@
   console.error( "Invalid JSON data!" );
 }
-

异步等待运算符

+

异步等待运算符

function helloWorld() {
   return new Promise(resolve => {
     setTimeout(() => {
@@ -1203,8 +1203,8 @@
 }
 msg(); // Message: Hello World! <-- 2 秒后
-

JavaScript 请求

-

JSON

+

JavaScript 请求

+

JSON

const jsonObj = {
   "name": "Rick",
   "id": "11A",
@@ -1212,12 +1212,12 @@
 };

另见：JSON 备忘单

-

XMLHttpRequest

+

XMLHttpRequest

const xhr = new XMLHttpRequest();
 xhr.open('GET', 'mysite.com/getjson');

XMLHttpRequest 是一个浏览器级别的 API，它使客户端能够通过 JavaScript 编写数据传输脚本，而不是 JavaScript 语言的一部分。

-

GET

+

GET

const req = new XMLHttpRequest();
 req.responseType = 'json';
 req.open('GET', '/getdata?id=65');
@@ -1226,7 +1226,7 @@
 };
 req.send();
-

POST

+

POST

const data = { weight: '1.5 KG' };
 const xhr = new XMLHttpRequest();
 // 初始化一个请求。
@@ -1244,7 +1244,7 @@
   console.log(xhr.response);
 }
-

fetch api

+

fetch api

fetch(url, {
     method: 'POST',
     headers: {
@@ -1261,14 +1261,14 @@
   console.log(networkError.message)
 })
-

JSON 格式

+

JSON 格式

fetch('url-that-returns-JSON')
   .then(response => response.json())
   .then(jsonResponse => {
     console.log(jsonResponse);
   });
-

promise url 参数获取 API

+

promise url 参数获取 API

fetch('url')
   .then(response  => {
     console.log(response);
@@ -1276,7 +1276,7 @@
     console.error(rejection.message);
   });
-

Fetch API 函数

+

Fetch API 函数

fetch('https://api-xxx.com/endpoint', {
   method: 'POST',
   body: JSON.stringify({id: "200"})
@@ -1291,7 +1291,7 @@
   console.log(jsonResponse);
 })
-

async await 语法

+

async await 语法

const getSuggestions = async () => {
   const wordQuery = inputField.value;
   const endpoint = `${url}${queryParams}${wordQuery}`;
@@ -1307,5 +1307,5 @@
 }
-
+ diff --git a/docs/jest.html b/docs/jest.html index f647fefc..47c1b0c4 100644 --- a/docs/jest.html +++ b/docs/jest.html @@ -9,10 +9,10 @@ -

Jest 备忘清单

+

Jest 备忘清单

Jest 是一款优雅、简洁的 JavaScript 测试框架。

-

入门

-

介绍

+

入门

+

介绍

Jest 是一款优雅、简洁的 JavaScript 测试框架。

  • 无需配置，大多数 JS 项目中即装即用，无需配置
    • @@ -21,7 +21,7 @@
  • 快照， 轻松编写持续追踪大型对象的测试，并在测试旁或代码内显示实时快照。
  • 代码覆盖， 无需其他操作，您仅需添加 --coverage 参数来生成代码覆盖率报告。
-

测试结构

+

测试结构

describe('makePoniesPink', () => {
   beforeAll(() => {
     /* 在所有测试之前运行 */
@@ -41,8 +41,8 @@
   })
 })
-

匹配器

-

基本匹配器

+

匹配器

+

基本匹配器

expect(42).toBe(42)    // 严格相等 (===)
 expect(42).not.toBe(3) // 严格相等 (!==)
 expect([1, 2]).toEqual([1, 2]) // 深度相等
@@ -56,7 +56,7 @@
   .not.toStrictEqual({ b: 2 })

Using matchers, matchers docs

-

真实性

+

真实性

// 匹配 if 语句视为 true 的任何内容
 // （not false、0、''、null、undefined、NaN）
 expect('foo').toBeTruthy()
@@ -72,7 +72,7 @@
 // 匹配真假
 expect(true).toEqual(expect.any(Boolean))
-

数字

+

数字

// 大于
 expect(2).toBeGreaterThan(1)
 // 大于或等于
@@ -86,7 +86,7 @@
 // 原始值的传递类型
 expect(NaN).toEqual(expect.any(Number))
-

字符串

+

字符串

// 检查字符串是否与正则表达式匹配。
 expect('long string').toMatch('str')
 expect('string').toEqual(expect.any(String))
@@ -99,7 +99,7 @@
   ]
 )
-

数组

+

数组

expect([]).toEqual(expect.any(Array))
 const exampleArray = [
   'Alice', 'Bob', 'Eve'
@@ -112,7 +112,7 @@
 expect([{ a: 1 }, { a: 2 }])
     .toContainEqual({ a: 1 }) // 包含相等
-

对象

+

对象

expect({ a:1 }).toHaveProperty('a')
 expect({ a:1 }).toHaveProperty('a', 1)
 expect({ a: {b:1} }).toHaveProperty('a.b')
@@ -128,7 +128,7 @@
   expect.anything(),
 ])
-

模拟函数

+

模拟函数

// const fn = jest.fn()
 // const fn = jest.fn().mockName('Unicorn') -- 命名为 mock, Jest 22+
 // 函数被调用
@@ -158,7 +158,7 @@
 // fn.mock.calls[0][0] — 第一次调用的第一个参数
 expect(fn.mock.calls[0][0]).toBe(2)
-

别名

+

别名

  • toBeCalled → toHaveBeenCalled
  • toBeCalledWith → toHaveBeenCalledWith
    • @@ -169,7 +169,7 @@
  • lastReturnedWith → toHaveLastReturnedWith
  • nthReturnedWith → toHaveNthReturnedWith
-

杂项

+

杂项

// 检查对象是否是类的实例。
 expect(new A()).toBeInstanceOf(A)
 
@@ -181,7 +181,7 @@
 // 匹配除 null 或 undefined 之外的任何内容
 expect('pizza').toEqual(expect.anything())
-

快照

+

快照

// 这可确保某个值与最近的快照匹配。
 expect(node).toMatchSnapshot()
 
@@ -193,7 +193,7 @@
 // 确保值与最近的快照匹配。
 expect(user).toMatchInlineSnapshot()
-

Promise 匹配器（Jest 20+）

+

Promise 匹配器（Jest 20+）

test('resolve to lemon', () => {
   // 验证在测试期间是否调用了一定数量的断言。
   expect.assertions(1)
@@ -220,7 +220,7 @@
 })

resolves 文档

-

例外

+

例外

// const fn = () => {
 //    throw new Error('Out of cheese!')
 // }
@@ -243,12 +243,12 @@
 // 测试函数在调用时是否抛出与最新快照匹配的错误。
 expect(fn).toThrowErrorMatchingSnapshot()
-

别名

+

别名

  • toThrowError → toThrow
-

异步测试

-

实例

+

异步测试

+

实例

请参阅 Jest 文档中的 更多示例。

在异步测试中指定一些预期的断言是一个很好的做法，所以如果你的断言根本没有被调用，测试将会失败。

test('async test', () => {
@@ -263,7 +263,7 @@
 
beforeEach(expect.hasAssertions)
 

 
这将验证每个测试用例至少存在一个断言。 它还可以与更具体的 expect.assertions(3) 声明配合使用。

-

async/await

+

async/await

test('async test', async () => {
   expect.assertions(1)
 
@@ -271,7 +271,7 @@
   expect(result).toBe(true)
 })
-

done() 回调

+

done() 回调

test('async test', (done) => {
   expect.assertions(1)
 
@@ -289,7 +289,7 @@
 })

将断言包装在 try/catch 块中，否则 Jest 将忽略失败

-

Promises

+

Promises

test('async test', () => {
   expect.assertions(1)
 
@@ -299,8 +299,8 @@
 })

从你的测试中 返回 一个 Promise

-

模拟

-

模拟函数

+

模拟

+

模拟函数

test('call the callback', () => {
   const callback = jest.fn()
   fn(callback)
@@ -326,7 +326,7 @@
 
const callback = jest.fn(() => true)
 

 
模拟函数文档

-

返回、解析和拒绝值

+

返回、解析和拒绝值

您的模拟可以返回值：

const callback
     = jest.fn().mockReturnValue(true)
@@ -352,7 +352,7 @@
 //  call 1: false
 //  call 2+: true
-

使用 jest.mock 方法模拟模块

+

使用 jest.mock 方法模拟模块

jest.mock('lodash/memoize', () => (a) => a) // The original lodash/memoize should exist
 jest.mock('lodash/memoize', () => (a) => a, { virtual: true }) // The original lodash/memoize isn’t required
@@ -360,7 +360,7 @@

注意：当使用 babel-jest 时，对 jest.mock 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 jest.doMock。

-

使用模拟文件模拟模块

+

使用模拟文件模拟模块

创建一个类似 __mocks__/lodash/memoize.js 的文件：

module.exports = (a) => a
@@ -369,7 +369,7 @@

注意：当使用 babel-jest 时，对 jest.mock 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 jest.doMock。

手动模拟文档

-

模拟对象方法

+

模拟对象方法

const spy = jest.spyOn(console, 'log').mockImplementation(() => {})
 expect(console.log.mock.calls).toEqual([['dope'], ['nope']])
 spy.mockRestore()
@@ -378,7 +378,7 @@
 expect(spy).toHaveBeenCalled()
 spy.mockRestore()
-

模拟 getter 和 setter (Jest 22.1.0+)

+

模拟 getter 和 setter (Jest 22.1.0+)

const location = {}
 const getTitle = jest
     .spyOn(location, 'title', 'get')
@@ -387,7 +387,7 @@
     .spyOn(location, 'title', 'set')
     .mockImplementation(() => {})
-

定时器模拟

+

定时器模拟

为使用本机计时器函数（setTimeout、setInterval、clearTimeout、clearInterval）的代码编写同步测试。

// 启用假计时器
 jest.useFakeTimers()
@@ -416,7 +416,7 @@

对于特殊情况，请使用 jest.runOnlyPendingTimers()。

注意： 您应该在测试用例中调用 jest.useFakeTimers() 以使用其他假计时器方法。

-

模拟 getters 和 setters

+

模拟 getters 和 setters

const getTitle = jest.fn(() => 'pizza')
 const setTitle = jest.fn()
 const location = {}
@@ -425,7 +425,7 @@
   set: setTitle,
 })
-

清除和恢复模拟

+

清除和恢复模拟

对于一个模拟

// 清除模拟使用日期
 // （fn.mock.calls、fn.mock.instances）
@@ -447,15 +447,15 @@
 // 将所有模拟恢复到其原始值。
 jest.restoreAllMocks()
-

使用模拟时访问原始模块

+

使用模拟时访问原始模块

jest.mock('fs')
 // 模拟模块
 const fs = require('fs')
 // 原始模块
 const fs = require.requireActual('fs')
-

数据驱动测试（Jest 23+）

-

使用不同的数据运行相同的测试

+

数据驱动测试（Jest 23+）

+

使用不同的数据运行相同的测试

test.each([
   [1, 1, 2],
   [1, 2, 3],
@@ -464,7 +464,7 @@
   expect(a + b).toBe(expected)
 })
-

使用模板文字相同

+

使用模板文字相同

test.each`
   a    | b    | expected
   ${1} | ${1} | ${2}
@@ -474,7 +474,7 @@
   expect(a + b).toBe(expected)
 })
-

或在“describe”级别

+

或在“describe”级别

describe.each([
   ['mobile'], ['tablet'], ['desktop']
 ])('checkout flow on %s', (viewport) => {
@@ -484,17 +484,17 @@
 })

describe.each() 文档、test.each() 文档,

-

跳过测试

-

不要运行这些测试

+

跳过测试

+

不要运行这些测试

describe.skip('makePoniesPink'...
 tests.skip('make each pony pink'...
-

仅运行以下测试

+

仅运行以下测试

describe.only('makePoniesPink'...
 tests.only('make each pony pink'...
-

测试有副作用的模块

-

实例

+

测试有副作用的模块

+

实例

const modulePath = '../module-to-test'
 afterEach(() => {
   jest.resetModules()
@@ -511,10 +511,10 @@
 })

Node.js 和 Jest 会缓存你需要的模块。 要测试具有副作用的模块，您需要在测试之间重置模块注册表

-

另见

+

另见

-
+
© 2022 Kenny Wang, All rights reserved.
diff --git a/docs/json.html b/docs/json.html index bc193f69..a94145ce 100644 --- a/docs/json.html +++ b/docs/json.html @@ -9,10 +9,10 @@ -

JSON 备忘清单

+

JSON 备忘清单

这是理解和编写 JSON 格式配置文件的快速参考备忘单。

-

入门

-

介绍

+

入门

+

介绍

JSON 是一种基于文本的轻量级开放标准，专为人类可读的数据交换而设计。

  • JSON 代表 JavaScript 对象表示法
    • @@ -21,7 +21,7 @@
  • JSON 文件扩展名为 .json
  • JSON Internet 媒体类型为 application/json
-

示例

+

示例

{
   "name": "Jason",
   "age": 39,
@@ -35,7 +35,7 @@
   ]
 }
-

类型

+

类型

@@ -74,7 +74,7 @@
-

字符串

+

字符串

@@ -121,18 +121,18 @@
-

示例

+

示例

{
   "url": "https://quickref.me",
   "msg" : "Hi,\n\"QuickRef.ME\"",
   "intro": "Share quick reference and cheat sheet for developers."
 }
-

无效字符串

+

无效字符串

{ "foo": 'bar' }

Have to be delimited by double quotes

-

数字

+

数字

@@ -155,7 +155,7 @@
-

示例

+

示例

{
   "positive" : 12,
   "negative" : -1,
@@ -164,11 +164,11 @@
   "zero" : 0
 }
-

无效的数字

+

无效的数字

{ "foo": 0xFF }

在JSON中，只能使用十进制文字

-

对象 Objects

+

对象 Objects

{
   "color": "Purple",
   "id": "210",
@@ -181,11 +181,11 @@
 }

用逗号分隔的多个键/值对

-

数组 Arrays

+

数组 Arrays

[1, 2, 3, 4, 5]

以 [ 开始并以 ] 结束

-

对象数组

+

对象数组

{
   "children": [
     { "name": "Jimmy Smith", "age": 15 },
@@ -193,14 +193,14 @@
   ]
 }
-

数组对象

+

数组对象

{
   "attributes": ["a1", "a2"],
   "methods": ["getter", "setter"],
   "empty_array": []
 }
-

二维阵列

+

二维阵列

{
   "my_sequences": [
     [1, 2, 3],
@@ -210,7 +210,7 @@
   ]
 }
-

对象的对象

+

对象的对象

{
   "Mark McGwire": {
     "hr": 65,
@@ -222,7 +222,7 @@
   }
 }
-

嵌套

+

嵌套

{
   "Jack": {
     "id": 1,
@@ -235,8 +235,8 @@
   }
 }
-

在 JavaScript 中访问 JSON

-

访问对象

+

在 JavaScript 中访问 JSON

+

访问对象

let myObject = {
   "name": "Jason",
   "last": "Doe",
@@ -277,7 +277,7 @@
     
   
 
-

访问嵌套

+

访问嵌套

let myObject = {
     "ref": {
         "name": 0,
@@ -336,7 +336,7 @@
     
   
 
-

访问对象数组

+

访问对象数组

let myArray = [
   {
     "name": "Jason",
@@ -395,7 +395,7 @@
     
   
 
-

访问阵列

+

访问阵列

let myArray = [
   "Jason",
   "Doe",
@@ -428,12 +428,12 @@
     
   
 
-

另见

+

另见

-
© 2022 Kenny Wang, All rights reserved.
+
© 2022 Kenny Wang, All rights reserved.
diff --git a/docs/markdown.html b/docs/markdown.html index 04d4963e..3051c051 100644 --- a/docs/markdown.html +++ b/docs/markdown.html @@ -9,10 +9,10 @@ -

Markdown 备忘清单

+

Markdown 备忘清单

这是 Markdown 语法的快速参考备忘单。

-

Markdown 快速参考

-

标题 (atx 风格)

+

Markdown 快速参考

+

标题 (atx 风格)

# h1
 ## h2
 ### h3
@@ -20,21 +20,21 @@
 ##### h5
 ###### h6
-

标题 (setext 风格)

+

标题 (setext 风格)

Header 1
 ========
 
Header 2
 --------
-

块引用

+

块引用

> 这是一个
 > 块引用
 >
 > > 嵌套
 > > 块引用
-

无序列表

+

无序列表

* Item 1
 * Item 2
     * item 3a
@@ -52,13 +52,13 @@
 
- [ ] Checkbox off
 - [x] Checkbox on
 

-

有序列表

+

有序列表

1. Item 1
 2. Item 2
     a. item 3a
     b. item 3b
-

链接

+

链接

[link](http://google.com)
 
[link][google]
@@ -66,7 +66,7 @@
 
<http://google.com>
-

强调

+

强调

*斜体*
 _斜体_
@@ -76,7 +76,7 @@ 
`内联代码`
 ~~删除~~
-

水平线

+

水平线

连字符

---
@@ -86,7 +86,7 @@

下划线

___
-

代码

+

代码

```javascript
 console.log("This is a block code")
 ```
@@ -97,10 +97,10 @@
 
    4 空格缩进做一个代码块
-

内联代码

+

内联代码

`Inline code` 周围有反引号
-

表格

+

表格

|     左栏     |     中间栏     |     右栏     |
 |:------------|:-------------:|-------------:|
 | 单元格 1     |   居中         |        $1600 |
@@ -113,22 +113,22 @@
   单元格 2   |   单元格 3     |     $12

Markdown 表格生成器：tableconvert.com

-

图片

+

图片

![GitHub Logo](/images/logo.png)
 
 ![Alt Text](url)
-

带链接的图片

+

带链接的图片

[![GitHub Logo](/images/logo.png)](https://github.com/)
 
 [![Alt Text](image_url)](link_url)
-

参考风格

+

参考风格

![alt text][logo]
 
 [logo]: /images/logo.png "Logo Title"
-

反斜杠转义

+

反斜杠转义

@@ -201,5 +201,5 @@
-
© 2022 Kenny Wang, All rights reserved.
+
© 2022 Kenny Wang, All rights reserved.
diff --git a/docs/npm.html b/docs/npm.html index 414b9adc..a3901728 100644 --- a/docs/npm.html +++ b/docs/npm.html @@ -9,10 +9,10 @@ -

npm 备忘清单

+

npm 备忘清单

这个 npm 快速参考备忘单显示了它的常用命令使用清单。

-

常用命令

-

包管理

+

常用命令

+

包管理

@@ -48,7 +48,7 @@

--save 是 npm@5 的默认值。 以前，使用不带 --save 的 npm install 不会更新 package.json。

-

安装名称

+

安装名称

@@ -107,7 +107,7 @@
-

清单

+

清单

@@ -134,7 +134,7 @@
-

更新

+

更新

@@ -161,7 +161,7 @@
-

杂项功能

+

杂项功能

将某人添加为所有者

npm owner add USERNAME PACKAGENAME
@@ -178,5 +178,5 @@ 
npm outdated [PACKAGE]
-
© 2022 Kenny Wang, All rights reserved.
+
© 2022 Kenny Wang, All rights reserved.
diff --git a/docs/package.json.html b/docs/package.json.html new file mode 100644 index 00000000..70d333c9 --- /dev/null +++ b/docs/package.json.html @@ -0,0 +1,406 @@ + + + + +package.json 备忘清单 + & package.json cheatsheet & Quick Reference + + + + + +

package.json 备忘清单

+

这个快速参考备忘清单，显示了关于 package.json 文件中所需内容的全部内容。

+

重要字段

+

介绍

+

本快速参考备忘清单是您需要了解的关于 package.json 文件中所需内容的全部内容。 它必须是实际的 JSON，而不仅仅是 JavaScript 对象字面量。

+ +

name

+
{
+  "name": "my-awesome-package"
+}
+
+

规则

+
    +
  • 必须小于或等于214个字符(包括 @scope/ 范围包)
    • +
  • 不能以点（.）或下划线（_）开头
    • +
  • 名称中不得包含大写字母
    • +
  • 必须仅使用URL安全字符
    • +
+

version

+
{
+  "version": "1.0.0"
+}
+
+

包的当前版本，严格遵循 Semantic Versioning 2.0.0 语义化版本规范。

+

Tips

+
    +
  • 不要使用和 Node.js 核心模块相同的名字。
    • +
  • 不要在名字里包含 js 或者 node 单词。
    • +
  • 短小精悍，让人看到名字就大概了解包的功能，记住它也会被用在 require() 调用里。
    • +
  • 保证名字在 npm registry 里是唯一的。
    • +
  • name 和 version 字段一起用于创建唯一ID
    • +
+

如果没有 name 和version 字段，您的包将无法安装

+

安装 name 包

+
yarn add [包名]
+# or
+npm install [包名]
+
+

安装后存放位置

+
node_modules/[包名]
+
+

npmjs 下载地址

+
https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
+
+

这是您的 包 的名称。 它在URL中使用，作为参数命令行，以及 node_modules 中的目录名。

+

信息类字段

+

description

+
{
+  "description": "我的包的概要简短描述"
+}
+
+

帮助使用者了解包的功能的字符串，包管理器也会把这个字符串作为搜索关键词。

+

license

+

所有包都应该指定许可证，以便让用户了解他们是在什么授权下使用此包，以及此包还有哪些附加限制。

+
{
+  "license": "MIT",
+  "license": "(MIT or GPL-3.0)",
+  "license": "SEE LICENSE IN LICENSE_FILENAME.txt",
+  "license": "UNLICENSED"
+}
+
+

鼓励使用开源 (OSI-approved) 许可证，除非你有特别的原因不用它。 如果你开发的包是你工作的一部分，最好和公司讨论后再做决定。

+

license字段必须是以下之一:

+
    +
  • 如果你使用标准的许可证，需要一个有效地 SPDX 许可证标识。
    • +
  • 如果你用多种标准许可证，需要有效的 SPDX 许可证表达式2.0语法表达式。
    • +
  • 如果你使用非标准的许可证，一个 SEE LICENSE IN <文件名> 字符串指向你的包里顶级目录的一个 <文件名>。
    • +
  • 如果你不想在任何条款下授权其他人使用你的私有或未公开的包，一个 UNLICENSED 字符串。
    • +
+

keywords

+
{
+  "keywords": [
+    "short", "relevant", "keywords"
+  ]
+}
+
+

一个字符串数组，当在包管理器里搜索包时很有用。

+

链接类字段

+

各种指向项目文档、issues 上报，以及代码托管网站的链接字段。

+

homepage

+
{
+  "homepage": "https://your-package.org"
+}
+
+

是包的项目主页或者文档首页。

+

repository

+
{
+  "repository": {
+    "type": "git", "url": "https://github.com/user/repo.git"
+  },
+  "repository": "github:user/repo",
+  "repository": "gitlab:user/repo",
+  "repository": "bitbucket:user/repo",
+  "repository": "gist:a1b2c3d4e5f"
+}
+
+

包的实际代码所在的位置。

+

bugs

+
{
+  "bugs": "https://github.com/user/repo/issues"
+}
+
+

问题反馈系统的 URL，或者是 email 地址之类的链接。用户通过该途径向你反馈问题。

+

项目维护类字段

+

author

+

项目的维护者。

+
{
+  "author": {
+    "name": "Your Name",
+    "email": "you@xxx.com",
+    "url": "http://your-x.com"
+  },
+  "author": "Your Name <you@xxx.com> (http://your-x.com)"
+}
+
+

作者信息，一个人。

+

contributors

+
{
+  "contributors": [
+    { "name": "Your Friend", "email": "friend@xxx.com", "url": "http://friends-xx.com" }
+    { "name": "Other Friend", "email": "other@xxx.com", "url": "http://other-xx.com" }
+  ],
+  "contributors": [
+    "Your Friend <friend@xxx.com> (http://friends-xx.com)",
+    "Other Friend <other@xxx.com> (http://other-xx.com)"
+  ]
+}
+
+

贡献者信息，可能很多人。

+

文件类信息

+

指定包含在项目中的文件，以及项目的入口文件。

+

files

+
{
+  "files": [
+    "filename.js",
+    "directory/",
+    "glob/*.{js,json}"
+  ]
+}
+
+

项目包含的文件，可以是单独的文件、整个文件夹，或者通配符匹配到的文件。

+

main

+
{
+  "main": "filename.js"
+}
+
+

项目的入口文件。

+

man

+
{
+  "man": "./man/doc.1",
+  "man": ["./man/doc.1", "./man/doc.2"]
+}
+
+

项目的入口文件。

+

directories

+
{
+  "directories": {
+    "lib": "path/to/lib/",
+    "bin": "path/to/bin/",
+    "man": "path/to/man/",
+    "doc": "path/to/doc/",
+    "example": "path/to/example/"
+  }
+}
+
+

当你的包安装时，你可以指定确切的位置来放二进制文件、man pages、文档、例子等。

+

bin

+
{
+  "bin": "bin.js",
+  "bin": {
+    "命令名称": "bin/命令路径/命令名称.js",
+    "other-command": "bin/other-command"
+  }
+}
+
+

随着项目一起被安装的可执行文件。

+

types

+

这是一个只在 TypeScript 中生效的字段，如果您的包有一个 main.js 文件，您还需要在 package.json 文件中指明主声明文件。 将 types 属性设置为指向 bundled 的声明文件。 例如：

+
{
+  "types": "./lib/main.d.ts",
+}
+
+

如果您的主声明文件名为 index.d.ts 并且位于包的根目录（index.js旁边），则不需要标记 types 属性，建议这样做。

+

打包包字段

+

esnext

+

完整的提案在这里。 简短说明：

+
    +
  • esnext：ES模块中使用阶段4功能（或更旧版本）的源代码，未编译。
    • +
  • main：指向一个CommonJS模块（或UMD模块），其 JavaScript 与 Node.js 当前可以处理的一样现代。
    • +
  • 大多数 module 用例应该可以通过 esnext 处理。
    • +
  • browser 可以通过 esnext 的扩展版本来处理
    • +
+
{
+  "main": "main.js",
+  "esnext": {
+    "main": "main-esnext.js",
+    "browser": "browser-specific-main-esnext.js"
+  }
+}
+
+

另请参阅：通过 npm 交付未编译的源代码

+

module

+

pkg.module 将指向具有 ES2015 模块语法的模块，但仅指向目标环境支持的语法功能。 完整的描述在这里。

+
{
+  "module": "dist/my-package.esm.js"
+}
+
+

支持：rollup, webpack

+

browser

+
"browser": {
+    "module-a": "./shims/module-a.js",
+    "./server/only.js": "./shims/client-only.js"
+}
+
+

字段由模块作者提供，作为 JavaScript 包或组件工具的提示，用于打包模块以供客户端使用。 提案就在这里。

+

任务类字段

+

包里还可以包含一些可执行脚本或者其他配置信息。

+

scripts

+
{
+  "scripts": {
+    "build-project": "node build-project.js"
+  }
+}
+
+

脚本是定义自动化开发相关任务的好方法，比如使用一些简单的构建过程或开发工具。 在 scripts 字段里定义的脚本，可以通过 yarn run <script> 命令来执行。 例如，上述 build-project 脚本可以通过 yarn run build-project 调用，并执行 node build-project.js。

+

有一些特殊的脚本名称。 如果定义了 preinstall 脚本，它会在包安装前被调用。 出于兼容性考虑，install、postinstall 和 prepublish 脚本会在包完成安装后被调用。

+

start 脚本的默认值为 node server.js。

+

参考文档：npm docs

+

特定的 scripts

+

对于以下脚本，npm 支持 package.json 文件的 scripts 默认命令字段：

+
    +
  • prepublish: 在打包并发布包之前运行，以及在没有任何参数的本地 npm 安装之前运行。 （见下文）
    • +
  • prepare: 在打包和发布包之前运行，在没有任何参数的本地 npm install 上运行，以及安装 git 依赖项时（见下文）。 这是在 preublish 之后运行，但是在 preublishOnly 之前运行。
    • +
  • prepublishOnly: 在包准备和打包之前运行，仅限于npm发布。 （见下文。）
    • +
  • prepack: 在打包 tarball 之前运行（在 npm pack，npm publish，以及安装 git 依赖项时）
    • +
  • postpack: 在生成 tarball 之后运行并移动到其最终目标。
    • +
  • publish, postpublish: 在包发布后运行。
    • +
  • preinstall: 在安装软件包之前运行。
    • +
  • install, postinstall: 安装包后运行。
    • +
  • preuninstall, uninstall: 在卸载软件包之前运行。
    • +
  • postuninstall: 在卸载软件包之后运行。
    • +
  • preversion: 在改变包版本之前运行。
    • +
  • version: 改变包版本后运行，但提交之前。
    • +
  • postversion: 改变包版本后运行，然后提交。
    • +
  • pretest, test, posttest: 由 npm test 命令运行。
    • +
  • prestop, stop, poststop: 由 npm stop 命令运行。
    • +
  • prestart, start, poststart: 由 npm start 命令运行。
    • +
  • prerestart, restart, postrestart: 由 npm restart 命令运行。 注意：如果没有提供重启脚本，npm restart 将运行 stop 和start 脚本。
    • +
  • preshrinkwrap, shrinkwrap, postshrinkwrap: 由 npm shrinkwrap 命令运行。
    • +
+

参考文档：npm docs.

+

config

+
{
+  "config": {
+    "port": "8080"
+  }
+}
+
+

配置你的脚本的选项或参数。

+

依赖描述类字段

+

你的包很可能依赖其他包。你可以在你的 package.json 文件里指定那些依赖。

+

dependencies

+

这些是你的包的开发版和发布版都需要的依赖。

+
{
+  "dependencies": {
+    "package-1": "^3.1.4",
+    "package-2": "file:./path/to/dir"
+  }
+}
+
+
+

你可以指定一个确切的版本、一个最小的版本 (比如 >=) 或者一个版本范围 (比如 >= ... <)。
包也可以指向本地的一个目录文件夹。

+
+

devDependencies

+

这些是只在你的包开发期间需要，但是生产环境不会被安装的包。

+
{
+  "devDependencies": {
+    "package-2": "^0.4.2"
+  }
+}
+
+

peerDependencies

+

平行依赖允许你说明你的包和其他包版本的兼容性。

+
{
+  "peerDependencies": {
+    "package-3": "^2.7.18"
+  }
+}
+
+

peerDependenciesMeta

+
{
+  "peerDependenciesMeta": {
+    "node-sass": {
+      "optional": true
+    },
+    "sass": {
+      "optional": true
+    },
+    "fibers": {
+      "optional": true
+    }
+  }
+}
+
+

添加可选设置以消除丢失的对等依赖性警告，#6671 。

+

optionalDependencies

+
{
+  "optionalDependencies": {
+    "package-5": "^1.6.1"
+  }
+}
+
+

可选依赖可以用于你的包，但不是必需的。如果可选包没有找到，安装还可以继续。

+

bundledDependencies

+
{
+  "bundledDependencies": [
+    "package-4"
+  ]
+}
+
+

打包依赖是发布你的包时将会一起打包的一个包名数组。

+

系统

+

你可以提供和你的包关联的系统级的信息，比如操作系统兼容性之类。

+

engines

+

指定使用你的包客户必须使用的版本，这将检查 process.versions 以及当前 yarn 版本。

+
{
+  "engines": {
+    "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0",
+    "node": ">=4.4.7 <7.0.0",
+    "zlib": "^1.2.8",
+    "yarn": "^0.14.0"
+  }
+}
+
+

此检查遵守正常的 semver 规则，但有一个例外。 它允许预发布版本匹配未明确指定预发布的 semver。 例如，1.4.0-rc.0 匹配 >=1.3.0，但它与典型的 semver 检查不匹配。

+

os

+
{
+  "os": ["darwin", "linux"],
+  "os": ["!win32"]
+}
+
+

此选项指定你的包的操作系统兼容性，它会检查 process.platform。

+

cpu

+
{
+  "cpu": ["x64", "ia32"],
+  "cpu": ["!arm", "!mips"]
+}
+
+

使用这个选项指定你的包将只能在某些 CPU 体系架构上运行，这会检查 process.arch。

+

发布

+

private

+
{
+  "private": true
+}
+
+

如果你不想你的包发布到包管理器(npm 或者 私有包管理)，设置为 true。

+

publishConfig

+

这些配置值将在你的包发布时使用。比如，你可以给包打标签。

+
{
+  "publishConfig": {
+    "registry": "https://registry.npm.taobao.org"
+  }
+}
+
+

这是一组将在发布时使用的配置值。 如果要设置标记，注册表或访问权限，则特别方便，以便确保给定的包未标记为 latest，发布到全局公共 registry 或默认情况下，作用域模块(@scoped)是私有的。

+

可以覆盖任何配置值，但只有 tag，registry 和 access 可能对于发布而言很重要，npm-config。

+

Yarn

+

flat

+

如果你的包只允许给定依赖的一个版本，你想强制和命令行上 yarn install --flat 相同的行为，把这个值设为 true。

+
{
+  "flat": true
+}
+
+

请注意，如果你的 package.json 包含 "flat": true 并且其它包依赖你的包 (比如你在构建一个库，而不是应用)， 其它那些包也需要在它们的 package.json 加上 "flat": true，或者在命令行上用 yarn install --flat 安装。

+

resolutions

+
{
+  "resolutions": {
+    "transitive-package-1": "0.0.29",
+    "transitive-package-2": "file:./local-forks/transitive-package-2",
+    "dependencies-package-1/transitive-package-3": "^2.1.1"
+  }
+}
+
+

允许您覆盖特定嵌套依赖项的版本。 有关完整规范，请参见选择性版本解析 RFC。

+

注意，yarn install --flat 命令将会自动在 package.json 文件里加入 resolutions 字段。

+

另见

+ + +
© 2022 Kenny Wang, All rights reserved.
+ diff --git a/docs/sketch.html b/docs/sketch.html index c0b7655c..53eb58a3 100644 --- a/docs/sketch.html +++ b/docs/sketch.html @@ -9,10 +9,10 @@ -

Sketch 备忘清单

+

Sketch 备忘清单

这个 Sketch 快速参考备忘单显示了它的键盘快捷键和命令。

-

快捷键

-

插入

+

快捷键

+

插入

@@ -63,7 +63,7 @@
-

类型

+

类型

@@ -126,7 +126,7 @@
-

画布视图

+

画布视图

@@ -197,7 +197,7 @@
-

窗口

+

窗口

@@ -236,7 +236,7 @@
-

编辑形状

+

编辑形状

@@ -283,7 +283,7 @@
-

编辑图层

+

编辑图层

@@ -334,7 +334,7 @@
-

排列图层、组和画板

+

排列图层、组和画板

@@ -405,10 +405,10 @@
-

另见

+

另见

-
© 2022 Kenny Wang, All rights reserved.
+
© 2022 Kenny Wang, All rights reserved.
diff --git a/docs/toml.html b/docs/toml.html index ac57ecae..21ec9417 100644 --- a/docs/toml.html +++ b/docs/toml.html @@ -9,16 +9,16 @@ -

TOML 备忘清单

+

TOML 备忘清单

这是 TOML 格式配置文件语法的快速参考备忘单。

-

入门

-

介绍

+

入门

+

介绍

TOML 是一种最小的配置文件格式，由于明显的语义而易于阅读。

-

示例

+

示例

bool = true
 date = 2006-05-27T07:32:00Z
 string = "hello"
@@ -26,30 +26,30 @@
 float = 3.14
 scientificNotation = 1e+12
-

注释

+

注释

# A single line comment example
 # block level comment example
 # 注释行 1
 # 注释行 2
 # 注释行 3
-

整数

+

整数

int1 = +42
 int2 = 0
 int3 = -21
 integerRange = 64
-

浮点数

+

浮点数

float2 = 3.1415
 float4 = 5e+22
 float7 = 6.626e-34
-

布尔值

+

布尔值

bool1 = true
 bool2 = false
 boolMustBeLowercase = true
-

时间日期

+

时间日期

date1 = 1989-05-27T07:32:00Z
 date2 = 1989-05-26T15:32:00-07:00
 date3 = 1989-05-27T07:32:00
@@ -57,24 +57,24 @@
 time1 = 07:32:00
 time2 = 00:32:00.999999
-

字符串

+

字符串

str1 = "I'm a string."
 str2 = "You can \"quote\" me."
 str3 = "Name\tJos\u00E9\nLoc\tSF."

See: Strings

-

Table

+

Table

[owner]
 name = "Tom Preston-Werner"
 dob = 1979-05-27T07:32:00-08:00

See: Tables

-

数组

+

数组

array1 = [1, 2, 3]
 array2 = ["Commas", "are", "delimiter"]
 array3 = [8001, 8001, 8002]
-

友好数组

+

友好数组

array1 = [ "Don't mix", "different", "types" ]
 array2 = [ [ 1.2, 2.4 ], ["all", 'strings', """are the same""", '''type'''] ]
 array3 = [
@@ -82,22 +82,22 @@
   "ignored"
 ]
-

TOML 字符串

-

多行字符串

+

TOML 字符串

+

多行字符串

multiLineString = """
 Multi-line basic strings are surrounded
 by three quotation marks on each side
 and allow newlines. 
 """
-

文字字符串

+

文字字符串

path = 'C:\Users\nodejs\templates'
 path2 = '\\User\admin$\system32'
 quoted = 'Tom "Dubs" Preston-Werner'
 regex = '<\i\c*\s*>'

用单引号括起来。不允许转义。

-

多行文字字符串

+

多行文字字符串

re = '''\d{2} apps is t[wo]o many'''
 lines = '''
 The first newline is
@@ -106,20 +106,20 @@
 is preserved.
 '''
-

TOML Tables

-

基本的

+

TOML Tables

+

基本的

[name]
 foo = 1
 bar = 2

foo 和 bar 是名为name 的表中的键

-

嵌套

+

嵌套

[table1]
 	foo = "bar"
 [table1.nested_table]
 	baz = "bat"
-

类数组

+

类数组

[[comments]]
 author = "Nate"
 text = "Great Article!"
@@ -127,7 +127,7 @@
 author = "Anonymous"
 text = "Love it!"
-

↓ 等效的 JSON

+

↓ 等效的 JSON

{
 	"comments" : [
 		{
@@ -141,11 +141,11 @@
 	]
 }
-

点分隔

+

点分隔

[dog."tater.man"]
 type = "pug"
-

↓ 等效的 JSON

+

↓ 等效的 JSON

{
   "dog": {
     "tater.man": {
@@ -154,11 +154,11 @@
   }
 }
-

多嵌套

+

多嵌套

[foo.bar.baz]
 bat = "hi"
-

↓ 等效的 JSON

+

↓ 等效的 JSON

{
 	"foo" : {
 		"bar" : {
@@ -169,17 +169,17 @@
 	}
 }
-

忽略空格

+

忽略空格

[a.b.c]          # this is best practice
 [ d.e.f ]        # same as [d.e.f]
 [ g .  h  .i ]   # same as [g.h.i]
 [ j . "ʞ" .'l' ] # same as [j."ʞ".'l']
-

Inline Table

+

Inline Table

name = { first = "Tom", last = "Preston-Werner" }
 point = { x = 1, y = 2 }
 animal = { type.name = "pug" }
-
© 2022 Kenny Wang, All rights reserved.
+
© 2022 Kenny Wang, All rights reserved.
diff --git a/docs/typescript.html b/docs/typescript.html index deb5ba9c..685345f1 100644 --- a/docs/typescript.html +++ b/docs/typescript.html @@ -9,29 +9,29 @@ -

TypeScript 备忘清单

+

TypeScript 备忘清单

包含最重要基础、泛型、方法、class 等 TypeScript 强类型编程语言语法的快速参考备忘单。初学者的完整快速参考。

-

入门 Interface

-

介绍

+

入门 Interface

+

介绍

TypeScript 是具有类型语法的 JavaScript。Interface 是为了匹配它们的运行时行为而构建的。

-

内置类型基元

+

内置类型基元

any, void,
 boolean, string, number,
 undefined, null,
 unknown, never,
 bigint, symbol
-

常见的内置 JS 对象

+

常见的内置 JS 对象

Date, Error,
 Array, Map, Set,
 Regexp, Promise
-

内置

-

类型字面量

+

内置

+

类型字面量

Object:

{ field: string }
@@ -44,10 +44,10 @@

Tuple:

[string, number]
-

避免

+

避免

Object, String, Number, Boolean
-

通用语法

+

通用语法

/** 可选择从现有接口或类型(Response, HTTPAble)中获取属性 */
 interface JSONResponse extends Response, HTTPAble {
   version: number;
@@ -69,13 +69,13 @@
   readonly body: string;
 }
-

泛型

+

泛型

声明一个可以在你的 Interface 中改变的类型

interface APICall<Response> {
   data: Response
 }
-

用法

+

用法

const api: APICall<ArtworkCall> = ...
 
 api.data  // Artwork
@@ -89,21 +89,21 @@
 
 api.data.status
-

重载

+

重载

interface Expect {
   (matcher: boolean): string
   (matcher: string): boolean;
 }

一个可调用 Interface 可以对不同的参数集有多个定义。

-

类一致性

+

类一致性

interface Syncable {
   sync(): void
 }
 class Account implements Syncable { ... }

您可以通过实现确保类 class 符合 Interface。

-

Get & Set

+

Get & Set

对象可以有自定义的 getter 或 setter。

interface Ruler {
   get size(): number
@@ -115,7 +115,7 @@
 r.size = 12
 r.size = "36"
-

通过合并扩展

+

通过合并扩展

interface APICall {
   data: Response
 }
@@ -125,54 +125,54 @@
 }

Interface 被合并，多个声明将向类型定义添加新字段。

-

Type

-

Type vs Interface

+

Type

+

Type vs Interface

  • Interface 只能描述对象形状
  • Interface 可以通过多次声明来扩展
  • 在性能关键 Type 中，Interface 比较检查可以更快。
-

把类型想象成变量

+

把类型想象成变量

就像您如何在不同范围内创建具有相同名称的变量一样，type 具有相似的语义。

-

使用实用程序类型构建

+

使用实用程序类型构建

TypeScript 包含许多全局类型，它们将帮助您在类型系统中完成常见任务。检查他们的网站。

-

原始类型

+

原始类型

type SanitizedInput = string;
 type MissingNo = 404;

主要用于文档

-

对象字面类型

+

对象字面类型

type Location = {
   x: number;
   y: number;
 };
-

联合类型

+

联合类型

type Size = "small" | "medium" | "large"

描述许多选项中的一个类型，例如已知字符串的列表。

-

交叉口类型

+

交叉口类型

type Location = { x: number }
               & { y: number }
 // { x: number, y: number }

一种合并/扩展类型的方法

-

从值类型

+

从值类型

const data = { ... }
 type Data = typeof data

通过 typeof 运算符重用来自现有 JavaScript 运行时值的类型。

-

从函数返回类型

+

从函数返回类型

const createFixtures = () => { ... }
 type Fixtures = ReturnType<typeof createFixtures>
 function test(fixture: Fixtures) {}

将函数的返回值重新用作类型。

-

从模块类型

+

从模块类型

const data: import("./data").data

这些功能非常适合构建库、描述现有的 JavaScript 代码，您可能会发现在大多数 TypeScript 应用程序中很少使用它们。

-

对象字面量语法

+

对象字面量语法

type JSONResponse = {
   version: number;                        // 字段
   /** In bytes */                         // 附加文档
@@ -187,7 +187,7 @@
 }

用于节省空间的 Terser，请参阅 Interface 备忘清单了解更多信息，除了“static”匹配之外的所有内容。

-

映射类型

+

映射类型

type Artist = {
   name: string, bio: string
 }
@@ -201,7 +201,7 @@
 //    void, bio: (nv: string) => void }

类似于类型系统的映射语句，允许输入类型更改新类型的结构。

-

模板联合类型

+

模板联合类型

type SupportedLangs =  "en" | "pt" | "zh";
 type FooterLocaleIDs = "header" | "footer";
 type AllLocaleIDs = `${SupportedLangs}_${FooterLocaleIDs}_id`;
@@ -210,16 +210,16 @@
 //         | "pt_header_id" | "pt_footer_id"
 //         | "zh_header_id" | "zh_footer_id"
-

条件类型

+

条件类型

type HasFourLegs<Animal> = Animal extends { legs: 4 } ? Animal : never
 type Animals = Bird | Dog | Ant | Wolf;
 type FourLegs = HasFourLegs<Animals>
 // Dog | Wolf

在类型系统中充当“if 语句”。 通过泛型创建，然后通常用于减少类型联合中的选项数量。

-

控制流动分析

-

If 声明

-

typeof（用于原语）

+

控制流动分析

+

If 声明

+

typeof（用于原语）

const input = getUserInput()
 input // string | number
 
@@ -227,7 +227,7 @@
  input // string
 }
-

对象中的“property”（对于对象）

+

对象中的“property”（对于对象）

const input = getUserInput()
 input  // string | { error: ... }
 
@@ -235,7 +235,7 @@
   input // { error: ... }
 }
-

instanceof（用于类）

+

instanceof（用于类）

const input = getUserInput()
   input // number | number[]
 
@@ -243,7 +243,7 @@
   input // number[]
 }
-

类型保护功能（适用于任何东西）

+

类型保护功能（适用于任何东西）

const input = getUserInput()
    input // number | number[]
 
@@ -251,7 +251,7 @@
   input // number[]
 }
-

任务

+

任务

const data1 = {
   name: "Zagreus"
 }
@@ -282,10 +282,10 @@
 data = "Hello"
 data // string
-

关键点

+

关键点

CFA 几乎总是采用联合，并根据代码中的逻辑减少联合内的类型数量。

大多数时候 CFA 在自然 JavaScript 布尔逻辑中工作，但是有一些方法可以定义您自己的函数，这些函数会影响 TypeScript 如何缩小类型。

-

表达式

+

表达式

const input = getUserInput()
 input // string | number
 const inputLength =
@@ -294,13 +294,13 @@
    // input: string

在进行布尔运算时，缩窄也发生在与代码相同的行上

-

可识别联合

+

可识别联合

type Responses =
   | { status: 200, data: any }
   | { status: 301, to: string }
   | { status: 400, error: Error }
-

用法

+

用法

const response = getResponse()
 response // Responses
 switch(response.status) {
@@ -309,7 +309,7 @@
   case 400: return response.error
 }
-

断言函数

+

断言函数

描述影响当前范围的 CFA 更改的函数，因为它抛出而不是返回 false。

function assertResponse(obj: any):
     asserts obj is SuccessResponse {
@@ -318,7 +318,7 @@
   }
 }
-

用法

+

用法

const res = getResponse():
 res // SuccessResponse | ErrorResponse
 
@@ -327,7 +327,7 @@
 
 res // SuccessResponse
-

in 操作符

+

in 操作符

interface A {
   x: number;
 }
@@ -344,13 +344,13 @@
 }

操作符可以安全的检查一个对象上是否存在一个属性，它通常也被作为类型保护使用

-

Class

-

创建类实例

+

Class

+

创建类实例

class ABC { ... }
 const abc = new ABC()

新 ABC 的参数来自构造函数。

-

private x 与 #private

+

private x 与 #private

前缀 private 是一个仅类型的添加，在运行时没有任何影响。 在以下情况下，类之外的代码可以进入项目：

class Bag {
   private item: any
@@ -359,17 +359,17 @@
 
Vs #private 是运行时私有的，并且在 JavaScript 引擎内部强制执行，它只能在类内部访问：

 
class Bag { #item: any }
 

-

Class 上的 “this”

+

Class 上的 “this”

函数内部‘this’的值取决于函数的调用方式。 不能保证始终是您可能在其他语言中使用的类实例。

您可以使用“此参数”、使用绑定功能或箭头功能来解决问题。

-

类型和值

+

类型和值

一个类既可以用作类型也可以用作值。

const a:Bag = new Bag()

所以，小心不要这样做：

class C implements Bag {}
-

通用语法

+

通用语法

// 确保类符合一组接口或类型  ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈▶┈┈╮
 // 子类这个类 ┈┈┈┈┈┈┈┈↘                 ┈┈┈┈┈┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┈
 class User extends Account implements Updatable, Serializable {
@@ -407,7 +407,7 @@
   static { this.#userCount = -1 }
 }
-

泛型

+

泛型

声明一个可以在你的类方法中改变的类型。

class Box<Type> {
   contents: Type
@@ -418,7 +418,7 @@
 const stringBox = new Box("a package")

这些功能是 TypeScript 特定的语言扩展，可能永远无法使用当前语法进入 JavaScript。

-

参数属性

+

参数属性

class Location {
   constructor(public x: number, public y: number) {}
 }
@@ -428,7 +428,7 @@
 loc.y // 40

TypeScript 特定于类的扩展，可自动将实例字段设置为输入参数。

-

抽象类

+

抽象类

abstract class Animal {
   abstract getName(): string;
   printName() {
@@ -438,7 +438,7 @@
 class Dog extends Animal { getName(): { ... } }

一个类可以被声明为不可实现，但可以在类型系统中被子类化。 class 成员也可以。

-

装饰器和属性

+

装饰器和属性

import { Syncable, triggersSync, preferCache, required } from "mylib"
 
 @Syncable
@@ -451,7 +451,7 @@
 }

您可以在类、类方法、访问器、属性和方法参数上使用装饰器。

-

索引签名

+

索引签名

class MyClass {
   // 最好将索引数据存储在另一个地方
   // 而不是类实例本身。
@@ -464,8 +464,8 @@
 }

类可以声明索引签名，与其他对象类型的索引签名相同。

-

实用程序类型

-

Awaited<Type>

+

实用程序类型

+

Awaited<Type>

type A = Awaited<Promise<string>>;
 // type A = string
 
@@ -476,7 +476,7 @@
 // type C = number | boolean

这种类型旨在模拟异步函数中的 await 或 Promises 上的 .then() 方法等操作 - 特别是它们递归解包 Promises 的方式。

-

Required<Type>

+

Required<Type>

interface Props {
   a?: number;
   b?: string;
@@ -488,7 +488,7 @@
 // 但在 'Required<Props>' 类型中是必需的。

使 Type 中的所有属性成为必需

-

Readonly<Type>

+

Readonly<Type>

interface Todo {
   title: string;
 }
@@ -502,7 +502,7 @@
             : Readonly<Type>;

将 Type 中的所有属性设为只读

-

Partial<Type>

+

Partial<Type>

interface Todo {
   title: string;
   description: string;
@@ -522,7 +522,7 @@
 });

将 Type 中的所有属性设为可选

-

Record<Keys, Type>

+

Record<Keys, Type>

interface CatInfo {
   age: number;
   breed: string;
@@ -538,7 +538,7 @@
 // 👉 const cats: Record<CatName, CatInfo>

构造一个具有一组 Keys 类型的属性 Type 的类型

-

Pick<Type, Keys>

+

Pick<Type, Keys>

interface Todo {
   name: string;
   description: string;
@@ -556,7 +556,7 @@
  // 👉 const todo: TodoPreview

从 Type 中选择一组其键在并集 Keys 中的属性

-

Exclude<UnionType, ExcludedMembers>

+

Exclude<UnionType, ExcludedMembers>

type T0 = Exclude<"a" | "b" | "c", "a">;
 // 👉 type T0 = "b" | "c"
 
@@ -568,7 +568,7 @@
 // 👉 type T2 = string | number

从 UnionType 中排除那些可分配给 ExcludedMembers 的类型

-

Extract<Type, Union>

+

Extract<Type, Union>

type T0 = Extract<
   "a" | "b" | "c", "a" | "f"
 >;
@@ -580,7 +580,7 @@
 // type T1 = () => void

通过从 Type 中提取所有可分配给 Union 的联合成员来构造一个类型。

-

NonNullable<Type>

+

NonNullable<Type>

type T0 = NonNullable<
   string | number | undefined
 >;
@@ -592,7 +592,7 @@
 // type T1 = string[]

通过从 Type 中排除 null 和 undefined 来构造一个类型。

-

Omit<Type, Keys>

+

Omit<Type, Keys>

interface Todo {
   name: string;
   completed: boolean;
@@ -610,7 +610,7 @@
  // 👉 const todo: TodoPreview

构造一个具有 Type 属性的类型，但类型 Keys 中的属性除外。

-

Parameters<Type>

+

Parameters<Type>

declare function f1(
   arg: { a: number; b: string }
 ): void;
@@ -632,7 +632,7 @@
 // type T5 = never

从函数类型 Type 的参数中使用的类型构造元组类型。

-

ConstructorParameters<Type>

+

ConstructorParameters<Type>

type T0 = ConstructorParameters<
   ErrorConstructor
 >;
@@ -652,8 +652,8 @@
 // type T3 = unknown[]

从构造函数类型的类型构造元组或数组类型。它产生一个包含所有参数类型的元组类型（如果 Type 不是函数，则类型 never ）。

-

内在字符串操作类型

-

Uppercase<StringType>

+

内在字符串操作类型

+

Uppercase<StringType>

type Greeting = "Hello, world"
 type ShoutyGreeting = Uppercase<Greeting>
 // type ShoutyGreeting = "HELLO, WORLD"
@@ -663,7 +663,7 @@
 // type MainID = "ID-MY_APP"

将字符串中的每个字符转换为大写版本。

-

Lowercase<StringType>

+

Lowercase<StringType>

type Greeting = "Hello, world"
 type QuietGreeting = Lowercase<Greeting>
 // type QuietGreeting = "hello, world"
@@ -673,19 +673,19 @@
 // type MainID = "id-my_app"

将字符串中的每个字符转换为等效的小写字母。

-

Capitalize<StringType>

+

Capitalize<StringType>

type LowercaseGreeting = "hello, world";
 type Greeting = Capitalize<LowercaseGreeting>;
 // type Greeting = "Hello, world"

将字符串中的第一个字符转换为等效的大写字母。

-

Uncapitalize<StringType>

+

Uncapitalize<StringType>

type UppercaseGreeting = "HELLO WORLD";
 type UncomfortableGreeting = Uncapitalize<UppercaseGreeting>;
 // type UncomfortableGreeting = "hELLO WORLD"

将字符串中的第一个字符转换为等效的小写字母。

-

ReturnType<Type>

+

ReturnType<Type>

declare function f1(): {
   a: number; b: string
 };
@@ -717,7 +717,7 @@
 // type T6 = never

构造一个由函数 Type 的返回类型组成的类型。

-

ThisType<Type>

+

ThisType<Type>

type ObjectDescriptor<D, M> = {
   data?: D;
   // 方法中“this”的类型是 D & M
@@ -747,7 +747,7 @@
 obj.moveBy(5, 5);

此实用程序不返回转换后的类型。 相反，它用作上下文 this 类型的标记。 请注意，必须启用 noImplicitThis 标志才能使用此实用程序。

-

InstanceType<Type>

+

InstanceType<Type>

class C {
   x = 0;
   y = 0;
@@ -760,7 +760,7 @@
 // type T2 = never

构造一个由 Type 中构造函数的实例类型组成的类型。

-

ThisParameterType<Type>

+

ThisParameterType<Type>

function toHex(this: Number) {
   return this.toString(16);
 }
@@ -772,7 +772,7 @@
 }

提取函数类型的 this 参数的类型，如果函数类型没有 this 参数，则为未知。

-

OmitThisParameter<Type>

+

OmitThisParameter<Type>

function toHex(this: Number) {
   return this.toString(16);
 }
@@ -783,8 +783,8 @@
 console.log(fiveToHex());

从 Type 中移除 this 参数。 如果 Type 没有显式声明此参数，则结果只是 Type。 否则，从 Type 创建一个不带此参数的新函数类型。 泛型被删除，只有最后一个重载签名被传播到新的函数类型中。

-

JSX

-

JSX 介绍

+

JSX

+

JSX 介绍

JSX 规范是对 ECMAScript 的类似 XML 的语法扩展。

  • 使用 .tsx 扩展名命名您的文件
    • @@ -792,21 +792,21 @@
  • 不允许在 .tsx 文件中使用尖括号类型断言。
  • JSX 规范
-

as 运算符

+

as 运算符

const foo = <foo>bar;
 // ❌ 不允许在 .tsx 👆 文件中使用尖括号类型断言。
 
 const foo = bar as foo;

as 运算符在 .ts 和 .tsx 文件中都可用，并且在行为上与尖括号类型断言样式相同。

-

基于值的元素

+

基于值的元素

import MyComponent from "./myComponent";
 
 <MyComponent />; // ok
 <SomeOtherComponent />; // ❌ error

基于值的元素只是由范围内的标识符查找。

-

内在的元素

+

内在的元素

declare namespace JSX {
   interface IntrinsicElements {
     foo: any;
@@ -822,7 +822,7 @@
   }
 }
-

函数组件

+

函数组件

interface FooProp {
   name: string;
   X: number;
@@ -838,7 +838,7 @@
 );

该组件被定义为一个 JavaScript 函数，其第一个参数是一个 props 对象。 TS 强制它的返回类型必须可分配给 JSX.Element。

-

函数组件重载

+

函数组件重载

interface CeProps {
   children: JSX.Element[] | JSX.Element;
 }
@@ -857,7 +857,7 @@
   // ...
 }
-

函数子组件

+

函数子组件

interface MenuProps extends React.LiHTMLAttributes<HTMLUListElement> { ... }
 const InternalMenu = (props: MenuProps, ref?: React.ForwardedRef<HTMLUListElement>) => (
   <ul {...props} ref={ref} />
@@ -876,7 +876,7 @@
 <Menu.Item />     // ✅ ok
 <Menu.SubMenu />  // ✅ ok
-

有效组件

+

有效组件

declare namespace JSX {
   interface ElementClass {
     render: any;
@@ -900,7 +900,7 @@
 <NotAValidFactoryFunction />; // ❌ error

默认情况下，JSX.ElementClass 是 {}，但可以对其进行扩展，以将 JSX 的使用限制为仅限于符合适当接口的类型。

-

类组件

+

类组件

type Props = {
   header: React.ReactNode;
   body: React.ReactNode;
@@ -919,7 +919,7 @@
 
 <MyComponent header={<h1>Header</h1>} body={<i>body</i>} />
-

泛型组件

+

泛型组件

// 一个泛型组件
 type SelectProps<T> = { items: T[] };
 class Select<T> extends React.Component<SelectProps<T>, any> {}
@@ -928,5 +928,5 @@
 const Form = () => <Select<string> items={['a', 'b']} />;
-
© 2022 Kenny Wang, All rights reserved.
+
© 2022 Kenny Wang, All rights reserved.
diff --git a/docs/vscode.html b/docs/vscode.html index 9256edca..76854edf 100644 --- a/docs/vscode.html +++ b/docs/vscode.html @@ -9,10 +9,10 @@ -

VSCode 备忘清单

+

VSCode 备忘清单

这个 VSCode (Visual Studio Code) 快速参考备忘单显示了它的键盘快捷键和命令。

-

Windows

-

一般的

+

Windows

+

一般的

@@ -47,7 +47,7 @@
-

基本编辑

+

基本编辑

@@ -158,7 +158,7 @@
-

导航

+

导航

@@ -209,7 +209,7 @@
-

搜索和替换

+

搜索和替换

@@ -248,7 +248,7 @@
-

多光标和选择

+

多光标和选择

@@ -307,7 +307,7 @@
-

丰富的语言编辑

+

丰富的语言编辑

@@ -366,7 +366,7 @@
-

编辑管理

+

编辑管理

@@ -405,7 +405,7 @@
-

文件管理

+

文件管理

@@ -472,7 +472,7 @@
-

展示

+

展示

@@ -543,7 +543,7 @@
-

调试

+

调试

@@ -607,5 +607,5 @@
-
© 2022 Kenny Wang, All rights reserved.
+
© 2022 Kenny Wang, All rights reserved.
diff --git a/index.html b/index.html index 7ff6835f..3c18157b 100644 --- a/index.html +++ b/index.html @@ -9,10 +9,10 @@ -

Quick Reference

+

Quick Reference

为开发人员分享快速参考备忘单(主要是方便自己)，在看到 Reference 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。

如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。

-

编程

+

编程

TOML TypeScript @@ -20,20 +20,21 @@ JSON Markdown

-

工具包

+

工具包

npm + package.json VSCode Sketch Jest

-

Linux 命令

+

Linux 命令

Cron Git

-

License

+

License

MIT © Kenny Wong

-
© 2022 Kenny Wang, All rights reserved.
+ diff --git a/style/style.css b/style/style.css index 0b30cbfd..82db4b62 100644 --- a/style/style.css +++ b/style/style.css @@ -45,18 +45,18 @@ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { padding: 0.75rem; } -body.home .h1warp-body, body.home .h1warp .warp-body { +body.home .h1wrap-body, body.home .h1wrap .wrap-body { max-width: 940px; margin-left: auto; margin-right: auto; padding: 0.75rem; } -body.home .h2warp > h2 { +body.home .h2wrap > h2 { display: inline-block; padding-right: 0.5rem; } -body.home .h2warp > h2::after { +body.home .h2wrap > h2::after { content: ' '; display: block; height: 3px; @@ -65,15 +65,15 @@ body.home .h2warp > h2::after { --bg-opacity: 1; background-color: rgb(30 41 59/var(--bg-opacity)); } -body.home .h1warp .warp-body p + p { +body.home .h1wrap .wrap-body p + p { margin-top: 1.6rem; } -body.home .h1warp .warp-body p { +body.home .h1wrap .wrap-body p { text-indent: 2rem; } -body.home .h1warp p { +body.home .h1wrap p { text-align: left; } @@ -150,29 +150,29 @@ body.home .h1warp p { gap: 0.3rem; } -.warp-header.h1warp { +.wrap-header.h1wrap { text-align: center; margin-top: 4.6rem; margin-bottom: 5rem; } -.warp-header.h1warp .warp-body { +.wrap-header.h1wrap .wrap-body { color: rgb(71 85 105/1); } -.warp-header.h1warp > h1 { +.wrap-header.h1wrap > h1 { font-size: 3rem; line-height: 1; margin-bottom: 3rem; } -.h1warp-body { +.h1wrap-body { display: flex; flex-direction: column; gap: 3rem; } -.warp-header.h2warp > h2 { +.wrap-header.h2wrap > h2 { margin: 0; padding: 0; margin-bottom: 24px; @@ -184,7 +184,14 @@ body.home .h1warp p { margin-top: 0; } -.warp-header.h3warp { +.wrap-header.h2wrap > :last-child { + margin-bottom: 24px; +} +.wrap-header.h2wrap .wrap-body { + color: rgb(148 163 184/1); +} + +.wrap-header.h3wrap { z-index: 0; display: flex; height: 100%; @@ -192,7 +199,7 @@ body.home .h1warp p { flex-direction: column; } -.warp-header.h3warp > h3 { +.wrap-header.h3wrap > h3 { color: rgb(226 232 240/1); position: absolute; right: 0px; @@ -209,7 +216,7 @@ body.home .h1warp p { letter-spacing: 0.05em; } -.warp-header.h3warp > .warp-body p, .warp-header.h4warp > .warp-body p { +.wrap-header.h3wrap > .wrap-body p, .wrap-header.h4wrap > .wrap-body p { margin: 0px; width: 100%; padding-left: 1rem; @@ -220,7 +227,7 @@ body.home .h1warp p { background-color: rgb(15 23 42/0.3); } -.warp-header.h3warp > .warp-body p:first-child:before { +.wrap-header.h3wrap > .wrap-body p:first-child:before { background-color: rgb(15 23 42/0.3); color: rgb(30 41 59/0); content: '-'; @@ -231,11 +238,11 @@ body.home .h1warp p { width: 100%; } -.warp-header.h3warp > .warp-body p:last-child { +.wrap-header.h3wrap > .wrap-body p:last-child { margin-top: auto; } -.warp-header.h3warp > .warp-body { +.wrap-header.h3wrap > .wrap-body { z-index: 0; display: flex; height: 100%; @@ -243,7 +250,7 @@ body.home .h1warp p { flex-direction: column; } -.h4warp > h4 { +.h4wrap > h4 { border-color: rgb(51 65 85/0.5); background-color: rgb(51 65 85/0.3); color: rgb(203 213 225/1); @@ -263,13 +270,13 @@ ol, ul, menu { padding: 0; } -.h4warp > .warp-body ul, -.h4warp > .warp-body ol, -.h4warp > .warp-body dl, +.h4wrap > .wrap-body ul, +.h4wrap > .wrap-body ol, +.h4wrap > .wrap-body dl, -.h3warp > .warp-body ul, -.h3warp > .warp-body ol, -.h3warp > .warp-body dl { +.h3wrap > .wrap-body ul, +.h3wrap > .wrap-body ol, +.h3wrap > .wrap-body dl { margin-top: 0.5rem; margin-bottom: 0.5rem; display: grid; @@ -277,16 +284,16 @@ ol, ul, menu { grid-template-columns: repeat(1,minmax(0,1fr)); } -.h2warp-body ul li, -.h2warp-body ol li, -.h2warp-body dl li { +.h2wrap-body ul li, +.h2wrap-body ol li, +.h2wrap-body dl li { padding: 9px; padding-left: 26px; position: relative; border-bottom: solid 1px rgb(51 65 85/0.5); } -.h2warp-body ul:not(.style-none)>li::before { +.h2wrap-body ul:not(.style-none)>li::before { content: ''; position: absolute; display: inline-block; @@ -298,25 +305,25 @@ ol, ul, menu { top: 18px; } -.h2warp-body ul li, -.h2warp-body ol li, -.h2warp-body dl li { +.h2wrap-body ul li, +.h2wrap-body ol li, +.h2wrap-body dl li { position: relative; } -.warp-body ul:last-child { +.wrap-body ul:last-child { margin-bottom: 0; } -.warp-body ul:last-child li:last-child { +.wrap-body ul:last-child li:last-child { border-bottom: 0; } -.h3warp hr { +.h3wrap hr { border-bottom: 1px solid #475060; } -.h2warp-body { +.h2wrap-body { display: grid; gap: 1.75rem; font-size: 0.925rem; @@ -325,7 +332,7 @@ ol, ul, menu { flex-direction: column; } -.h2warp-body > .warp { +.h2wrap-body > .wrap { background-color: #1e293b; color: rgb(203 213 225/1); position: relative; @@ -437,7 +444,7 @@ pre { .row-span-4 { grid-row: span 4/span 4; } -.wrap { +.wrap-text { white-space: pre-wrap !important; overflow-wrap: break-word !important; } @@ -604,7 +611,7 @@ pre { /* 代码高亮 End */ -.footer-warp { +.footer-wrap { margin-top: 3.5rem; color: rgb(100 116 139/1); background-color: rgb(30 41 59/1);