mac使用小技巧

Posted on 2019-11-20

mac使用小技巧

更改终端用户名

/etc/bashrc文件中的PS1=’\h:\W \u$ ‘，其中\h代表主机名，\u代表用户名
例如:
比如修改成：PS1=’abc:\W 123$ ‘ ，终端显示如下:地址

Hello World

Posted on 2019-11-17

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.

Quick Start

Create a new post

hexo new "My New Post"

More info: Writing

Run server

hexo server

More info: Server

Generate static files

hexo generate

More info: Generating

Deploy to remote sites

hexo deploy

More info: Deployment

test

Posted on 2019-11-18 | In React

摘要

当使用Hook特性编写组件的时候,总能感觉到它的简洁和方便.当然,天下没有{免费的午餐},它牺牲了可读性并且存在内存泄漏风险,但这并不妨碍探索它的能力

Hexo 的思维导图插件

前言

使用方法

一

二

三

四

太长不看

参考资料

彻底搞懂ReactHooks的原理和实现

Posted on 2019-11-18 | In React

摘要

当使用Hook特性编写组件的时候,总能感觉到它的简洁和方便.当然,天下没有{免费的午餐},它牺牲了可读性并且存在内存泄漏风险,但这并不妨碍探索它的能力

在正式开始前,我打算先提出几个问题,这些问题会在源码实现的过程中,逐步解决

useState 的实现原理
为什么不能在循环、判断内部使用Hook
useEffect的实现原理
useEffect的应用场景
Class vs Hooks

以上代码均由TypeScript来实现,文中全部dome均在github中实现

点击查看详细内容

- 测试测试测试


for i in a:
    print(i)

### useState的实现原理

当调用useState的时候,回返回形如(变量,函数)的一个组件.并且state的初始值就是外部调用useState的时候传入的参数
理清楚了传参和返回值,再来看下useState还做了些什么.正如下面的代码所示,当点击按钮的时候,执行setNum.状态num被更新,并且UI识图更新.显然,useState翻的用于更改状态的函数,自动调用了render 方法来触发视图更新

function App() {
  const [num, setNum] = useState < number > 0;

  return (
    <div>
      <div>num: {num}</div>
      <button onClick={() => setNum(num + 1)}>加 1</button>
    </div>
  );
}

有了上面的实验,借助一下闭包,封装一个setState如下:

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(); // 首次渲染

这是一个简易能用的useState雏形,它也解决了文章开始提到的{useState的实现原理}这个问题,但如果在函数内生命多个state,在当前代码中,只有第一个state 是生效的(请看state=state||initialState)

为什么不能在循环、判断内部使用Hook

先不要考虑题目提及的问题.思路还是回到如何让useState支持多个state.React Hook 看起来非常 Magic 的实现，本质上还是通过 Array 来实现的
前面 useState 的简单实现里，初始的状态是保存在一个全局变量中的。以此类推，多个状态，应该是保存在一个专门的全局容器中。这个容器，就是一个朴实无华的 Array 对象。具体过程如下：

第一次渲染时候，根据 useState 顺序，逐个声明 state 并且将其放入全局 Array 中。每次声明 state，都要将 cursor 增加 1。
更新 state，触发再次渲染的时候。cursor 被重置为 0。按照 useState 的声明顺序，依次拿出最新的 state 的值，视图更新。

请看下面这张图，每次使用 useState，都会向 STATE 容器中添加新的状态。

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(); // 首次渲染

此时，如果想在循环、判断等不在函数组件顶部的地方使用 Hook，如下所示：

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>
  );
}

由于在条件判断的逻辑中，重置了tag=false，因此此后的渲染不会再进入条件判断语句。看起来好像没有问题？但是，由于 useState 是基于 Array+Cursor 来实现的，第一次渲染时候，state 和 cursor 的对应关系如下表

变量名	Cursor
num	0
unusedNum	1
num2	2

当点击事件触发再次渲染，并不会进入条件判断中的 useState。所以，cursor=2 的时候对应的变量是 num2。而其实 num2 对应的 cursor 应该是 3。就会导致setNum2并不起作用
当点击事件触发再次渲染，并不会进入条件判断中的 useState。所以，cursor=2 的时候对应的变量是 num2。而其实 num2 对应的 cursor 应该是 3。就会导致setNum2并不起作用

useEffect 的实现原理

