mac使用小技巧
更改终端用户名
/etc/bashrc文件中的PS1=’\h:\W \u$ ‘,其中\h代表主机名,\u代表用户名
例如:比如修改成:PS1=’abc:\W 123$ ‘ , 终端显示如下:地址
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
hexo new "My New Post"
More info: Writing
hexo server
More info: Server
hexo generate
More info: Generating
hexo deploy
More info: Deployment
- Hexo 的思维导图插件
- 前言
- 使用方法
- 一
- 二
- 三
- 四
- 太长不看
- 参考资料
Class
vs Hooks
- 测试 测试测试
for i in a:
print(i)
(变量,函数)
的一个组件.并且state的初始值就是外部调用useState的时候传入的参数render
方法来触发视图更新function App() {
const [num, setNum] = useState < number > 0;
return (
<div>
<div>num: {num}</div>
<button onClick={() => setNum(num + 1)}>加 1</button>
</div>
);
}
function render() {
ReactDOM.render(<App />, document.getElementById("root"));
}
let state: any;
function useState<T>(initialState: T): [T, (newState: T) => void] {
state = state || initialState;
function setState(newState: T) {
state = newState;
render();
}
return [state, setState];
}
render(); // 首次渲染
import React from "react";
import ReactDOM from "react-dom";
const states: any[] = [];
let cursor: number = 0;
function useState<T>(initialState: T): [T, (newState: T) => void] {
const currenCursor = cursor;
states[currenCursor] = states[currenCursor] || initialState; // 检查是否渲染过
function setState(newState: T) {
states[currenCursor] = newState;
render();
}
++cursor; // update: cursor
return [states[currenCursor], setState];
}
function App() {
const [num, setNum] = useState < number > 0;
const [num2, setNum2] = useState < number > 1;
return (
<div>
<div>num: {num}</div>
<div>
<button onClick={() => setNum(num + 1)}>加 1</button>
<button onClick={() => setNum(num - 1)}>减 1</button>
</div>
<hr />
<div>num2: {num2}</div>
<div>
<button onClick={() => setNum2(num2 * 2)}>扩大一倍</button>
<button onClick={() => setNum2(num2 / 2)}>缩小一倍</button>
</div>
</div>
);
}
function render() {
ReactDOM.render(<App />, document.getElementById("root"));
cursor = 0; // 重置cursor
}
render(); // 首次渲染
let tag = true;
function App() {
const [num, setNum] = useState < number > 0;
// 只有初次渲染,才执行
if (tag) {
const [unusedNum] = useState < number > 1;
tag = false;
}
const [num2, setNum2] = useState < number > 2;
return (
<div>
<div>num: {num}</div>
<div>
<button onClick={() => setNum(num + 1)}>加 1</button>
<button onClick={() => setNum(num - 1)}>减 1</button>
</div>
<hr />
<div>num2: {num2}</div>
<div>
<button onClick={() => setNum2(num2 * 2)}>扩大一倍</button>
<button onClick={() => setNum2(num2 / 2)}>缩小一倍</button>
</div>
</div>
);
}
变量名 | Cursor |
---|---|
num | 0 |
unusedNum | 1 |
num2 | 2 |
function App() {
const [num, setNum] = useState(0);
useEffect(() => {
// 模拟异步请求后端数据
setTimeout(() => {
setNum(num + 1);
}, 1000);
}, []);
return <div>{!num ? "请求后端数据..." : `后端数据是 ${num}`}</div>;
}
// 还是利用 Array + Cursor的思路
const allDeps: any[][] = [];
let effectCursor: number = 0;
function useEffect(callback: () => void, deps: any[]) {
if (!allDeps[effectCursor]) {
// 初次渲染:赋值 + 调用回调函数
allDeps[effectCursor] = deps;
++effectCursor;
callback();
return;
}
const currenEffectCursor = effectCursor;
const rawDeps = allDeps[currenEffectCursor];
// 检测依赖项是否发生变化,发生变化需要重新render
const isChanged = rawDeps.some(
(dep: any, index: number) => dep !== deps[index]
);
if (isChanged) {
callback();
}
++effectCursor;
}
function render() {
ReactDOM.render(<App />, document.getElementById("root"));
effectCursor = 0; // 注意将 effectCursor 重置为0
}
function App() {
const [num, setNum] = useState < number > 0;
const [num2] = useState < number > 1;
// 多次触发
// 每次点击按钮,都会触发 setNum 函数
// 副作用检测到 num 变化,会自动调用回调函数
useEffect(() => {
console.log("num update: ", num);
}, [num]);
// 仅第一次触发
// 只会在compoentDidMount时,触发一次
// 副作用函数不会多次执行
useEffect(() => {
console.log("num2 update: ", num2);
}, [num2]);
return (
<div>
<div>num: {num}</div>
<div>
<button onClick={() => setNum(num + 1)}>加 1</button>
<button onClick={() => setNum(num - 1)}>减 1</button>
</div>
</div>
);
}
Class | Hooks |
---|---|
代码逻辑清晰(构造函数、componentDidMount 等) | 需要配合变量名和注释 |
不容易内存泄漏 | 容易发生内存泄漏 |
import React, { useState } from "react";
import ReactDOM from "react-dom";
let func: any;
setInterval(() => {
typeof func === "function" && func(Date.now());
console.log("interval");
}, 1000);
function App() {
const [num, setNum] = useState < number > 0;
if (typeof func !== "function") {
func = setNum;
}
return <div>{num}</div>;
}
function render() {
ReactDOM.render(<App />, document.getElementById("root"));
}
render();
“在软件工程中,统一建模语言(UML)中的类图是一种静态结构图,它通过显示系统的类,其属性,操作(或方法)以及对象之间的关系来描述系统的结构。 ”。维基百科
类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模,以及用于将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类表示主要元素,应用程序中的交互以及要编程的类。
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
pie "Dogs" : 386 "Cats" : 85 "Rats" : 15
序列图是一个交互图,它显示进程如何相互操作以及以什么顺序进行操作。
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great!
参加者
可以像本页第一个示例中那样隐式定义参与者。在图表源文本中按出现顺序呈现参与者或演员。有时,您可能想以不同于第一条消息出现的顺序来显示参与者。通过执行以下操作可以指定演员的出场顺序
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
sequenceDiagram participant John participant Alice Alice->>John: Hello John, how are you? John-->>Alice: Great!
演员可以具有方便的标识符和描述性标签。
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J->>A: Great!
消息可以是实线或虚线显示的两种。
[Actor][Arrow][Actor]:Message text
类型 | 描述 |
---|---|
-> | 实线无箭头 |
-> | 虚线无箭头 |
->> | 带箭头的实线 |
->> | 带箭头的虚线 |
-X | 实线,末端带有叉号(异步) |
- X | 虚线末端带有叉号(异步) |
可以激活和停用角色。(de)激活可以是专用的声明:
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John
通过在消息箭头后面添加+/ -后缀,还有一种快捷方式标记:
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
sequenceDiagram Alice->>+John: Hello John, how are you? John-->>-Alice: Great!
可以为同一演员堆叠激活:
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great!
可以在顺序图中添加注释。这是通过注解[[右| 左| 结束] [演员]:笔记内容中的文字
请参阅以下示例
sequenceDiagram
participant John
Note right of John: Text in note
sequenceDiagram participant John Note right of John: Text in note
也可以创建跨越两个参与者的笔记:
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
sequenceDiagram Alice->John: Hello John, how are you? Note over Alice,John: A typical interaction
loop Loop text
... statements ...
end
请参阅以下示例:
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
sequenceDiagram Alice->John: Hello John, how are you? loop Every minute John-->Alice: Great! end
可以在顺序图中表达替代路径。这是通过符号来完成的
alt Describing text
... statements ...
else
... statements ...
end
或者是否有可选的序列(如果没有其他序列)。
opt Describing text
... statements ...
end
请参阅以下示例:
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end
通过提供彩色背景矩形可以突出显示流。这是通过符号来完成的
颜色是使用rgb和rgba语法定义的。
rect rgb(0, 255, 0)
... content ...
end
Class | Description |
---|---|
actor | Style for the actor box at the top of the diagram. |
text.actor | Styles for text in the actor box at the top of the diagram. |
actor-line | The vertical line for an actor. |
messageLine0 | Styles for the solid message line. |
messageLine1 | Styles for the dotted message line. |
messageText | Defines styles for the text on the message arrows. |
labelBox | Defines styles label to left in a loop. |
labelText | Styles for the text in label for loops. |
loopText | Styles for the text in the loop box. |
loopLine | Defines styles for the lines in the loop box. |
note | Styles for the note box. |
noteText | Styles for the text on in the note boxes. |
graph TD
Start --> Stop
graph TD Start --> Stop
graph LR
Start --> Stop
graph LR Start --> Stop
TB-顶底
BT-底部顶部
RL-右左
LR-左右
TD-与TB相同
graph LR
id
graph LR id
请注意,id是框中显示的ID。
graph LR
id1[This is the text in the box]
graph LR id1[This is the text in the box]
也可以在不同于ID的框中设置文本。如果多次执行此操作,则这是将要使用的节点的最后一个文本。同样,如果稍后定义节点的边缘,则可以省略文本定义。渲染框时将使用先前定义的那个。
graph LR
id1(This is the text in the box)
graph LR id1(This is the text in the box)
graph LR
id1((This is the text in the circle))
graph LR id1((This is the text in the circle))
graph LR
id1>This is the text in the box]
graph LR id1>This is the text in the box]
当前,只有上面的形状是可能的,而不是它的镜子。这可能会随着将来的版本而改变。
graph LR
id1{This is the text in the box}
graph LR id1{This is the text in the box}
graph TD
A[/Christmas\]
graph TD A[/Christmas\]
graph TD
B[\Go shopping/]
graph TD B[\Go shopping/]
节点可以通过链接/边缘连接。可以具有不同类型的链接,也可以将文本字符串附加到链接。
graph LR
A-->B
graph LR A-->B
graph LR
A --- B
graph LR A --- B
graph LR
A-- This is the text ---B
graph LR A-- This is the text ---B
或者
graph LR
A---|This is the text|B
graph LR
A-->|text|B
graph LR A-->|text|B
或者
graph LR
A-- text -->B
graph LR;
A-.->B;
graph LR; A-.->B;
graph LR
A-. text .-> B
graph LR A-. text .-> B
graph LR
A ==> B
graph LR A ==> B
graph LR
A == text ==> B
graph LR A == text ==> B
可以按如下所示在同一行中声明许多链接:
graph LR
A -- text --> B -- text2 --> C
graph LR A -- text --> B -- text2 --> C
graph LR
id1["This is the (text) in the box"]
graph LR id1["This is the (text) in the box"]
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
graph LR A["A double quote:#quot;"] -->B["A dec char:#9829;"]
subgraph title
graph definition
end
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end
可以将click事件绑定到节点,单击可能导致JavaScript回调或链接,该链接将在新的浏览器选项卡中打开。注意:使用securityLevel=’strict’时将禁用此功能,使用时将启用securityLevel=’loose’。
click nodeId callback
<script>
var callback = function(){
alert('A callback was triggered');
}
<script>
工具提示文本用双引号引起来。工具提示的样式由.mermaidTooltip类设置。
graph LR; A-->B; click A callback "Tooltip for a callback" click B "http://www.github.com" "This is a tooltip for a link"
graph LR;
A-->B;
click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link"
可以设置链接样式。例如,您可能想要设置在流程中向后移动的链接的样式。由于链接没有ID的方式与节点相同,因此需要某种其他方式来确定链接应附加到的样式。在图表中定义链接时使用的订单号代替id。在下面的示例中,linkStyle语句中定义的样式将属于图中的第四个链接:
linkStyle 3 stroke:#ff3,stroke-width:4px;
可以将特定样式(例如,较粗的边框或不同的背景颜色)应用于节点。
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
每次定义样式时,更方便的方法是定义一类样式,并将该类附加到应具有不同外观的节点上。
类定义如下例所示:
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
将类附加到节点的操作如下:
class nodeId1 className;
也可以在一个语句中将类附加到节点列表:
class nodeId1,nodeId2 className;
也可以以css样式预定义可从图形定义中应用的类,如下例所示:
示例样式:
<style>
.cssClass > rect{
fill:#FF0000;
stroke:#FFFF00;
stroke-width:4px;
}
</style>
示例定义:
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
graph LR;
A-->B[AAABBB];
B-->D;
class A cssClass;
如果一个类被命名为default,它将被分配给所有没有特定类定义的类。
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
可以从fontawesome添加图标。
通过语法fa:#icon类名#来访问图标。
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
graph TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); B-->E(A fa:fa-camera-retro perhaps?);
在图形声明中,语句现在也可以不使用分号结束。在0.2.16版本之后,以分号结束图语句只是可选的。因此,下面的图声明与图的旧声明同样有效。
顶点和链接之间只能有一个空格。但是,顶点和其文本以及链接和其文本之间不应有任何空格。图形声明的旧语法也将起作用,因此,此新功能是可选的,旨在提高可读性。
以下是图边缘的新声明,该声明与图边缘的旧声明同样有效。
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]
是否可以调整渲染流程图的宽度。
这是通过定义mermaid.flowchartConfig或通过CLI在配置中使用json文件来完成的。mermaidCLI页面中描述了如何使用CLI。可以将mermaid.flowchartConfig设置为带有配置参数或相应对象的JSON字符串。
graph TD; A-->B; A-->C; B-->D; C-->D;
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
gitGraph: options { "nodeSpacing": 130, "nodeRadius": 5 } end commit commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
本身是针对MVC编程,不符合前端MVVM的浪潮
基于原生XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案,jquery整个项目太大,单纯使用ajax却要引入整个jquery非常不合理(采取个性化打包方案又不能享受cdn服务)
ajax不支持浏览器的back按钮
安全问题ajax暴露了与服务器交互的细节
对搜索引擎的支持比较弱
破坏程序的异常机制
不容易调试
从node.js创建http请求
支持Promise API
客户端防止CSRF(网站恶意利用)
提供了一些并发请求的接口