diff --git a/docs/cron.html b/docs/cron.html
index 8f679dce..8415f91c 100644
--- a/docs/cron.html
+++ b/docs/cron.html
@@ -15,10 +15,10 @@
Cron 最适合安排重复性任务。 可以使用关联的 at 实用程序来完成一次性任务的调度。
-Min Hour Day Mon Weekday
分钟 小时 天 月 周
@@ -68,7 +68,7 @@
-这是 Docker 的快速参考备忘单。 你可以在这里找到最常见的 Docker 命令。
-在后台创建和运行容器
$ docker run -d -p 80:80 docker/getting-started
@@ -38,7 +38,7 @@
--name my-nginx
- 指定名称nginx
- 要使用的镜像参数 <container>
可以是容器 id 或名称
docker create [options] IMAGE
-a, --attach # 附加标准输出/错误
-i, --interactive # 附加标准输入(交互式)
@@ -202,10 +202,10 @@
-v, --volume `pwd`:/app # mount(需要绝对路径)
-e, --env NAME=hello # 环境变量 env vars
-$ docker create --name my_redis --expose 6379 redis:3.0.2
-重命名容器
docker rename my-nginx nginx-server
@@ -215,8 +215,8 @@
更新容器
docker update --cpu-shares 512 -m 300M nginx-server
-$ docker build .
$ docker build github.com/creack/docker-firefox
$ docker build - < Dockerfile
@@ -272,8 +272,8 @@
$ docker build -f myOtherDockerfile .
$ curl example.com/remote/Dockerfile | docker build -f - .
-删除网络
docker network rm MyOverlayNetwork
@@ -292,7 +292,7 @@
断开容器与网络的连接
docker network disconnect MyOverlayNetwork nginx
-docker network create -d overlay MyOverlayNetwork
docker network create -d bridge MyBridgeNetwork
docker network create -d overlay \
@@ -307,8 +307,8 @@
--aux-address="my-nas=192.170.1.6" \
MyOverlayNetwork
-登录到注册表
$ docker login
$ docker login localhost:8080
@@ -356,7 +356,7 @@
$ docker push eon01/nginx
$ docker push eon01/nginx localhost:5000/myadmin/nginx
-
检查卷
$ docker volume ls
diff --git a/docs/dockerfile.html b/docs/dockerfile.html
index 41bcd0c7..88e7be39 100644
--- a/docs/dockerfile.html
+++ b/docs/dockerfile.html
@@ -15,10 +15,10 @@
这是 Dockerfile 的快速参考备忘单。包含用户可以在命令行上调用以组装镜像的所有命令。
-默认 Dockerfile
位于上下文的根目录中。
docker build -f /path/to/a/Dockerfile .
使用 -f
指向文件系统中任何位置的 Dockerfile
。
FROM [--platform=<platform>] <image> [AS <name>]
示例
FROM ruby:2.2.2
FROM golang:1.19-alpine3.16 AS build-env
-ENV <key>=<value> ...
ENV APP_HOME /myapp
@@ -42,7 +42,7 @@
ENV MY_NAME="John Doe" MY_DOG=Rex\ The\ Dog \
MY_CAT=fluffy
-
RUN bundle install
WORKDIR /myapp
@@ -53,15 +53,15 @@
ADD file.xyz /file.xyz
COPY host_file.xyz /path/container_file.xyz
-
ONBUILD RUN bundle install
# 与另一个文件一起使用时
-EXPOSE 5900
CMD ["bundle", "exec", "rails", "server"]
-ENV my_var
SHELL ["/bin/bash", "-euo", "pipefail", "-c"]
# With strict mode:
@@ -70,7 +70,7 @@
RUN true | false # 将脱离管道
使用 shell
将为 shell 命令打开严格模式。
ENTRYPOINT ["executable", "param1", "param2"]
ENTRYPOINT command param1 param2
@@ -78,7 +78,7 @@
ENTRYPOINT exec top -b
这将使用 shell 处理来替换 shell 变量,并将忽略任何 CMD
或 docker run
命令行参数。
LABEL version="1.0"
LABEL "com.example.vendor"="ACME Incorporated"
@@ -91,7 +91,7 @@
multi.label2="value2" \
other="value3"
-有些表情符号代码不太容易记住,所以这里有一个小备忘单。
-查找所有大于 10MB 的文件
$ find / -size +10M
@@ -174,7 +174,7 @@
$ find / -size +100M -size -1G
像往常一样,+
和 -
前缀表示大于和小于。
在当前目录中使用名称查找文件
$ find . -name tecmint.txt
@@ -193,7 +193,7 @@
查找目录下的所有php文件
$ find . -type f -name "*.php"
-查找权限为 777 的文件。
$ find . -type f -perm 0777 -print
@@ -212,7 +212,7 @@
查找可执行文件。
$ find / -perm /a=x
-根据用户查找单个文件
$ find / -user root -name tecmint.txt
@@ -225,22 +225,22 @@
查找用户的特定文件
$ find /home -user tecmint -iname "*.txt"
-$ find . -type f \( -name "*.sh" -o -name "*.txt" \)
查找带有 .sh
和 .txt
扩展名的文件
$ find /opt /usr /var -name foo.scala -type f
查找具有多个目录的文件
-$ find . -type d -empty
删除目录中的所有空文件
$ find . -type f -empty -delete
-查找最近 50 天修改的文件
$ find / -mtime 50
@@ -347,8 +347,8 @@
查找最近 1 小时内访问过的文件
$ find / -amin -60
-查找并删除多个文件
$ find . -type f -name "*.mp3" -exec rm -f {} \;
@@ -361,39 +361,39 @@
查找特定文件并删除
$ find / -type f -name *.mp3 -size +10m -exec rm {} \;
-$ find ./ -type f -exec sed -i 's/find/replace/g' {} \;
$ find ./ -type f -readable -writable -exec sed -i "s/old/new/g" {} \;
参见:sed 命令
-$ find . -type f -name 'file*' -exec mv {} {}_renamed \;
$ find . -type f -name 'file*' -exec sh -c 'x="{}"; mv "$x" "${x}.bak"' \;
-$ find . -name '*.mp3' -exec mv {} /tmp/music \;
查找并将其移动到特定目录
-$ find . -name '*2020*.xml' -exec cp -r "{}" /tmp/backup \;
查找并将其复制到特定目录
-$ find download -type f -iname '*.csv' | xargs cat > merged.csv
$ find download -type f -name '*.gz' -exec cat {} \; > output
-$ find . -printf "%T+\t%p\n" | sort
$ find . -printf "%T+\t%p\n" | sort -r
-查找文件并将权限设置为 644。
$ find / -type f -perm 0777 -print -exec chmod 644 {} \;
查找目录并将权限设置为 755。
$ find / -type d -perm 777 -print -exec chmod 755 {} \;
-$ find . -type f -name "*.java" | xargs tar cvf myfile.tar
$ find . -type f -name "*.java" | xargs tar rvf myfile.tar
diff --git a/docs/git.html b/docs/git.html
index c8712aa5..29afbf7d 100644
--- a/docs/git.html
+++ b/docs/git.html
@@ -15,10 +15,10 @@
本备忘单总结了常用的 Git 命令行指令,以供快速参考。
-创建一个新的本地存储库
$ git init [project name]
@@ -28,7 +28,7 @@
将存储库克隆到指定目录
$ git clone git_url 指定目录
-在工作目录中显示修改后的文件,为您的下一次提交暂存
$ git status
@@ -59,7 +59,7 @@
在指定分支之前应用当前分支的任何提交
$ git rebase [branch]
-设置将附加到您的提交和标签的名称
$ git config --global user.name "name"
@@ -72,7 +72,7 @@
在文本编辑器中编辑全局配置文件
$ git config --global --edit
-列出所有本地分支
$ git branch
@@ -95,7 +95,7 @@
标记当前提交
$ git tag my_tag
-显示当前活动分支的提交历史
$ git log
@@ -111,7 +111,7 @@
以人类可读的格式显示 Git 中的任何对象
$ git show [SHA]
-从该 Git 远程获取所有分支
$ git fetch [alias]
@@ -131,7 +131,7 @@
将另一个分支的一个特定提交合并到当前分支
$ git cherry-pick [commit_id]
-添加一个 git URL 作为别名
$ git remote add [alias] [url]
@@ -147,7 +147,7 @@
更改 git repo 的 URL
$ git remote set-url origin [git_url]
-保存已修改和分阶段的更改
$ git stash
@@ -160,7 +160,7 @@
丢弃存储堆栈顶部的更改
$ git stash drop
-从项目中删除文件并暂存删除以进行提交
$ git rm [file]
@@ -170,7 +170,7 @@
显示所有提交日志,并指示任何移动的路径
$ git log --stat -M
-/logs/*
# “!” 意思是不要忽视
!logs/.gitkeep
@@ -182,20 +182,20 @@
.sass-cache
.gitignore
文件指定了 Git 应该忽略的未跟踪的文件
new
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
-按内容搜索更改
$ git log -S'<a term in the source>'
@@ -205,7 +205,7 @@
打印出很酷的日志可视化
$ git log --pretty=oneline --graph --decorate --all
-列出所有分支及其上游
$ git branch -vv
@@ -221,22 +221,22 @@
删除本地存在远程不存在的分支
git remote prune origin
-$ git commit -v --amend
重写最后的提交信息
-git config core.fileMode false
不再将文件的权限变化视作改动
-$ 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
# 设置大小写敏感
@@ -244,7 +244,7 @@
# 远程有俩相同目录,通过这种方式清除掉,然后提交记录
$ git rm -r --cached <目录/文件>
-$ git rebase -i HEAD~3
# 表示要修改当前版本的倒数第三次状态
# 将要更改的记录行首单词 pick 改为 edit
@@ -281,13 +281,13 @@
# 最后,确保没有人提交进行推送,最好不要加 -f 强制推送
$ git push -f origin master
-# 撤销一条记录
$ git reset --hard HEAD~1
# 强制同步到远程仓库
$ git push -f origin HEAD:master
-# 如果有的修改以及加入暂存区的话
$ git reset --hard
# 还原所有修改,不会删除新增的文件
@@ -295,18 +295,18 @@
# 下面命令会删除新增的文件
$ git clean -xdf
-$ git rev-parse HEAD # e10721cb8859b2c
# 获取短 hash
$ git rev-parse --short HEAD # e10721c
-$ git branch --merged master | grep -v '^\*\| master' | xargs -n 1 git branch -d
-$ git config --global core.quotepath false
-# 切换到 B 分支
$ git checkout <B>
# 将 A 分支 <hash-id> 的内容 pick 到 B 分支
diff --git a/docs/html-char.html b/docs/html-char.html
index 0439dbb0..62645d84 100644
--- a/docs/html-char.html
+++ b/docs/html-char.html
@@ -15,10 +15,10 @@
-Quick Reference
此备忘清单是 HTML 实体及其编号和名称的完整列表。还包括可以用 HTML 表示的 ASCII 字符的完整列表。
-HTTP 状态码备忘清单。 每个 HTTP 状态代码的快速参考。
-永久性否定的完成答复,该命令不成功,错误是永久性的。如果客户端重试命令,将再次出现同样的错误。
-包含最重要概念、函数、方法等的 JavaScript 备忘单。 初学者的完整快速参考。
-JavaScript 是一种轻量级的解释型编程语言。
-// => Hello world!
console.log('Hello world!');
// => Hello QuickReference
@@ -33,31 +33,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 count;
console.log(count); // => undefined
count = 10;
console.log(count); // => 10
-const numberOfColumns = 4;
// TypeError: Assignment to constant...
numberOfColumns = 8;
-let x = null;
let name = "Tammy";
const found = false;
@@ -66,20 +66,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
-// 此行将表示注释
/*
多行配置
@@ -87,7 +87,7 @@
以下配置。
*/
-let number = 100;
// 两个语句都会加 10
number = number + 10;
@@ -95,14 +95,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; // 字符串长度
@@ -124,7 +124,7 @@
// 数字转为十六进制 (16)、八进制 (8) 或二进制 (2)
128.toString(16);
-var pi = 3.141;
pi.toFixed(0); // 返回 3
pi.toFixed(2); // 返回 3.14 - 使用金钱
@@ -146,7 +146,7 @@
// 无穷
Number.POSITIVE_INFINITY
-const pi = Math.PI; // 3.141592653589793
Math.round(4.4); // = 4 - 数字四舍五入
Math.round(4.5); // = 5
@@ -173,7 +173,7 @@
// 随机整数,从 1
Math.floor(Math.random() * 5) + 1;
-// 像脚本代码一样执行字符串
eval();
// 从数字返回字符串
@@ -199,20 +199,20 @@
// 解析一个字符串并返回一个整数
parseInt();
-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
@@ -220,32 +220,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' // ''
-const isMailSent = true;
if (isMailSent) {
console.log('Mail sent to recipient');
}
-var age = 1;
// => true
var status = (age >= 18) ? true : false;
-const size = 10;
if (size > 20) {
console.log('Medium');
@@ -256,7 +256,7 @@
}
// Print: Small
-0 == false // true
0 === false // false, 不同类型
1 == "1" // true, 自动类型转换
@@ -267,7 +267,7 @@
'0' === false // false
==
只检查值,===
检查值和类型。
const food = 'salad';
switch (food) {
@@ -279,7 +279,7 @@
console.log('请您用餐');
}
-const food = 'salad';
switch (food) {
@@ -291,8 +291,8 @@
console.log('请您用餐');
}
-// 定义函数:
function sum(num1, num2) {
return num1 + num2;
@@ -300,7 +300,7 @@
// 调用函数:
sum(3, 6); // 9
-// Named function
function rocketToMars() {
return 'BOOM!';
@@ -310,32 +310,32 @@
return 'BOOM!';
}
-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;
@@ -345,7 +345,7 @@
num1 + num2;
}
-// 定义函数
function sum(num1, num2) {
return num1 + num2;
@@ -353,24 +353,24 @@
// 调用函数
sum(2, 4); // 6
-const dog = function() {
return 'Woof!';
}
-// 参数是 name
function sayHello(name) {
return `Hello, ${name}!`;
}
-function add(num1, num2) {
return num1 + num2;
}
-function myFunction() {
var pizzaName = "Margarita";
// 这里的代码可以使用 PizzaName
@@ -394,7 +394,7 @@
const x = 2; // Global scope
ES6 引入了两个重要的新 JavaScript 关键字:let 和 const。这两个关键字在 JavaScript 中提供了块作用域。
-const isLoggedIn = true;
if (isLoggedIn == true) {
const statusMessage = 'Logged in.';
@@ -403,7 +403,7 @@
// 未捕获的引用错误...
console.log(statusMessage);
-// 全局声明的变量
const color = 'blue';
function printColor() {
@@ -412,7 +412,7 @@
printColor(); // => blue
-let
vs var
let
vs var
for (let i = 0; i < 3; i++) {
// 这是“let”的最大范围
// i 可以访问 ✔️
@@ -426,7 +426,7 @@
// i 可以访问 ✔️
var
的范围是最近的函数块,而 let
的范围是最近的封闭块。
// 打印三次,不是我们的意思。
for (var i = 0; i < 3; i++) {
setTimeout(_ => console.log(i), 10);
@@ -439,23 +439,23 @@
}
变量使用 let
有自己的副本,变量有使用 var
的共享副本。
const fruits = ["apple", "dew", "banana"];
// 不同的数据类型
const data = [1, 'chicken', false];
-const numbers = [1, 2, 3, 4];
numbers.length // 4
-// 访问数组元素
const myArray = [100, 200, 300];
console.log(myArray[0]); // 100
console.log(myArray[1]); // 200
-// 添加单个元素:
const cart = ['apple', 'orange'];
cart.push('pear');
@@ -506,19 +506,19 @@
numbers.push(3, 4, 5);
将项目添加到末尾并返回新的数组长度。
-const fruits = ["apple", "dew", "banana"];
const fruit = fruits.pop(); // 'banana'
console.log(fruits); // ["apple", "dew"]
从末尾删除一个项目并返回已删除的项目。
-let cats = ['Bob', 'Willy', 'Mini'];
cats.shift(); // ['Willy', 'Mini']
从头删除一个项目并返回已删除的项目。
-let cats = ['Bob'];
// => ['Willy', 'Bob']
cats.unshift('Willy');
@@ -526,7 +526,7 @@
cats.unshift('Puff', 'George');
将项目添加到开头并返回新的数组长度。
-const numbers = [3, 2, 1]
const newFirstNumber = 4
@@ -537,8 +537,8 @@
numbers.concat(newFirstNumber)
如果你想避免改变你的原始数组,你可以使用 concat。
-while (condition) {
// 要执行的代码块
}
@@ -548,7 +548,7 @@
i++;
}
-const fruits = ["apple", "dew", "berry"];
for (let i = fruits.length - 1; i >= 0; i--) {
console.log(`${i}. ${fruits[i]}`);
@@ -557,7 +557,7 @@
// => 1. dew
// => 0. apple
-x = 0
i = 0
do {
@@ -567,26 +567,26 @@
} while (i < 5);
// => 0 1 3 6 10
-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]);
}
// => 数组中的每一项
-for (let i = 0; i < 99; i += 1) {
if (i > 5) break;
console.log(i)
}
// => 0 1 2 3 4 5
-for (i = 0; i < 10; i++) {
if (i === 3) {
continue;
@@ -594,14 +594,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}`);
}
}
-const fruits = ["apple", "orange", "banana"];
for (let index in fruits) {
console.log(index);
@@ -610,7 +610,7 @@
// => 1
// => 2
-var num = 0;
outPoint:
@@ -626,7 +626,7 @@
alert(num); // 95
从 alert(num)
的值可以看出,continue outPoint;
语句的作用是跳出当前循环,并跳转到 outPoint
(标签)下的 for
循环继续执行。
const fruits = ["apple", "orange", "banana"];
for (let fruit of fruits) {
console.log(fruit);
@@ -635,7 +635,7 @@
// => orange
// => banana
-async function* asyncGenerator() {
var i = 0;
while (i < 3) {
@@ -653,7 +653,7 @@
// 1
// 2
-var i = 0;
for (;;) {
@@ -662,8 +662,8 @@
i++;
}
-let plusFive = (number) => {
return number + 5;
};
@@ -673,7 +673,7 @@
// 由于 f 具有函数值,因此可以调用它。
f(9); // 14
-const isEven = (n) => {
return n % 2 == 0;
}
@@ -685,34 +685,34 @@
printMsg(isEven, 4);
// => The number 4 is an even number: True.
-const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, curVal) => {
return accumulator + curVal;
});
console.log(sum); // 10
-const members = ["Taylor", "Donald", "Don", "Natasha", "Bobby"];
const announcements = members.map((member) => {
return member + " joined the contest.";
});
console.log(announcements);
-const numbers = [28, 77, 45, 99, 27];
numbers.forEach(number => {
console.log(number);
});
-const randomNumbers = [4, 11, 42, 14, 39];
const filteredArray = randomNumbers.filter(n => {
return n > 5;
});
-const apple = {
color: 'Green',
price: { bulk: '$3/kg', smallQty: '$4/kg' }
@@ -720,7 +720,7 @@
console.log(apple.color); // => Green
console.log(apple.price.bulk); // => $3/kg
-// 无效键名示例
const trainSchedule = {
// 由于单词之间的空格而无效。
@@ -731,13 +731,13 @@
+compartment: 'C'
}
-const classElection = {
date: 'January 12'
};
console.log(classElection.place); // undefined
-const student = {
name: 'Sheldon',
score: 100,
@@ -752,7 +752,7 @@
student = {}
// TypeError: TypeError:分配给常量变量。
-const person = {
name: 'Tom',
age: '22',
@@ -761,7 +761,7 @@
console.log(name); // 'Tom'
console.log(age); // '22'
-const person = {
firstName: "Matilda",
age: 27,
@@ -778,7 +778,7 @@
}
*/
-const origNum = 8;
const origObj = {color: 'blue'};
const changeItUp = (num, obj) => {
@@ -792,7 +792,7 @@
// 通过引用,因此是可变的。
console.log(origObj.color);
-// 一个接受 'name','age' 和 'breed' 的工厂函数,
// 参数返回一个自定义的 dog 对象。
const dogFactory = (name, age, breed) => {
@@ -806,12 +806,12 @@
};
};
-const activity = 'Surfing';
const beach = { activity };
console.log(beach); // { activity: 'Surfing' }
-const cat = {
name: 'Pipey',
age: 8,
@@ -821,7 +821,7 @@
};
console.log(cat.whatName()); // => Pipey
-const engine = {
// 方法简写,有一个参数
start(adverb) {
@@ -835,7 +835,7 @@
engine.start('noisily');
engine.sputter();
-const myCat = {
_name: 'Dottie',
get name() {
@@ -850,8 +850,8 @@
// 赋值调用 setter
myCat.name = 'Yankee';
-class Dog {
constructor(name) {
this._name = name;
@@ -877,7 +877,7 @@
// 调用静态方法
Dog.bark();
-class ClassStaticField {
static staticField = 'static field'
}
@@ -885,7 +885,7 @@
console.log(ClassStaticField.staticField)
// 预期输出值:"static field"
-class Song {
constructor() {
this.title;
@@ -900,7 +900,7 @@
const mySong = new Song();
mySong.play();
-// Parent class
class Media {
constructor(info) {
@@ -921,7 +921,7 @@
publishDate: 1975
});
-class Song {
constructor(title, artist) {
this.title = title;
@@ -931,7 +931,7 @@
const mySong = new Song('Bohemian Rhapsody', 'Queen');
console.log(mySong.title);
-class Song {
play() {
console.log('Playing!');
@@ -942,8 +942,8 @@
}
}
-// myMath.js
// 默认导出 Default export
export default function add(x,y){
@@ -964,7 +964,7 @@
multiply, duplicate
}
-// main.js
import add, { subtract, multiply, duplicate } from './myMath.js';
console.log(add(6, 2)); // 8
@@ -974,7 +974,7 @@
// index.html
<script type="module" src="main.js"></script>
-// myMath.js
function add(x,y){
return x + y
@@ -996,7 +996,7 @@
duplicate
}
-// main.js
const myMath = require('./myMath.js')
console.log(myMath.add(6, 2)); // 8
@@ -1004,8 +1004,8 @@
console.log(myMath.multiply(6, 2)); // 12
console.log(myMath.duplicate(5)) // 10
-创建 promises
new Promise((resolve, reject) => {
if (ok) {
@@ -1015,30 +1015,30 @@
}
})
-promise
.then((result) => { ··· })
.catch((error) => { ··· })
-Promise.all(···)
Promise.race(···)
Promise.reject(···)
Promise.resolve(···)
-const executorFn = (resolve, reject) => {
resolve('Resolved!');
};
const promise = new Promise(executorFn);
-const loginAlert = () => {
console.log('Login');
};
setTimeout(loginAlert, 6000);
-const promise = new Promise((resolve, reject) => {
const res = true;
// 一个异步操作。
@@ -1054,7 +1054,7 @@
(err) => console.error(err)
);
-const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Result');
@@ -1067,7 +1067,7 @@
console.error(err);
});
-const promise = new Promise(
(resolve, reject) => {
setTimeout(() => {
@@ -1083,7 +1083,7 @@
console.error(err);
});
-const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(3);
@@ -1099,7 +1099,7 @@
console.log(res[1]);
});
-const promise = new Promise(
resolve =>
setTimeout(() => resolve('dAlan'),100)
@@ -1116,7 +1116,7 @@
console.error(err)
});
-const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('*');
@@ -1134,8 +1134,8 @@
// 将它们链接在一起
promise.then(twoStars).then(oneDot).then(print);
-function helloWorld() {
return new Promise(resolve => {
setTimeout(() => {
@@ -1159,7 +1159,7 @@
msg(); // Message: Hello World! <-- 2 秒后
msg1(); // Message: Hello World! <-- 2 秒后
-let pro1 = Promise.resolve(5);
let pro2 = 44;
let pro3 = new Promise(function(resolve, reject) {
@@ -1170,7 +1170,7 @@
});
// expected => Array [5, 44, "foo"]
-function helloWorld() {
return new Promise(resolve => {
setTimeout(() => {
@@ -1184,7 +1184,7 @@
}
msg(); // Message: Hello World! <-- 2 秒后
-// 数据不完整
let json = '{ "age": 30 }';
@@ -1195,7 +1195,7 @@
console.error( "Invalid JSON data!" );
}
-function helloWorld() {
return new Promise(resolve => {
setTimeout(() => {
@@ -1209,8 +1209,8 @@
}
msg(); // Message: Hello World! <-- 2 秒后
-const jsonObj = {
"name": "Rick",
"id": "11A",
@@ -1218,12 +1218,12 @@
};
另见:JSON 备忘单
-const xhr = new XMLHttpRequest();
xhr.open('GET', 'mysite.com/getjson');
XMLHttpRequest
是一个浏览器级别的 API,它使客户端能够通过 JavaScript 编写数据传输脚本,而不是 JavaScript 语言的一部分。
const req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', '/getdata?id=65');
@@ -1232,7 +1232,7 @@
};
req.send();
-const data = { weight: '1.5 KG' };
const xhr = new XMLHttpRequest();
// 初始化一个请求。
@@ -1250,7 +1250,7 @@
console.log(xhr.response);
}
-fetch(url, {
method: 'POST',
headers: {
@@ -1267,14 +1267,14 @@
console.log(networkError.message)
})
-fetch('url-that-returns-JSON')
.then(response => response.json())
.then(jsonResponse => {
console.log(jsonResponse);
});
-fetch('url')
.then(response => {
console.log(response);
@@ -1282,7 +1282,7 @@
console.error(rejection.message);
});
-fetch('https://api-xxx.com/endpoint', {
method: 'POST',
body: JSON.stringify({id: "200"})
@@ -1297,7 +1297,7 @@
console.log(jsonResponse);
})
-const getSuggestions = async () => {
const wordQuery = inputField.value;
const endpoint = `${url}${queryParams}${wordQuery}`;
diff --git a/docs/jest.html b/docs/jest.html
index 73dc0d29..d85b4f4a 100644
--- a/docs/jest.html
+++ b/docs/jest.html
@@ -15,10 +15,10 @@
-Quick Reference
Jest 是一款优雅、简洁的 JavaScript 测试框架。
-Jest 是一款优雅、简洁的 JavaScript 测试框架。
describe('makePoniesPink', () => {
beforeAll(() => {
/* 在所有测试之前运行 */
@@ -47,8 +47,8 @@
})
})
-expect(42).toBe(42) // 严格相等 (===)
expect(42).not.toBe(3) // 严格相等 (!==)
expect([1, 2]).toEqual([1, 2]) // 深度相等
@@ -62,7 +62,7 @@
.not.toStrictEqual({ b: 2 })
-// 匹配 if 语句视为 true 的任何内容
// (not false、0、''、null、undefined、NaN)
expect('foo').toBeTruthy()
@@ -78,7 +78,7 @@
// 匹配真假
expect(true).toEqual(expect.any(Boolean))
-// 大于
expect(2).toBeGreaterThan(1)
// 大于或等于
@@ -92,7 +92,7 @@
// 原始值的传递类型
expect(NaN).toEqual(expect.any(Number))
-// 检查字符串是否与正则表达式匹配。
expect('long string').toMatch('str')
expect('string').toEqual(expect.any(String))
@@ -105,7 +105,7 @@
]
)
-expect([]).toEqual(expect.any(Array))
const exampleArray = [
'Alice', 'Bob', 'Eve'
@@ -118,7 +118,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')
@@ -134,7 +134,7 @@
expect.anything(),
])
-// const fn = jest.fn()
// const fn = jest.fn().mockName('Unicorn') -- 命名为 mock, Jest 22+
// 函数被调用
@@ -164,7 +164,7 @@
// fn.mock.calls[0][0] — 第一次调用的第一个参数
expect(fn.mock.calls[0][0]).toBe(2)
-toBeCalled
→ toHaveBeenCalled
toBeCalledWith
→ toHaveBeenCalledWith
lastReturnedWith
→ toHaveLastReturnedWith
nthReturnedWith
→ toHaveNthReturnedWith
// 检查对象是否是类的实例。
expect(new A()).toBeInstanceOf(A)
@@ -187,7 +187,7 @@
// 匹配除 null 或 undefined 之外的任何内容
expect('pizza').toEqual(expect.anything())
-// 这可确保某个值与最近的快照匹配。
expect(node).toMatchSnapshot()
@@ -199,7 +199,7 @@
// 确保值与最近的快照匹配。
expect(user).toMatchInlineSnapshot()
-test('resolve to lemon', () => {
// 验证在测试期间是否调用了一定数量的断言。
expect.assertions(1)
@@ -226,7 +226,7 @@
})
-// const fn = () => {
// throw new Error('Out of cheese!')
// }
@@ -249,12 +249,12 @@
// 测试函数在调用时是否抛出与最新快照匹配的错误。
expect(fn).toThrowErrorMatchingSnapshot()
-toThrowError
→ toThrow
请参阅 Jest 文档中的 更多示例。
在异步测试中指定一些预期的断言是一个很好的做法,所以如果你的断言根本没有被调用,测试将会失败。
test('async test', () => {
@@ -269,7 +269,7 @@
beforeEach(expect.hasAssertions)
这将验证每个测试用例至少存在一个断言。 它还可以与更具体的 expect.assertions(3)
声明配合使用。
-
test('async test', async () => {
expect.assertions(1)
@@ -277,7 +277,7 @@
expect(result).toBe(true)
})
-test('async test', (done) => {
expect.assertions(1)
@@ -295,7 +295,7 @@
})
将断言包装在 try/catch 块中,否则 Jest 将忽略失败
-test('async test', () => {
expect.assertions(1)
@@ -305,8 +305,8 @@
})
从你的测试中 返回 一个 Promise
-test('call the callback', () => {
const callback = jest.fn()
fn(callback)
@@ -332,7 +332,7 @@
const callback = jest.fn(() => true)
-
您的模拟可以返回值:
const callback
= jest.fn().mockReturnValue(true)
@@ -358,7 +358,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
@@ -366,7 +366,7 @@
-注意:当使用
babel-jest
时,对jest.mock
的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为,请使用jest.doMock
。
创建一个类似 __mocks__/lodash/memoize.js
的文件:
module.exports = (a) => a
@@ -375,7 +375,7 @@
注意:当使用 babel-jest
时,对 jest.mock
的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为,请使用 jest.doMock
。
const spy = jest.spyOn(console, 'log').mockImplementation(() => {})
expect(console.log.mock.calls).toEqual([['dope'], ['nope']])
spy.mockRestore()
@@ -384,7 +384,7 @@
expect(spy).toHaveBeenCalled()
spy.mockRestore()
-const location = {}
const getTitle = jest
.spyOn(location, 'title', 'get')
@@ -393,7 +393,7 @@
.spyOn(location, 'title', 'set')
.mockImplementation(() => {})
-为使用本机计时器函数(setTimeout
、setInterval
、clearTimeout
、clearInterval
)的代码编写同步测试。
// 启用假计时器
jest.useFakeTimers()
@@ -422,7 +422,7 @@
对于特殊情况,请使用 jest.runOnlyPendingTimers()。
注意: 您应该在测试用例中调用 jest.useFakeTimers()
以使用其他假计时器方法。
const getTitle = jest.fn(() => 'pizza')
const setTitle = jest.fn()
const location = {}
@@ -431,7 +431,7 @@
set: setTitle,
})
-对于一个模拟
// 清除模拟使用日期
// (fn.mock.calls、fn.mock.instances)
@@ -453,15 +453,15 @@
// 将所有模拟恢复到其原始值。
jest.restoreAllMocks()
-jest.mock('fs')
// 模拟模块
const fs = require('fs')
// 原始模块
const fs = require.requireActual('fs')
-test.each([
[1, 1, 2],
[1, 2, 3],
@@ -470,7 +470,7 @@
expect(a + b).toBe(expected)
})
-test.each`
a | b | expected
${1} | ${1} | ${2}
@@ -480,7 +480,7 @@
expect(a + b).toBe(expected)
})
-describe.each([
['mobile'], ['tablet'], ['desktop']
])('checkout flow on %s', (viewport) => {
@@ -490,17 +490,17 @@
})
-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()
@@ -517,7 +517,7 @@
})
Node.js 和 Jest 会缓存你需要的模块。 要测试具有副作用的模块,您需要在测试之间重置模块注册表
-这是理解和编写 JSON 格式配置文件的快速参考备忘单。
-JSON 是一种基于文本的轻量级开放标准,专为人类可读的数据交换而设计。
.json
application/json
{
"name": "Jason",
"age": 39,
@@ -41,7 +41,7 @@
]
}
-{
"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
-{
"positive" : 12,
"negative" : -1,
@@ -170,11 +170,11 @@
"zero" : 0
}
-{ "foo": 0xFF }
在JSON中,只能使用十进制文字
-{
"color": "Purple",
"id": "210",
@@ -187,11 +187,11 @@
}
用逗号分隔的多个键/值对
-[1, 2, 3, 4, 5]
以 [
开始并以 ]
结束
{
"children": [
{ "name": "Jimmy Smith", "age": 15 },
@@ -199,14 +199,14 @@
]
}
-{
"attributes": ["a1", "a2"],
"methods": ["getter", "setter"],
"empty_array": []
}
-{
"my_sequences": [
[1, 2, 3],
@@ -216,7 +216,7 @@
]
}
-{
"Mark McGwire": {
"hr": 65,
@@ -228,7 +228,7 @@
}
}
-{
"Jack": {
"id": 1,
@@ -241,8 +241,8 @@
}
}
-let myObject = {
"name": "Jason",
"last": "Doe",
@@ -283,7 +283,7 @@
let myObject = {
"ref": {
"name": 0,
@@ -342,7 +342,7 @@
-
let myArray = [
{
"name": "Jason",
@@ -401,7 +401,7 @@
-
let myArray = [
"Jason",
"Doe",
@@ -434,7 +434,7 @@
-
这是 Markdown 语法的快速参考备忘单。
-# h1
## h2
### h3
@@ -26,21 +26,21 @@
##### h5
###### h6
-Header 1
========
Header 2
--------
-> 这是一个
> 块引用
>
> > 嵌套
> > 块引用
-* Item 1
* Item 2
* item 3a
@@ -58,13 +58,13 @@
- [ ] Checkbox off
- [x] Checkbox on
-
1. Item 1
2. Item 2
a. item 3a
b. item 3b
-[link](http://google.com)
[link][google]
@@ -72,7 +72,7 @@
<http://google.com>
-*斜体*
_斜体_
@@ -82,7 +82,7 @@
`内联代码`
~~删除~~
-连字符
---
@@ -92,7 +92,7 @@
下划线
___
-```javascript
console.log("This is a block code")
```
@@ -103,10 +103,10 @@
4 空格缩进做一个代码块
-`Inline code` 周围有反引号
-| 左栏 | 中间栏 | 右栏 |
|:------------|:-------------:|-------------:|
| 单元格 1 | 居中 | $1600 |
@@ -119,22 +119,22 @@
单元格 2 | 单元格 3 | $12
Markdown 表格生成器:tableconvert.com
-

-[](https://github.com/)
[](link_url)
-![alt text][logo]
[logo]: /images/logo.png "Logo Title"
---save
是 npm@5 的默认值。 以前,使用不带 --save
的 npm install
不会更新 package.json。
将某人添加为所有者
npm owner add USERNAME PACKAGENAME
diff --git a/docs/package.json.html b/docs/package.json.html
index 6f94ec70..383fab6d 100644
--- a/docs/package.json.html
+++ b/docs/package.json.html
@@ -15,16 +15,16 @@
这个快速参考备忘清单,显示了关于 package.json 文件中所需内容的全部内容。
-本快速参考备忘清单是您需要了解的关于 package.json 文件中所需内容的全部内容。 它必须是实际的 JSON,而不仅仅是 JavaScript 对象字面量。
name
name
{
"name": "my-awesome-package"
}
@@ -36,13 +36,13 @@
名称中不得包含大写字母
必须仅使用URL安全字符
-
version
version
{
"version": "1.0.0"
}
包的当前版本,严格遵循 Semantic Versioning 2.0.0 语义化版本规范。
-Node.js
核心模块相同的名字。js
或者 node
单词。如果没有 name
和version
字段,您的包将无法安装
name
包name
包yarn add [包名]
# or
npm install [包名]
@@ -63,14 +63,14 @@
https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
这是您的 包
的名称。 它在URL中使用,作为参数命令行,以及 node_modules
中的目录名。
-
description
description
{
"description": "我的包的概要简短描述"
}
帮助使用者了解包的功能的字符串,包管理器也会把这个字符串作为搜索关键词。
-license
license
所有包都应该指定许可证,以便让用户了解他们是在什么授权下使用此包,以及此包还有哪些附加限制。
{
"license": "MIT",
@@ -87,7 +87,7 @@
如果你使用非标准的许可证,一个 SEE LICENSE IN <文件名>
字符串指向你的包里顶级目录的一个 <文件名>。
如果你不想在任何条款下授权其他人使用你的私有或未公开的包,一个 UNLICENSED
字符串。
-
keywords
keywords
{
"keywords": [
"short", "relevant", "keywords"
@@ -95,15 +95,15 @@
}
一个字符串数组,当在包管理器里搜索包时很有用。
-各种指向项目文档、issues 上报,以及代码托管网站的链接字段。
-homepage
homepage
{
"homepage": "https://your-package.org"
}
是包的项目主页或者文档首页。
-repository
repository
{
"repository": {
"type": "git", "url": "https://github.com/user/repo.git"
@@ -115,14 +115,14 @@
}
包的实际代码所在的位置。
-bugs
bugs
{
"bugs": "https://github.com/user/repo/issues"
}
问题反馈系统的 URL,或者是 email 地址之类的链接。用户通过该途径向你反馈问题。
-author
author
项目的维护者。
{
"author": {
@@ -134,7 +134,7 @@
}
作者信息,一个人。
-contributors
contributors
{
"contributors": [
{ "name": "Your Friend", "email": "friend@xxx.com", "url": "http://friends-xx.com" }
@@ -147,9 +147,9 @@
}
贡献者信息,可能很多人。
-指定包含在项目中的文件,以及项目的入口文件。
-files
files
{
"files": [
"filename.js",
@@ -159,20 +159,20 @@
}
项目包含的文件,可以是单独的文件、整个文件夹,或者通配符匹配到的文件。
-main
main
{
"main": "filename.js"
}
项目的入口文件。
-man
man
{
"man": "./man/doc.1",
"man": ["./man/doc.1", "./man/doc.2"]
}
项目的入口文件。
-directories
directories
{
"directories": {
"lib": "path/to/lib/",
@@ -184,7 +184,7 @@
}
当你的包安装时,你可以指定确切的位置来放二进制文件、man pages、文档、例子等。
-bin
bin
{
"bin": "bin.js",
"bin": {
@@ -194,15 +194,15 @@
}
随着项目一起被安装的可执行文件。
-types
types
这是一个只在 TypeScript 中生效的字段,如果您的包有一个 main.js
文件,您还需要在 package.json
文件中指明主声明文件。 将 types
属性设置为指向 bundled
的声明文件。 例如:
{
"types": "./lib/main.d.ts",
}
如果您的主声明文件名为 index.d.ts
并且位于包的根目录(index.js
旁边),则不需要标记 types
属性,建议这样做。
esnext
esnext
完整的提案在这里。 简短说明:
esnext
:ES模块中使用阶段4功能(或更旧版本)的源代码,未编译。另请参阅:通过 npm 交付未编译的源代码
-module
browser
browser
"browser": {
"module-a": "./shims/module-a.js",
"./server/only.js": "./shims/client-only.js"
}
字段由模块作者提供,作为 JavaScript
包或组件工具的提示,用于打包模块以供客户端使用。 提案就在这里。
包里还可以包含一些可执行脚本或者其他配置信息。
-scripts
scripts
{
"scripts": {
"build-project": "node build-project.js"
@@ -246,7 +246,7 @@
有一些特殊的脚本名称。 如果定义了 preinstall
脚本,它会在包安装前被调用。 出于兼容性考虑,install
、postinstall
和 prepublish
脚本会在包完成安装后被调用。
start
脚本的默认值为 node server.js
。
参考文档:npm docs
-
scripts
scripts
对于以下脚本,npm
支持 package.json
文件的 scripts
默认命令字段:
prepublish
: 在打包并发布包之前运行,以及在没有任何参数的本地 npm
安装之前运行。 (见下文)preshrinkwrap
, shrinkwrap
, postshrinkwrap
: 由 npm shrinkwrap
命令运行。参考文档:npm docs.
-config
config
{
"config": {
"port": "8080"
@@ -284,9 +284,9 @@
}
配置中的键作为环境变量公开给脚本(scripts)。
-你的包很可能依赖其他包。你可以在你的 package.json
文件里指定那些依赖。
dependencies
dependencies
这些是你的包的开发版和发布版都需要的依赖。
{
"dependencies": {
@@ -312,7 +312,7 @@
你可以指定一个确切的版本、一个最小的版本 (比如 >=
) 或者一个版本范围 (比如 >= ... <
)。 包也可以指向本地的一个目录文件夹。
参考文档:npm docs.
-
{
"name": "my-workspaces-powered-project",
"workspaces": [
@@ -335,7 +335,7 @@
┆ ╰┈┈ package.json
参考文档:workspaces
-devDependencies
devDependencies
{
"devDependencies": {
"package-2": "^0.4.2"
@@ -343,7 +343,7 @@
}
这些是只在你的包开发期间需要,但是生产环境不会被安装的包。
-peerDependencies
peerDependencies
{
"peerDependencies": {
"package-3": "^2.7.18"
@@ -351,7 +351,7 @@
}
平行依赖允许你说明你的包和其他包版本的兼容性。添加可选设置以消除丢失的对等依赖性警告,#6671 。
-optionalDependencies
optionalDependencies
{
"optionalDependencies": {
"package-5": "^1.6.1"
@@ -359,7 +359,7 @@
}
可选依赖可以用于你的包,但不是必需的。如果可选包没有找到,安装还可以继续。
-bundledDependencies
bundledDependencies
{
"bundledDependencies": [
"package-4"
@@ -367,7 +367,7 @@
}
打包依赖是发布你的包时将会一起打包的一个包名数组。
-peerDependenciesMeta
peerDependenciesMeta
{
"peerDependenciesMeta": {
"node-sass": {
@@ -382,9 +382,9 @@
}
}
-你可以提供和你的包关联的系统级的信息,比如操作系统兼容性之类。
-engines
os
os
{
"os": ["darwin", "linux"],
"os": ["!win32"]
}
此选项指定你的包的操作系统兼容性,它会检查 process.platform
。
cpu
cpu
{
"cpu": ["x64", "ia32"],
"cpu": ["!arm", "!mips"]
}
使用这个选项指定你的包将只能在某些 CPU 体系架构上运行,这会检查 process.arch
。
private
private
{
"private": true
}
如果你不想你的包发布到包管理器(npm 或者 私有包管理),设置为 true
。
publishConfig
publishConfig
这些配置值将在你的包发布时使用。比如,你可以给包打标签。
{
"publishConfig": {
@@ -427,15 +427,15 @@
这是一组将在发布时使用的配置值。 如果要设置标记,注册表或访问权限,则特别方便,以便确保给定的包未标记为 latest
,发布到全局公共 registry
或默认情况下,作用域模块(@scoped)是私有的。
可以覆盖任何配置值,但只有 tag
,registry
和 access
可能对于发布而言很重要,npm-config。
flat
flat
如果你的包只允许给定依赖的一个版本,你想强制和命令行上 yarn install --flat 相同的行为,把这个值设为 true
。
{
"flat": true
}
请注意,如果你的 package.json
包含 "flat": true
并且其它包依赖你的包 (比如你在构建一个库,而不是应用), 其它那些包也需要在它们的 package.json
加上 "flat": true
,或者在命令行上用 yarn install --flat
安装。
resolutions
resolutions
{
"resolutions": {
"transitive-package-1": "0.0.29",
@@ -446,7 +446,7 @@
允许您覆盖特定嵌套依赖项的版本。 有关完整规范,请参见选择性版本解析 RFC。
注意,yarn install --flat
命令将会自动在 package.json
文件里加入 resolutions
字段。
这是您可以在 Quick Reference 备忘单上使用的样式参考,快速参与贡献!
-简单的将仓库克隆下来本地调试页面展示。
-git clone git@github.com:jaywcjlove/reference.git
-npm i # 安装依赖
npm run build # 编译输出 HTML
npm run start # 监听 md 文件编译输出 HTML
HTML 存放在仓库根目录下的 dist
目录中,将 dist/index.html
静态页面在浏览器中打开预览。
在备忘清单采用 HTML 注释语法
,标识网站布局和一些样式,目的是为了在 GitHub
中也是正常毫无瑕疵的预览 Markdown
。
### 卡片标题
<!--rehype:wrap-class=col-span-2-->
@@ -38,26 +38,26 @@
<!--rehype:style=color: red;-->
使用 col-span-2
类标识,卡片占 2
列位置
<!--rehype:
开始,-->
结束,包裹参数内容<!--rehype:
+ key=value
+ &
+ key=value
+ -->
标识开始
+ 参数
+ 分隔符
+ 参数
+ 标识结束
### H2 部分
<!--rehype:body-class=cols-2-->
### H3 部分
<!--rehype:wrap-class=row-span-2-->
-### 标题
<!--rehype:wrap-class=row-span-3&style=color:red;-->
-_我是红色_<!--rehype:style=color: red;-->
**加粗红色**<!--rehype:style=color: red;-->
上面添加注释样式,文字 我是红色 文字变红
了
**加粗变大红色**
<!--rehype:style=color: red;font-size: 18px-->
上面添加注释样式,文字 加粗变大红色 变红
并且大
了
\```js
function () {}
\```
<!--rehype:className=wrap-text -->
如果代码块内容太长,使用强制换行类解决
-| Key | value |
| ---- | ---- |
| `键` | 值 |
<!--rehype:className=show-header-->
注释配置添加 show-header
类,放置在表格下面,表头将被展示出来。
添加注释配置 <!--rehype:tooltips-->
添加一个 Tooltips 提示。
### H3 部分(卡片)背景颜色
<!--rehype:wrap-style=background: #00c69357;-->
-### 红色标题
<!--rehype:style=background:#e91e63;-->
-H2 部分
---
@@ -167,17 +167,17 @@
### H3 部分
<!--rehype:wrap-style=grid-row: span 2/span 2;-->
放在 ### H3 部分
下面的注释配置,与 <!--rehype:wrap-class=row-span-2-->
相同,设置 2 行占位布局。
## H2 部分
<!--rehype:body-style=grid-template-columns: repeat(2,minmax(0,1fr));-->
放在 ## H2 部分
下面的注释配置,与 <!--rehype:body-class=cols-2-->
相同,设置 2 栏布局。
### 卡片 1 (H3 部分)
<!--rehype:wrap-class=row-span-2-->
### 卡片 2 (H3 部分)
@@ -218,7 +218,7 @@
-
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ H3 Title 1 ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
@@ -236,7 +236,7 @@
### Title 4
第一标题添加 col-span-3
占位类
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
┆ ┆ ╰┈┈┈╯ ╰┈┈┈╯
@@ -253,7 +253,7 @@
### Title 5
在 Title 1
标题添加 row-span-2
占位类
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ┆ ┆ ╰┈┈┈╯
@@ -270,7 +270,7 @@
### Title 5
在 Title 2
标题添加 row-span-2
占位类
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ┆ ┆
@@ -287,7 +287,7 @@
### Title 5
在 Title 3
标题添加 row-span-2
占位类
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
@@ -304,7 +304,7 @@
<!--rehype:wrap-class=col-span-2-->
在 Title 5
标题添加 col-span-2
占位类
╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 1 ┆ ┆ 2 ┆
╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
@@ -321,7 +321,7 @@
### Title 5
在 Title 2
标题添加 col-span-2
占位类
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
@@ -338,7 +338,7 @@
### Title 5
在 Title 4
标题添加 col-span-2
占位类
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆
┆ ┆ ╰┈┈┈╯
@@ -359,9 +359,9 @@
### Title 6
在 Title 1
标题添加 col-span-2
和 row-span-2
占位类,使用 空格
间隔。
标题为 H4
的基本表格。
<!--rehype:className=show-header-->
<!--rehype:className=cols-4-->
<!--rehype:className=cols-3 style-none-->
...
-...
-...
-...
-...
-...
<!--rehype:wrap-class=row-span-2-->
...
<!--rehype:wrap-class=col-span-2-->
...
<!--rehype:style=background:#e91e63;-->
...
<!--rehype:style=background:#d7a100;-->
...
-每个部分可以有以下子项:
-每个盒子(卡片)都是一个 H3
部分。 盒子将包含 H3
自身内的所有东西。
这是一个包含段落的基本部分。
-注释配置:
`<!--rehype:wrap-style=background: #1b5064;-->`
diff --git a/docs/sed.html b/docs/sed.html
index aa97516b..f07a524c 100644
--- a/docs/sed.html
+++ b/docs/sed.html
@@ -15,9 +15,9 @@
语法
$ sed [options] command [input-file]
@@ -26,7 +26,7 @@
$ echo '123abc' | sed 's/[0-9]+//g'
-$ echo "hello world" | sed -e 's/h/H/g' -e 's/w/W/g'
Hello World
使用 -e
执行多个 sed 命令
$ echo 's/h/H/g' >> hello.sed
$ echo 's/w/W/g' >> hello.sed
$ echo "hello world" | sed -f hello.sed
Hello World
使用 -f
执行 sed 脚本文件
$ sed 's/old/new/g' file.txt
$ sed 's/old/new/g' file.txt > new.txt
$ sed 's/old/new/g' -i file.txt
$ sed 's/old/new/g' -i.backup file.txt
-$ sed 's/old/new/[flags]' [input-file]
替换所有出现的字符串
$ sed 's/old/new/g' file.txt
@@ -278,7 +278,7 @@
删除评论。 即使是那些在行尾的
$ sed 's/#.*$//' file.txt
-搜索字符串并仅打印匹配的行
$ sed -n '/hello/p' file.txt
@@ -288,7 +288,7 @@
搜索字符串,但仅输出不匹配的行
$ sed -n '/hello/!p' file.txt
-在第 2 行之后追加一行
$ sed '2a Text after line 2' file.txt
@@ -298,7 +298,7 @@
从第 3 行开始,每 3 行后追加一行
$ sed '3~3a Some text' file.txt
-文件的数字行(简单的左对齐)
$ sed = file.txt | sed 'N;s/\n/\t/'
@@ -311,14 +311,14 @@
计算行数(模拟“wc -l”)
$ sed -n '$='
-在第 5 行之前插入文本
$ sed '5i line number five' file.txt
在包含“hello”的每一行之前插入“示例:”
$ sed '/hello/i Example: ' file.txt
-删除文件中的第 5-7 行
$ sed '5,7d' file.txt
@@ -337,7 +337,7 @@
删除以“#”开头的行
$ sed '/^#/d' file.txt
-双倍行距
$ sed G
@@ -359,7 +359,7 @@
在匹配“正则表达式”的行周围插入一个空行
$ sed '/regex/{x;p;x;G;}'
-这个 semver 语义化版本快速参考备忘清单。
-Semver 是一种语义版本控制规范。
1.2.3
=1.2.3
>1.2.3
@@ -55,7 +55,7 @@
>=1.2.3
请注意,后缀版本(1.2.3-rc1
)不匹配。
当右侧为部分(例如,2.3
)时,假定缺失的部分为x
(例如, 2.3.x
)。
如果左边是部分的(例如,1.2
),则假定缺少的部分为0
(例如, 1.2.0
)。
1.2.3-prerelease+build
-这个 Sketch 快速参考备忘单显示了它的键盘快捷键和命令。
-这是 TOML 格式配置文件语法的快速参考备忘清单。
-TOML 是一种最小的配置文件格式,由于明显的语义而易于阅读。
bool = true
date = 2006-05-27T07:32:00Z
string = "hello"
@@ -32,30 +32,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
@@ -63,24 +63,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
-[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 = [
@@ -88,22 +88,22 @@
"ignored"
]
-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
@@ -112,20 +112,20 @@
is preserved.
'''
-[name]
foo = 1
bar = 2
foo
和 bar
是名为name
的表中的键
[table1]
foo = "bar"
[table1.nested_table]
baz = "bat"
-[[comments]]
author = "Nate"
text = "Great Article!"
@@ -133,7 +133,7 @@
author = "Anonymous"
text = "Love it!"
-{
"comments" : [
{
@@ -147,11 +147,11 @@
]
}
-[dog."tater.man"]
type = "pug"
-{
"dog": {
"tater.man": {
@@ -160,11 +160,11 @@
}
}
-[foo.bar.baz]
bat = "hi"
-{
"foo" : {
"bar" : {
@@ -175,13 +175,13 @@
}
}
-[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']
-name = { first = "Tom", last = "Preston-Werner" }
point = { x = 1, y = 2 }
animal = { type.name = "pug" }
diff --git a/docs/typescript.html b/docs/typescript.html
index 02d1e5c3..5bff9fb4 100644
--- a/docs/typescript.html
+++ b/docs/typescript.html
@@ -15,29 +15,29 @@
-Quick Reference
包含最重要基础、泛型、方法、class 等 TypeScript 强类型编程语言语法的快速参考备忘单。初学者的完整快速参考。
-TypeScript 是具有类型语法的 JavaScript。Interface 是为了匹配它们的运行时行为而构建的。
-any, void,
boolean, string, number,
undefined, null,
unknown, never,
bigint, symbol
-Date, Error,
Array, Map, Set,
Regexp, Promise
-Object:
{ field: string }
@@ -50,10 +50,10 @@
Tuple:
[string, number]
-Object, String, Number, Boolean
-/** 可选择从现有接口或类型(Response, HTTPAble)中获取属性 */
interface JSONResponse extends Response, HTTPAble {
version: number;
@@ -75,13 +75,13 @@
readonly body: string;
}
-声明一个可以在你的 Interface 中改变的类型
interface APICall<Response> {
data: Response
}
-const api: APICall<ArtworkCall> = ...
api.data // Artwork
@@ -95,21 +95,21 @@
api.data.status
-interface Expect {
(matcher: boolean): string
(matcher: string): boolean;
}
一个可调用 Interface 可以对不同的参数集有多个定义。
-interface Syncable {
sync(): void
}
class Account implements Syncable { ... }
您可以通过实现确保类 class 符合 Interface。
-对象可以有自定义的 getter
或 setter
。
interface Ruler {
get size(): number
@@ -121,7 +121,7 @@
r.size = 12
r.size = "36"
-interface APICall {
data: Response
}
@@ -131,54 +131,54 @@
}
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 */ // 附加文档
@@ -193,7 +193,7 @@
}
用于节省空间的 Terser,请参阅 Interface 备忘清单了解更多信息,除了“static”匹配之外的所有内容。
-type Artist = {
name: string, bio: string
}
@@ -207,7 +207,7 @@
// void, bio: (nv: string) => void }
类似于类型系统的映射语句,允许输入类型更改新类型的结构。
-type SupportedLangs = "en" | "pt" | "zh";
type FooterLocaleIDs = "header" | "footer";
type AllLocaleIDs = `${SupportedLangs}_${FooterLocaleIDs}_id`;
@@ -216,16 +216,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 语句”。 通过泛型创建,然后通常用于减少类型联合中的选项数量。
-const input = getUserInput()
input // string | number
@@ -233,7 +233,7 @@
input // string
}
-const input = getUserInput()
input // string | { error: ... }
@@ -241,7 +241,7 @@
input // { error: ... }
}
-const input = getUserInput()
input // number | number[]
@@ -249,7 +249,7 @@
input // number[]
}
-const input = getUserInput()
input // number | number[]
@@ -257,7 +257,7 @@
input // number[]
}
-const data1 = {
name: "Zagreus"
}
@@ -288,10 +288,10 @@
data = "Hello"
data // string
-CFA 几乎总是采用联合,并根据代码中的逻辑减少联合内的类型数量。
大多数时候 CFA 在自然 JavaScript 布尔逻辑中工作,但是有一些方法可以定义您自己的函数,这些函数会影响 TypeScript 如何缩小类型。
-const input = getUserInput()
input // string | number
const inputLength =
@@ -300,13 +300,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) {
@@ -315,7 +315,7 @@
case 400: return response.error
}
-描述影响当前范围的 CFA 更改的函数,因为它抛出而不是返回 false。
function assertResponse(obj: any):
asserts obj is SuccessResponse {
@@ -324,7 +324,7 @@
}
}
-const res = getResponse():
res // SuccessResponse | ErrorResponse
@@ -333,7 +333,7 @@
res // SuccessResponse
-interface A {
x: number;
}
@@ -350,13 +350,13 @@
}
操作符可以安全的检查一个对象上是否存在一个属性,它通常也被作为类型保护使用
-class ABC { ... }
const abc = new ABC()
新 ABC 的参数来自构造函数。
-前缀 private 是一个仅类型的添加,在运行时没有任何影响。 在以下情况下,类之外的代码可以进入项目:
class Bag {
private item: any
@@ -365,17 +365,17 @@
Vs #private 是运行时私有的,并且在 JavaScript 引擎内部强制执行,它只能在类内部访问:
class Bag { #item: any }
-
函数内部‘this’的值取决于函数的调用方式。 不能保证始终是您可能在其他语言中使用的类实例。
您可以使用“此参数”、使用绑定功能或箭头功能来解决问题。
-一个类既可以用作类型也可以用作值。
const a:Bag = new Bag()
所以,小心不要这样做:
class C implements Bag {}
-// 确保类符合一组接口或类型 ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈▶┈┈╮
// 子类这个类 ┈┈┈┈┈┈┈┈↘ ┈┈┈┈┈┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┈
class User extends Account implements Updatable, Serializable {
@@ -413,7 +413,7 @@
static { this.#userCount = -1 }
}
-声明一个可以在你的类方法中改变的类型。
class Box<Type> {
contents: Type
@@ -424,7 +424,7 @@
const stringBox = new Box("a package")
这些功能是 TypeScript 特定的语言扩展,可能永远无法使用当前语法进入 JavaScript。
-class Location {
constructor(public x: number, public y: number) {}
}
@@ -434,7 +434,7 @@
loc.y // 40
TypeScript 特定于类的扩展,可自动将实例字段设置为输入参数。
-abstract class Animal {
abstract getName(): string;
printName() {
@@ -444,7 +444,7 @@
class Dog extends Animal { getName(): { ... } }
一个类可以被声明为不可实现,但可以在类型系统中被子类化。 class 成员也可以。
-import { Syncable, triggersSync, preferCache, required } from "mylib"
@Syncable
@@ -457,7 +457,7 @@
}
您可以在类、类方法、访问器、属性和方法参数上使用装饰器。
-class MyClass {
// 最好将索引数据存储在另一个地方
// 而不是类实例本身。
@@ -470,8 +470,8 @@
}
类可以声明索引签名,与其他对象类型的索引签名相同。
-type A = Awaited<Promise<string>>;
// type A = string
@@ -482,7 +482,7 @@
// type C = number | boolean
这种类型旨在模拟异步函数中的 await 或 Promises 上的 .then() 方法等操作 - 特别是它们递归解包 Promises 的方式。
-interface Props {
a?: number;
b?: string;
@@ -494,7 +494,7 @@
// 但在 'Required<Props>' 类型中是必需的。
使 Type 中的所有属性成为必需
-interface Todo {
title: string;
}
@@ -508,7 +508,7 @@
: Readonly<Type>;
将 Type 中的所有属性设为只读
-interface Todo {
title: string;
description: string;
@@ -528,7 +528,7 @@
});
将 Type
中的所有属性设为可选
interface CatInfo {
age: number;
breed: string;
@@ -544,7 +544,7 @@
// 👉 const cats: Record<CatName, CatInfo>
构造一个具有一组 Keys 类型的属性 Type 的类型
-interface Todo {
name: string;
description: string;
@@ -562,7 +562,7 @@
// 👉 const todo: TodoPreview
从 Type 中选择一组其键在并集 Keys 中的属性
-type T0 = Exclude<"a" | "b" | "c", "a">;
// 👉 type T0 = "b" | "c"
@@ -574,7 +574,7 @@
// 👉 type T2 = string | number
从 UnionType
中排除那些可分配给 ExcludedMembers
的类型
type T0 = Extract<
"a" | "b" | "c", "a" | "f"
>;
@@ -586,7 +586,7 @@
// type T1 = () => void
通过从 Type 中提取所有可分配给 Union 的联合成员来构造一个类型。
-type T0 = NonNullable<
string | number | undefined
>;
@@ -598,7 +598,7 @@
// type T1 = string[]
通过从 Type 中排除 null 和 undefined 来构造一个类型。
-interface Todo {
name: string;
completed: boolean;
@@ -616,7 +616,7 @@
// 👉 const todo: TodoPreview
构造一个具有 Type 属性的类型,但类型 Keys 中的属性除外。
-declare function f1(
arg: { a: number; b: string }
): void;
@@ -638,7 +638,7 @@
// type T5 = never
从函数类型 Type 的参数中使用的类型构造元组类型。
-type T0 = ConstructorParameters<
ErrorConstructor
>;
@@ -658,8 +658,8 @@
// type T3 = unknown[]
从构造函数类型的类型构造元组或数组类型。它产生一个包含所有参数类型的元组类型(如果 Type 不是函数,则类型 never )。
-type Greeting = "Hello, world"
type ShoutyGreeting = Uppercase<Greeting>
// type ShoutyGreeting = "HELLO, WORLD"
@@ -669,7 +669,7 @@
// type MainID = "ID-MY_APP"
将字符串中的每个字符转换为大写版本。
-type Greeting = "Hello, world"
type QuietGreeting = Lowercase<Greeting>
// type QuietGreeting = "hello, world"
@@ -679,19 +679,19 @@
// type MainID = "id-my_app"
将字符串中的每个字符转换为等效的小写字母。
-type LowercaseGreeting = "hello, world";
type Greeting = Capitalize<LowercaseGreeting>;
// type Greeting = "Hello, world"
将字符串中的第一个字符转换为等效的大写字母。
-type UppercaseGreeting = "HELLO WORLD";
type UncomfortableGreeting = Uncapitalize<UppercaseGreeting>;
// type UncomfortableGreeting = "hELLO WORLD"
将字符串中的第一个字符转换为等效的小写字母。
-declare function f1(): {
a: number; b: string
};
@@ -723,7 +723,7 @@
// type T6 = never
构造一个由函数 Type 的返回类型组成的类型。
-type ObjectDescriptor<D, M> = {
data?: D;
// 方法中“this”的类型是 D & M
@@ -753,7 +753,7 @@
obj.moveBy(5, 5);
此实用程序不返回转换后的类型。 相反,它用作上下文 this 类型的标记。 请注意,必须启用 noImplicitThis 标志才能使用此实用程序。
-class C {
x = 0;
y = 0;
@@ -766,7 +766,7 @@
// type T2 = never
构造一个由 Type 中构造函数的实例类型组成的类型。
-function toHex(this: Number) {
return this.toString(16);
}
@@ -778,7 +778,7 @@
}
提取函数类型的 this
参数的类型,如果函数类型没有 this
参数,则为未知。
function toHex(this: Number) {
return this.toString(16);
}
@@ -789,8 +789,8 @@
console.log(fiveToHex());
从 Type 中移除 this 参数。 如果 Type 没有显式声明此参数,则结果只是 Type。 否则,从 Type 创建一个不带此参数的新函数类型。 泛型被删除,只有最后一个重载签名被传播到新的函数类型中。
-JSX 规范是对 ECMAScript 的类似 XML 的语法扩展。
.tsx
扩展名命名您的文件.tsx
文件中使用尖括号类型断言。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;
@@ -828,7 +828,7 @@
}
}
-interface FooProp {
name: string;
X: number;
@@ -844,7 +844,7 @@
);
该组件被定义为一个 JavaScript 函数,其第一个参数是一个 props 对象。 TS 强制它的返回类型必须可分配给 JSX.Element。
-interface CeProps {
children: JSX.Element[] | JSX.Element;
}
@@ -863,7 +863,7 @@
// ...
}
-interface MenuProps extends React.LiHTMLAttributes<HTMLUListElement> { ... }
const InternalMenu = (props: MenuProps, ref?: React.ForwardedRef<HTMLUListElement>) => (
<ul {...props} ref={ref} />
@@ -882,7 +882,7 @@
<Menu.Item /> // ✅ ok
<Menu.SubMenu /> // ✅ ok
-declare namespace JSX {
interface ElementClass {
render: any;
@@ -906,7 +906,7 @@
<NotAValidFactoryFunction />; // ❌ error
默认情况下,JSX.ElementClass
是 {},但可以对其进行扩展,以将 JSX
的使用限制为仅限于符合适当接口的类型。
type Props = {
header: React.ReactNode;
body: React.ReactNode;
@@ -925,7 +925,7 @@
<MyComponent header={<h1>Header</h1>} body={<i>body</i>} />
-// 一个泛型组件
type SelectProps<T> = { items: T[] };
class Select<T> extends React.Component<SelectProps<T>, any> {}
diff --git a/docs/vscode.html b/docs/vscode.html
index 32b630ec..9e778689 100644
--- a/docs/vscode.html
+++ b/docs/vscode.html
@@ -15,10 +15,10 @@
-Quick Reference
这个 VSCode (Visual Studio Code) 快速参考备忘单显示了它的键盘快捷键和命令。
-//div[true()]
//div[@class="head"]
//div[@class="head"][@id="top"]
仅当某些条件为真时才限制节点集。它们可以被链接起来。
-# 比较
//a[@id = "xyz"]
//a[@id != "xyz"]
@@ -335,7 +335,7 @@
//div[@id="head" and position()=2]
//div[(x and y) or not(z)]
-# 在函数内部使用它们
//ul[count(li) > 2]
//ul[count(li[@class='hide']) > 0]
@@ -344,7 +344,7 @@
//ul[li]
您可以在谓词中使用节点。
-//a[1] # 第一个<a>
//a[last()] # 最后一个<a>
//ol/li[2] # 第二个<li>
@@ -352,17 +352,17 @@
//ol/li[position()>1] #:not(:first-child)
将 []
与数字一起使用,或者使用 last()
或 position()
。
a[1][@href='/']
a[@href='/'][1]
顺序很重要,这两个是不同的。
-//section[.//h1[@id='hi']]
如果它有一个具有 id='hi'
的 <h1>
后代,则返回 <section>
。
name() # //[starts-with(name(), 'h')]
text() # //button[text()="Submit"]
# //button/text()
@@ -372,7 +372,7 @@
count() # //table[count(tr)=1]
position() # //ol/li[position()=2]
-
contains() # font[contains(@class,"head")]
starts-with() # font[starts-with(@class,"head")]
ends-with() # font[ends-with(@class,"head")]
@@ -385,16 +385,16 @@
normalize-space()
string-length()
-not(expr) # button[not(starts-with(text(),"Submit"))]
-string()
number()
boolean()
-//ul/li # ul > li
//ul/child::li # ul > li (same)
//ul/following-sibling::li # ul ~ li
@@ -427,7 +427,7 @@
表达式的步骤由 /
分隔,通常用于选择子节点。 这并不总是正确的:您可以使用 ::
指定不同的“轴”。
# 都一样
//ul/li/a
//child::ul/child::li/child::a
@@ -442,7 +442,7 @@
//ul[count(li) > 2]
//ul[count(child::li) > 2]
-# 都一样
//div//h4
//div/descendant-or-self::h4
@@ -452,7 +452,7 @@
//ul//[last()]
//ul/descendant-or-self::[last()]
-您还可以使用其他轴。
-//a | //span
使用 |
连接两个表达式。
//* # 所有元素
count(//*) # 计算所有元素
(//h1)[1]/text() # 第一个 h1 标题的文本
@@ -543,7 +543,7 @@
# ...扩展到 //li[child::span]
//ul/li/.. # 使用 .. 选择父级
-//section[h1[@id='section-name']]
查找直接包含 h1#section-name
的 <section>
h1#section-name
的 <section>
。
(与上面相同,但使用后代或自我而不是孩子)
-./ancestor-or-self::[@class="box"]
像 jQuery
的 $().closest('.box')
一样工作。
//item[@price > 2*@discount]
查找 <item>
并检查其属性
为开发人员分享快速参考备忘清单(主要是方便自己),在看到 Reference 快速参考备忘单,感觉非常简单,造轮子使命感突然来了,造个中文版本的,为了方便自己的技术栈查阅,立马撸起来 :)。
如果您发现此处的备忘单不合适,您可以通过提交 PR 来修复它或提供更好的备忘清单,只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
-上面的列表没有看到你想要的? 您是否正在寻找一些备忘清单或参考资料,或者您有一些片段备忘清单要分享,这是一个最好的机会!
请求添加备忘单
diff --git a/style/style.css b/style/style.css
index 0950802d..cacf9e90 100644
--- a/style/style.css
+++ b/style/style.css
@@ -318,6 +318,13 @@ a.text-grey {
color: rgb(148 163 184/1);
}
+body:not(.home) .h2wrap > h2 a::after {
+ content: '#';
+ padding-right: 0.5rem;
+ --tw-text-opacity: 1;
+ color: rgb(16 185 129/var(--tw-text-opacity));
+}
+
.wrap-header.h3wrap {
z-index: 0;
display: flex;