在探索 useEffect 原理的时候，一直被一个问题困扰：useEffect 作用和用途是什么？当然，用于函数的副作用这句话谁都会讲。举个例子吧

function App() {
  const [num, setNum] = useState(0);

  useEffect(() => {
    // 模拟异步请求后端数据
    setTimeout(() => {
      setNum(num + 1);
    }, 1000);
  }, []);

  return <div>{!num ? "请求后端数据..." : `后端数据是 ${num}`}</div>;
}

这段代码，虽然这样组织可读性更高，毕竟可以将这个请求理解为函数的副作用。但这并不是必要的。完全可以不使用useEffect，直接使用setTimeout，并且它的回调函数中更新函数组件的 state
在阅读A Complete Guide to useEffect和构建你自己的 Hooks之后，我才理解 useEffect 的存在的必要性和意义
在 useEffect 的第二个参数中，我们可以指定一个数组，如果下次渲染时，数组中的元素没变，那么就不会触发这个副作用（可以类比 Class 类的关于 nextprops 和 prevProps 的生命周期）。好处显然易见，相比于直接裸写在函数组件顶层，useEffect 能根据需要，避免多余的 render
下面是一个不包括销毁副作用功能的 useEffect 的 TypeScript 实现

// 还是利用 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
}

对于 useEffect 的实现，配合下面案例的使用会更容易理解。当然，你也可以在这个 useEffect 中发起异步请求，并在接受数据后，调用 state 的更新函数，不会发生爆栈的情况

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>
  );
}

useEffect 第一个回调函数可以返回一个用于销毁副作用的函数，相当于 Class 组件的 unmount 生命周期。这里为了方便说明，没有进行实现
在这一小节中，尝试解答了「🤔️ useEffect 的实现原理」和「🤔️ useEffect 的应用场景」这两个问题

Class VS Hooks

虽然 Hooks 看起来更酷炫，更简洁。但是在实际开发中我更倾向于使用 Class 来声明组件。两种方法的对比如下

Class	Hooks
代码逻辑清晰（构造函数、componentDidMount 等）	需要配合变量名和注释
不容易内存泄漏	容易发生内存泄漏

总的来说，Hooks 对代码编写的要求较高，在没有有效机制保证代码可读性、规避风险的情况下，Class 依然是我的首选。关于内存泄漏，下面是一个例子（目前还没找到方法规避这种向全局传递状态更新函数的做法

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();

参考链接

ReactHooks的原理和实现
 useEffect 完整指南
 React Hooks 原理

第四篇笔记

Posted on 2019-11-18 | In web

流程图-基本语法

这声明了一个从上到下（TD或TB）定向的图形

graph TD
    Start --> Stop

graph TD
    Start --> Stop

类图

Posted on 2019-11-18 | In web

类图-基本语法

“在软件工程中，统一建模语言（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

顺序图

Posted on 2019-11-18 | In web

顺序图-基本语法

序列图是一个交互图，它显示进程如何相互操作以及以什么顺序进行操作。

渲染序列图

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键

可以在顺序图中表达替代路径。这是通过符号来完成的

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.

流程图

Posted on 2019-11-18 | In web

流程图-基本语法

这声明了一个从上到下（TD或TB）定向的图形

graph TD
    Start --> Stop

graph TD
    Start --> Stop

这声明了一个从左到右的图（LR）

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\]

梯形alt

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

nodeId是节点的ID
callback是在显示图形的页面上定义的javascript函数的名称，该函数将使用nodeId作为参数来调用。
以下是工具提示用法的示例：

<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类

也可以以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

可以从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字符串。

图表示例代码

Posted on 2019-11-18 | In web

简单图表

简易流程图

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

git图

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

为什么用axios不用ajax

Posted on 2019-11-17

为什么用axios不用ajax

区别：axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios

优缺点

ajax

本身是针对MVC编程，不符合前端MVVM的浪潮
基于原生XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案，jquery整个项目太大，单纯使用ajax却要引入整个jquery非常不合理（采取个性化打包方案又不能享受cdn服务）
ajax不支持浏览器的back按钮
安全问题ajax暴露了与服务器交互的细节
对搜索引擎的支持比较弱
破坏程序的异常机制
不容易调试

axios

从node.js创建http请求
支持Promise API
客户端防止CSRF（网站恶意利用）
提供了一些并发请求的接口

Tim wong

10 posts

2 categories

1 tags

RSS