分布式协议一口气学完

一、Raft 协议

1.1 基础概念

Raft 算法是通过一切以领导者为准的方式，实现一系列数据的共识和各节点日志的一致。Raft是强领导模型，集群中只能有一个领导者。

成员身份：领导者（Leader）、跟随者（Follower）和候选者（Candidate）。

图1 成员身份

• 领导者：集群中霸道总裁，一切以我为准，处理写请求、管理日志复制和不断地发送心跳信息。


• 跟随者：普通成员，处理领导者发来的消息，发现领导者心跳超时，推荐自己成为候选人。


• 候选人：先给自己投一票，然后请求其他集群节点投票给自己，得票多者成为新的领导者。


• 任期编号：每任领导者都有任期编号。当领导者心跳超时，跟随者会变成候选人，任期编号 +1，然后发起投票。任期编号小的服从编号大的。


• 心跳超时：每个跟随者节点都设置了随机心跳超时时间，目的是避免跟随者们同时成为候选人，同时发起投票。


• 选举超时：每轮选举的结束时间，随机选举超时时间可以避免多个候选人同时结束选举未果，然后同时发起下一轮选举

1.2 领导选举

1.2.1 选举规则

• 领导者周期性地向跟随者发送心跳消息，告诉跟随者我是领导者，阻止跟随者发变成候选人发起新选举；


• 如果跟随者的随机心跳超时了，那么认为没有领导者了，推荐自己为候选人，发起新的选举；


• 在一轮选举中，赢得一半以上选票的候选人，即成为新的领导者；


• 在一轮选举中，每个节点对每个任期编号的选举只能投出一票，先来先服务原则；


• 日志完整性高（也就是最后一条日志项对应的任期编号值更大，索引号更大）的跟随者A拒绝给完整性低的候选人B投票，即使B的任期编号大；

1.2.2 选举动画

图2 初始选举

图3 领导者宕机/断网

图4 第一轮选举未果，发起第二轮选举

1.3 日志复制

日志项（Log Entry）：是一种数据格式，它主要包含索引值（Log index）、任期编号（Term）和 指令（Command）。

• 索引值：它是用来标识日志项的，是一个连续的、单调递增的整数值。


• 任期编号：创建这条日志项的领导者的任期编号。


• 指令：一条由客户端请求指定的、服务需要执行的指令。

图5 日志信息

1.3.1 日志复制动画

图6 简单日志复制

图7 复杂日志复制

1.3.2 日志恢复

每次选举出来的Leader一定包含在多数节点上最新的已经提交的日志，新的Leader将会覆盖其他节点上不一致的数据。

虽然新Leader一定包括上一个Term的Leader已提交(Committed)日志，但是可能也包含上一个Term的Leader的未提交(Uncommitted)日志。

这部分未提交日志需要转变为Committed，相对比较麻烦，需要考虑Leader多次切换且未完成日志恢复，需要保证最终提案是一致的、确定的，不然就会产生所谓的幽灵复现问题。

为了将上一个Term未提交的日志转为已提交，Raft算法要求Leader当选后立即追加一条Noop的特殊内部日志，并立即同步到其它节点，实现前面未提交日志全部隐式提交。

这样保证客户端不会读到未提交数据，因为只有Noop被大多数节点同意并提交了之后（这样可以连带往期日志一起同步），服务才会对外正常工作；

Noop日志本身是一个分界线，Noop之前的日志被提交，之后的日志将会被丢弃。Noop日志仅包含任期编号和日志索引值，没有指令。

日志“幽灵复现”的场景

图8

第一步，A是领导者，在本地记录4和5日志，并没有提交，然后挂了。

图9

第二步，由于B的日志索引值比C的大，B成为了领导者，仅把日志3同步给了C，然后挂了。

图10

第三步，A恢复了，并且成为了领导者，然后把未提交的日志4和5同步给了B和C（C在A成为了领导者之后、同步日志之前恢复了），然后ABC都提交了日志4和5，就这样原本客户端写失败的日志4和5复活了，进而客户端会读到其认为未提交的日志（实际上集群日志已提交）。

Noop解决日志复现

第一步，同上面一样。

第二步，由于B的日志索引值比C的大，B成为了领导者，这次不仅把日志3同步给了C，还记录了一个Noop日志，并且同步给了C。

图11

第三步，当A恢复了，想成为领导者，发现自己的日志任期编号和日志索引值都不是最大的，即使B挂了也还有C，A也就成为不了领导者，乖乖使用B的日志覆盖自己的日志。

1.4 成员变更

集群成员变更最大的风险是可能同时出现 2 个领导者。比如在成员变更时，节点 A、B 和 C 之间发生了分区错误，节点 A、B 组成旧集群（ABC）中的“大多数”。

而节点 C 和新节点 D、E 组成了新集群（ABCDE）的“大多数”，它们可能会选举出新的领导者（比如节点 C）。结果出现了同时存在 2 个领导者的情况。违反了Raft协议中领导者唯一性原则。

图12 集群（ABC）同时增加节点D和E

最初解决办法是联合共识（Joint Consensus），但实现起来难，后来 Raft 的作者就提出了一种改进后的方法，单节点变更（single-server changes）。

在正常情况下，旧集群的“大多数”和新集群的“大多数”都会有一个重叠的节点。

图13 集群（ABCD）增加新节点E

图14 集群（ABCDE）删除节点A

图15 集群（ABC）增加新节点D

图16 集群（ABCD）删除节点A

需要注意的是，在分区错误、节点故障等情况下，如果并发执行单节点变更，那么就可能出现一次单节点变更尚未完成，新的单节点变更又在执行，导致集群出现 2 个领导者的情况。

二、Gossip 协议

Gossip协议，顾名思义，就像流言蜚语一样，利用一种随机、带有传染性的方式，将信息传播到整个网络中，并在一定时间内，使得系统内的所有节点数据一致。Gossip其实是一种去中心化思路的分布式协议，解决信息在集群中的传播和最终一致性。

2.1 原理

Gossip协议的消息传播主要有两种：反熵（Anti-Entropy）和谣言传播（Rumor-Mongering）。

2.1.1 反熵：节点相对固定，节点数量不多，以固定概率传播所有的数据

每个节点周期性地随机选择其他节点，通过互相交换各自的所有数据来消除两者之间的差异，实现数据的最终一致性。反熵非常可靠，但每次节点两两交换各自的所有数据会带来非常大的通信负担，因此不会频繁使用。通过引入校验和等机制，可以降低需要对比的数据量和传播消息量。

反熵 使用“simple epidemics”方式，其包含两种状态：susceptible和infective，这种模型也称为SI model。处于infective状态的节点代表其有数据更新，并且会将这个数据分享给其他节点；处于susceptible状态的节点代表其并没有收到来自其他节点的更新。

图17 反熵

2.2.2 谣言传播：节点动态变化，节点数量较多，仅传播新到达的数据

当一个节点有了新信息后，这个节点变成活跃状态，并周期性地向其他节点传播新信息。直到所有的节点都知道该新信息。由于节点之间只传播新信息，所以大大减少了通信负担。

谣言传播 使用“complex epidemics”方法，比反熵 多了一种状态：removed，这种模型也称为SIR model。处于removed状态的节点说明其已经接收到来自其他节点的更新，但是其并不会将这个更新分享给其他节点。因为谣言消息会在某个时间标记为removed，然后不会再被传播给其他节点，所以谣言传播有极小概率使得所有节点数据不一致。

图18 谣言传播

一般来说，为了在通信代价和可靠性之间取得折中，需要将这两种方法结合使用。

2.2 通信方式

节点间的交互主要有三种方式：推、拉和推/拉

图19 节点状态

2.2.1 推送模式（push）

节点A随机选择联系节点B，并向其发送自己的信息，节点B在收到信息后比较/更新自己的数据。

图20 推方式

2.2.2 拉取模式（pull）

节点A随机选择联系节点B，从对方获取信息，节点A在收到信息后比较/更新自己的数据。

图21 拉方式

2.2.3 推/拉模式（push/pull）

节点A向选择的节点B发送信息，同时从对方获取信息，节点A和节点B在收到信息后各自比较/更新自己的数据。

图22 推/拉方式

2.3 优缺点

• 优点
  
  
  
  • 可扩展性（Scalable）: Gossip协议是可扩展的，一般需要 O(logN) 轮就可以将信息传播到所有的节点，其中N代表节点的个数。每个节点仅发送固定数量的消息，并且与网络中节点数目无关。在数据传送时，节点并不会等待消息的Ack，所以消息传送失败也没有关系，因为可以通过其他节点将消息传递给之前传送失败的节点。允许节点的任意增加和减少，新增节点的数据最终会与其他节点一致。
  
  
  • 容错（Fault-tolerance）: 网络中任何节点的重启或者宕机都不会影响 Gossip 消息的传播，具有天然的分布式系统容错特性。
  
  
  • 健壮性（Robust）: Gossip协议是去中心化的协议，集群中的所有节点都是对等的，没有特殊的节点，所以任何节点出现问题都不会阻止其他节点继续发送消息。任何节点都可以随时加入或离开，而不会影响系统的整体服务质量。
  
  
  • 最终一致性（Convergent consistency）: Gossip协议实现信息指数级的快速传播，因此在有新信息需要传播时，消息可以快速地发送到全局节点，在有限的时间内能够做到所有节点都拥有最新的数据。
  
  
  
  


• 缺点
  
  
  
  • 消息延迟：节点随机向少数几个节点发送消息，消息最终是通过多个轮次的散播而到达全网，不可避免的造成消息延迟。
  
  
  • 消息冗余：节点定期随机选择周围节点发送消息，而收到消息的节点也会重复该步骤，不可避免地引起同一节点消息多次接收，增加消息处理压力。
  
  
  
  

三、参考

• raft.github.io


• thesecretlivesofdata.com/raft/


• Raft算法（一）：如何选举领导者？


• Raft算法（二）：如何复制日志？


• Raft算法（三）：如何解决成员变更的问题？


• 如何解决分布式系统中的“幽灵复现”？


• Gossip协议：流言蜚语，原来也可以实现一致性


• 浅谈集群版Redis和Gossip协议，它们之间的联系及用法


• 分布式一致协议Gossip协议


• 分布式原理：一文了解 Gossip 协议


• 从Ping-Pong消息学习Gossip协议的实现

前言

之前面试经常被问到 CSRF， 跨站请求伪造

大概流程比较简单， 大概就是用户登录了A页面，存下来登录凭证（cookie）， 攻击者有诱导受害者打开了B页面， B页面中正好像A发送了一个跨域请求，并把cookie进行了携带， 欺骗浏览器以为是用户的行为，进而达到执行危险行为的目的，完成攻击

上面就是面试时，我们通常的回答， 但是到底是不是真是这样呢? 难道这么容易伪造吗？于是我就打算试一下能不能实现

接下来，我们就通过node起两个服务 A服务（端口3000）和B服务（端口4000）， 然后通过两个页面 A页面、和B页面模拟一下CSRF。

我们先约定一下 B页面是正常的页面， 起一个 4000 的服务， 然后 A页面为伪造者的网站， 服务为3000

先看B页面的代码, B页面有一个登录，和一个获取数据的按钮， 模拟正常网站，需要登录后才可以获取数据

<body>

    <div>

      正常 页面 B

      <button onclick="login()">登录</button>

      <button onclick="getList()">拿数据</button>

      <ul class="box"></ul>

      <div class="tip"></div>

    </div>

  </body>

  <script>

    async function login() {

      const response = await fetch("http://localhost:4000/login", {

        method: "POST",

      });

      const res = await response.json();

      console.log(res, "writeCookie");

      if (res.data === "success") {

        document.querySelector(".tip").innerHTML = "登录成功， 可以拿数据";

      }

    }



    async function getList() {

      const response = await fetch("http://localhost:4000/list", {

        method: "GET",

      });



      if (response.status === 500) {

        document.querySelector(".tip").innerHTML = "cookie失效，请先登录！";

        document.querySelector(".box").innerHTML = "";

      } else {

        document.querySelector(".tip").innerHTML = "";

        const data = await response.json();

        let html = "";

        data.map((el) => {

          html += `<div>${el.id} - ${el.name}</div>`;

        });

        document.querySelector(".box").innerHTML = html;

      }

    }

  </script>

在看B页面的服务端代码如下：

const express = require("express");

const app = express();



app.use(express.json()); // json

app.use(express.urlencoded({ extends: true })); // x-www-form-urlencoded



app.use((req, res, next) => {

  res.header("Access-Control-Allow-Origin", "*");

  // 允许客户端跨域传递的请求头

  res.header("Access-Control-Allow-Headers", "Content-Type");

  next();

});



app.use(express.static("public"));



app.get("/list", (req, res) => {

  const cookie = req.headers.cookie;

  if (cookie !== "user=allow") {

    res.sendStatus("500");

  } else {

    res.json([

      { id: 1, name: "zhangsan" },

      { id: 2, name: "lisi" },

    ]);

  }

});



app.post("/login", (req, res) => {

  res.cookie("user", "allow", {

    expires: new Date(Date.now() + 86400 * 1000),

  });

  res.send({ data: "success" });

});



app.post("/delete", (req, res) => {

  const cookie = req.headers.cookie;

  if (req.headers.referer !== req.headers.host) {

    console.log("should ban!");

  }

  if (cookie !== "user=allow") {

    res.sendStatus("500");

  } else {

    res.json({

      data: "delete success",

    });

  }

});



app.listen(4000, () => {

  console.log("sever 4000");

});

B 服务有三个接口， 登录、获取列表、删除。 再触发登录接口的时候，会像浏览器写入cookie， 再删除或者获取列表的时候，都先检测有没有将指定的cookie传回，如果有就认为有权限

然后我们打开 http://localhost:4000/B.html 先看看B页面功能是否都正常

我们看到此时 B 页面功能和接口都是正常的， cookie 也正常进行了设置，每次获取数据的时候，都是会携带cookie到服务端校验的

那么接下来我们就通过A页面，起一个3000端口的服务，来模拟一下跨域情况下，能否完成获取 B服务器数据，调用 B 服务器删除接口的功能

A页面代码

  <body>

    <div>

      伪造者页面 A

      <form action="http://localhost:4000/delete" method="POST">

        <input type="hidden" name="account" value="xiaoming" />

      </form>

      <script>

        // 这行可以放到控制台执行，便于观察效果

        // document.forms[0].submit();

      </script>

    </div>

    <ul class="box"></ul>

    <div class="tip"></div>

</body>

A页面服务端代码

  <body>

    <div>

      伪造者页面 A

      <form action="http://localhost:4000/delete" method="POST">

        <input type="hidden" name="account" value="xiaoming" />

      </form>

      <script>

        // 这行可以放到控制台输入

        // document.forms[0].submit();

      </script>

      <script src="http://localhost:4000/list"></script>

    </div>

  </body>

于是在我们 访问 http://localhost:3000/A.html 页面的时候发现， 发现list列表确实，请求到了， 控制台输入 document.forms[0].submit() 时发现，确实删除也发送成功了， 是不是说明csrf就成功了呢， 但是其实还不是， 关键的一点是， 我们在B页面设置cookie的时候， domain设置的是 localhost 那么其实在A页面， 发送请求的时候cookie是共享的状态， 真实情况下，肯定不会是这样， 那么为了模拟真实情况， 我们把 http://localhost:3000/A.html 改为 http://127.0.0.1:3000/A.html, 这时发现，以及无法访问了， 那么这是怎么回事呢， 说好的，cookie 会在获取过登录凭证下， 再次访问时可以携带呢。

于是，想了半天也没有想明白， 难道是浏览器限制严格进行了限制， 限制规避了这个问题？ 难道我们背的面试题是错误的？

有知道的

前言

前端领域有多种流程库可供选择，包括但不限于vue-flow、butterfly、JointJS、AntV G6、jsPlumb和Flowchart.js。这些库都提供了用于创建流程图、图形编辑和交互的功能。然而，它们在特性、易用性和生态系统方面存在一些差异。

流程图插件汇总

流程图插件分析

vue-flow

简介

vue-flow是 ReactFlow 的 Vue 版本，目前只支持 在Vue3中使用，对Vue2不兼容，目前国内使用较少。包含四个功能组件 core、background、controls、minimap，可按需使用。

使用

Vue Flow 是Vue下流程绘制库。安装：

npm i --save @vue-flow/core 安装核心组件

npm i --save @vue-flow/background 安装背景组件

npm i --save @vue-flow/controls 安装控件（放大，缩小等）组件

npm i --save @vue-flow/minimap 安装缩略图组件



引入组件：

import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'

import { Background } from '@vue-flow/background'

import { Controls } from '@vue-flow/controls'

import { MiniMap } from '@vue-flow/minimap'



引入样式：

@import '@vue-flow/core/dist/style.css';

@import '@vue-flow/core/dist/theme-default.css';

优缺点分析

优点：

1. 轻松上手：内置缩放和平移功能、元素拖动、选择等等。


2. 可定制：使用自定义节点、边缘和连接线并扩展Vue Flow的功能。


3. 快速：链路被动更改，仅重新渲染适当的元素。


4. 工具和组合：带有图形助手和状态可组合函数，用于高级用途。


5. 附加组件：背景（内置模式、高度、宽度或颜色），小地图（右下角）、控件（左下角）。

缺点：

1. 仓库迭代版本较少，2022年进入首次迭代。


2. 国内使用人数少，没有相关技术博客介绍，通过官网学习。

butterfly

简介

Butterfly是由阿里云-数字产业产研部孵化出来的的图编辑器引擎，具有使用自由、定制性高的优势，已支持上百张画布。号称 “杭州余杭区最自由的图编辑器引擎”。

使用

• 安装

//

npm install butterfly-dag --save

• 在 Vue3 中使用

<script lang="ts" setup>

import {TreeCanvas, Canvas} from 'butterfly-dag';

const root = document.getElementById('chart')

const canvas = new Canvas({

  root: root,

  disLinkable: true, // 可删除连线

  linkable: true, // 可连线

  draggable: true, // 可拖动

  zoomable: true, // 可放大

  moveable: true, // 可平移

  theme: {

    edge: {

      shapeType: "AdvancedBezier",

      arrow: true,

      arrowPosition: 0.5, //箭头位置(0 ~ 1)

      arrowOffset: 0.0, //箭头偏移

    },

  },

});

canvas.draw(mockData, () => {

  //mockData为从mock中获取的数据

  canvas.setGridMode(true, {

    isAdsorb: false, // 是否自动吸附,默认关闭

    theme: {

      shapeType: "circle", // 展示的类型，支持line & circle

      gap: 20, // 网格间隙

      background: "rgba(0, 0, 0, 0.65)", // 网格背景颜色

      circleRadiu: 1.5, // 圆点半径

      circleColor: "rgba(255, 255, 255, 0.8)", // 圆点颜色

    },

  });

});

</script>



<template>

  <div class="litegraph-canvas" id="chart"></div>

</template>

优缺点分析

优点：

1. 轻松上手：基于dom的设计模型大大方便了用户的入门门槛，提供自定义节点，锚点的模式大大降低了用户的定制性。


2. 多技术栈支持：支持 jquery 基于 dom 的设计，也包含 butterfly-react、butterfly-vue 两种设计。


3. 核心概念少而精：提供 画布（Canvas）、节点（Node）、线（Edge）等核心概念。


4. 优秀的组件库支持：对于当前使用组件库来说，可以大量复用现有的组件。

缺点：

1. butterfly 对 Vue的支持不是特别友好，这跟阿里的前端技术主栈为React有关，butterfly-vue库只支持 Vue2版本。在Vue3上使用需要对 butterfly-drag 进行封装。

JointJS

简介

创建静态图表或完全交互式图表工具，例如工作流编辑器、流程管理工具、IVR 系统、API 集成器、演示应用程序等等。

属于闭源收费项目，暂不考虑。

AntV G6

简介

AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。G6可以实现很多d3才能实现的可视化图表。

使用

• 安装

npm install --save @antv/g6	//安装

• 在所需要的文件中引入

<template>

  /* 图的画布容器 */

  <div id="mountNode"></div>

</template>



<script lang="ts" setup>

import G6 from '@antv/g6';

// 定义数据源

const data = {

  // 点集

  nodes: [

    {

      id: 'node1',

      x: 100,

      y: 200,

    },

    {

      id: 'node2',

      x: 300,

      y: 200,

    },

  ],

  // 边集

  edges: [

    // 表示一条从 node1 节点连接到 node2 节点的边

    {

      source: 'node1',

      target: 'node2',

    },

  ],

};



// 创建 G6 图实例

const graph = new G6.Graph({

  container: 'mountNode', // 指定图画布的容器 id

  // 画布宽高

  width: 800,

  height: 500,

});

// 读取数据

graph.data(data);

// 渲染图

graph.render();

</script>

优缺点分析

优点：

1. 强大的可定制性：G6 提供丰富的图形表示和交互组件，可以通过自定义配置和样式来实现各种复杂的图表需求。


2. 全面的图表类型支持：G6 支持多种常见图表类型，如关系图、流程图、树图等，可满足不同领域的数据可视化需求。


3. 高性能：G6 在底层图渲染和交互方面做了优化，能够处理大规模数据的展示，并提供流畅的交互体验。

缺点：

1. 上手难度较高：G6 的学习曲线相对较陡峭，需要对图形语法和相关概念有一定的理解和掌握。


2. 文档相对不完善：相比其他成熟的图表库，G6 目前的文档相对较简单，部分功能和使用方法的描述可能不够详尽，需要进行更深入的了解与实践。

jsPlumb

简介

一个用于创建交互式、可拖拽的连接线和流程图的 JavaScript 库。它在 Web 应用开发中广泛应用于构建流程图编辑器、拓扑图、组织结构图等可视化操作界面。

使用

<template>

  <div ref="container">

    <div ref="sourceElement">Source</div>

    <div ref="targetElement">Target</div>

  </div>

</template>



<script setup lang="ts">

import { ref, onMounted } from 'vue';

import { jsPlumb } from 'jsplumb';



const container = ref<HTMLElement | null>(null);

const sourceElement = ref<HTMLElement | null>(null);

const targetElement = ref<HTMLElement | null>(null);



onMounted(() => {

  // 创建 jsPlumb 实例

  const jsPlumbInstance = jsPlumb.getInstance();



  // 初始化 jsPlumb 实例设置

  if (container.value) {

    jsPlumbInstance.setContainer(container.value);

  }



  // 创建连接线

  if (sourceElement.value && targetElement.value) {

    jsPlumbInstance.connect({

      source: sourceElement.value,

      target: targetElement.value,

    });

  }

});

</script>

优缺点分析

优点：

1. 简单易用：jsPlumb 提供了直观的 API 和丰富的文档，比较容易上手和使用。


2. 可拓展性：允许开发人员根据自己的需求进行定制和扩展，使其适应不同的应用场景。


3. 强大的连接功能：jsPlumb 允许创建各种连接类型，包括直线、曲线和箭头等，满足了复杂交互需求的连接效果。
   缺点：


4. 文档更新不及时：有时候，jsPlumb 的官方文档并没有及时更新其最新版本的特性和用法。


5. 性能考虑：在处理大量节点、连接线或复杂布局时，jsPlumb 的性能可能受到影响，需要进行优化。

Flowchart.js

简介

Flowchart.js 是一款开源的JavaScript流程图库，可以使用最短的语法来实现在页面上展示一个流程图，目前大部分都是用在各大主流 markdown 编辑器中，如掘金、csdn、语雀等等。

使用

flowchat

start=>start: 开始

end=>end: 结束

input=>inputoutput: 我的输入

output=>inputoutput: 我的输出

operation=>operation: 我的操作

condition=>condition: 确认

start->input->operation->output->condition

condition(yes)->end

condition(no)->operation

优缺点

优点：

1. 使用方便快捷，使用几行代码就可以生成一个简单的流程图。


2. 可移植：在多平台上只需要写相同的代码就可以实现同样的效果。

缺点：

1. 可定制化限制：对于拥有丰富需求的情况下，flowchartjs只能完成相对简单的需求，没有高级的定制化功能。


2. 需要花费一定时间来学习他的语法和规则，但是flowchartjs的社区也相对不太活跃。

对比分析

1. 
   

   功能和灵活性：

   
   
   
   
   • Butterfly、G6 和 JointJS 是功能较为丰富和灵活的库。它们提供了多种节点类型、连接线样式、布局算法等，并支持拖拽、缩放、动画等交互特性。
   
   
   • Vue-Flow 来源于 ReactFlow 基于 D3和vueuse等库，提供了 Vue 组件化的方式来创建流程图，并集成了一些常见功能。
   
   
   • jsPlumb 专注于提供强大的连接线功能，具有丰富的自定义选项和功能。
   
   
   • Flowchart.js 则相对基础，提供了构建简单流程图的基本功能。
   
   
   
   


2. 
   

   技术栈和生态系统：

   
   
   
   
   • Vue-Flow 是基于 Vue.js 的流程图库，与 Vue.js 生态系统无缝集成。
   
   
   • Butterfly 是一个基于 TypeScript 的框架，适用于现代 Web 开发。
   
   
   • JointJS、AntV G6 和 jsPlumb 可以与多种前端框架（如Vue、React、Angular等）结合使用。
   
   
   • AntV G6 是 AntV 团队开发的库，其背后有强大的社区和文档支持。
   
   
   
   


3. 
   

   文档和学习曲线：

   
   
   
   
   • Butterfly、G6 和 AntV G6 都有完善的文档和示例，提供了丰富的使用指南和教程。
   
   
   • JointJS 和 jsPlumb 也有较好的文档和示例资源，但相对于前三者较少。
   
   
   • Flowchart.js 的文档相对较少。
   
   
   
   


4. 
   

   兼容性：

   
   
   
   
   • Butterfly、JointJS 和 G6 库在现代浏览器中表现良好，并提供了兼容低版本浏览器
   
   
   作者：WayneX
   来源：juejin.cn/post/7251835247595110457
   l>
   
   

在Java中，可以使用多种方法生成唯一的ID。下面我将介绍几种常用的方法：

1. 
   

   UUID（Universally Unique Identifier）：UUID是一种128位的唯一标识符。它可以通过java.util.UUID类来生成，使用UUID.randomUUID()方法返回一个新的UUID。UUID的生成是基于时间戳和计算机MAC地址等信息，因此几乎可以保证全局唯一性。

   
   

   import java.util.UUID;
   
   
   
   public class UniqueIdExample {
   
       public static void main(String[] args) {
   
           UUID uuid = UUID.randomUUID();
   
           String id = uuid.toString();
   
           System.out.println(id);
   
       }
   
   }
   
   

   
   


2. 
   

   时间戳：可以使用当前时间戳作为唯一ID。使用System.currentTimeMillis()方法可以获取当前时间的毫秒数作为ID值。需要注意的是，时间戳只是在同一台机器上保持唯一性，在分布式系统中可能存在重复的风险。

   
   

   public class UniqueIdExample {
   
       public static void main(String[] args) {
   
           long timestamp = System.currentTimeMillis();
   
           String id = String.valueOf(timestamp);
   
           System.out.println(id);
   
       }
   
   }
   
   

   
   


3. 
   

   Snowflake算法：Snowflake是Twitter开源的一种分布式ID生成算法，可以生成带有时间戳、机器ID和序列号的唯一ID。可以使用第三方库（如Twitter的Snowflake）来生成Snowflake ID。Snowflake ID的生成是基于时间序列、数据中心ID和机器ID等参数的。

   
   

   import com.twitter.snowflake.SnowflakeIdGenerator;
   
   
   
   public class UniqueIdExample {
   
       public static void main(String[] args) {
   
           SnowflakeIdGenerator idGenerator = new SnowflakeIdGenerator();
   
           long id = idGenerator.nextId();
   
           System.out.println(id);
   
       }
   
   }
   
   

   
   

以上是一些常用的生成唯一ID的方法，每种方法都有自己的特点和适用场景。选择合适的方法要根据具体需求、性能要求

前言

Next.js 框架作为一种强大而受欢迎的工具，为开发人员提供了许多优势和便利。本文将探讨 Next.js 框架的优点，并解释为什么选择 Next.js 是一个明智的决策。

文档:nextjs.org/docs

强大的服务端渲染和静态生成能力：

Next.js 框架提供了先进的服务端渲染（SSR）和静态生成（SSG）能力，使得我们能够在服务器上生成动态内容并将其直接发送给客户端，从而大大减少首次加载的等待时间。这样可以提高网站的性能、搜索引擎优化（SEO）以及用户体验。

简化的数据获取：

Next.js 提供了简单易用的数据获取方法，例如 getServerSideProps 和 getStaticProps，使得从后端获取数据并将其注入到组件中变得非常容易。这种无缝的数据获取流程，可以让开发人员专注于业务逻辑而不用过多关注数据获取的细节。

优化的路由系统：

Next.js 内置了灵活而强大的路由功能，使得页面之间的导航变得简单直观。通过自动化的路由管理，我们可以轻松地构建复杂的应用程序，并实现更好的用户导航体验。

支持现代前端技术栈：

Next.js 是建立在 React 生态系统之上的，因此可以充分利用 React 的强大功能和丰富的社区资源。同时，Next.js 也支持最新的 JavaScript（ES6+）特性，如箭头函数、模块化导入导出、解构赋值等，让开发人员可以使用最新的前端技术来构建现代化的应用。

简化的部署和扩展：

Next.js 提供了轻松部署和扩展应用程序的工具和解决方案。借助 Vercel、Netlify 等平台，我们可以快速将应用程序部署到生产环境，并享受高性能、弹性扩展的好处。Next.js 还支持构建静态站点，可以轻松地将应用部署到 CDN 上，提供更快的加载速度和更好的全球可访问性。

大型社区支持：

Next.js 拥有庞大的开发者社区，其中有许多优秀的开源项目和库。这意味着你可以从社区中获取到大量的学习资源、文档和支持。无论是在 Stack Overflow 上寻求帮助，还是参与讨论，你都能够从其他开发人员的经验中获益。

什么环境下需要选择nextjs框架？

需要服务端渲染或静态生成：

如果你的应用程序需要在服务器端生成动态内容，并将其直接发送给客户端，以提高性能和搜索引擎优化，那么 Next.js 是一个很好的选择。它提供了强大的服务端渲染和静态生成能力，使得构建高性能的应用变得更加简单。

需要快速开发和部署：

Next.js 提供了简化的开发流程和快速部署的解决方案。它具有自动化的路由管理、数据获取和构建工具，可以提高开发效率。借助 Vercel、Netlify 等平台，你可以轻松地将 Next.js 应用部署到生产环境，享受高性能和弹性扩展的好处。

基于 React 的应用程序：

如果你已经熟悉 React，并且正在构建一个基于 React 的应用程序，那么选择 Next.js 是自然而然的。Next.js 是建立在 React 生态系统之上的，提供了与 React 紧密集成的功能和工具。

需要良好的 SEO 和页面性能：

如果你的应用程序对搜索引擎优化和良好的页面性能有较高的要求，Next.js 可以帮助你实现这些目标。通过服务端渲染和静态生成，Next.js 可以在初始加载时提供完整的 HTML 内容，有利于搜索引擎索引和页面的快速呈现。

需要构建现代化的单页应用（SPA）：

尽管 Next.js 可以支持传统的多页面应用（MPA），但它也非常适合构建现代化的单页应用（SPA）。你可以使用 Next.js 的路由系统、数据获取和状态管理功能，构建出功能丰富且响应快速的 SPA。

与nextjs相似的框架？

Nuxt.js：

Nuxt.js 是一个基于 Vue.js 的应用框架，提供了类似于 Next.js 的服务端渲染和静态生成功能。它通过使用 Vue.js 的生态系统，使得构建高性能、可扩展的 Vue.js 应用变得更加简单。

Gatsby：

Gatsby 是一个基于 React 的静态网站生成器，具有类似于 Next.js 的静态生成功能。它使用 GraphQL 来获取数据，并通过预先生成静态页面来提供快速的加载速度和良好的SEO。

Angular Universal：

Angular Universal 是 Angular 框架的一部分，提供了服务端渲染的能力。它可以生成动态的 HTML 内容，从而加快首次加载速度，并提供更好的 SEO 和用户体验。

Sapper：

Sapper 是一个基于 Svelte 的应用框架，支持服务端渲染和静态生成。它提供了简单易用的工具和流畅的开发体验，帮助开发者构建高性能的 Sv

前言

在群里看到一些问题和言论：为什么你们这么喜欢“类型体操”？为什么我根本学不下去 TypeScript？我最讨厌那些做类型体操的了；为什么我学了没过多久马上又忘了？

有感于这些问题，我想从最简单的一个角度来切入介绍一下 TypeScript，并向大家介绍并不是只要是个类型运算就是体操。并在文中介绍一种基本思想作为你使用类型系统的基本指引。

引子

我将从一个相对简单的 API 的设计过程中阐述关于类型的故事。在这里我们可以假设我们现在是一个工具的开发者，然后我们需要设计一个 API 用于从对象中拿取指定的一些 key 作为一个新的对象返回给外面使用。

垃圾 TypeScript

一个人说：我才不用什么破类型，我写代码就是要没有类型，我就是要随心所欲的写。然后写下了这段代码。

declare function pick(target: any, ...keys: any): any

他的用户默默的写下了这段代码：

pick(undefined, 'a', 1).b

写完运行，发现问题大条了，控制台一堆报错，接口数据也提交不上去了，怎么办呢？

刚学 TypeScript

一个人说：稍微检查一下传入类型就好了，别让人给我乱传参数就行。

declare function pick(target: Record<string, unknown>, ...keys: string[]): unknown

很好，上面的问题便不复存在了，API 也是基本可用的了。但是！当对象复杂的时候，以及字段并不是短单词长度的时候就会发现了一个没解决的问题。

pick({ abcdefghijkl: '123' }, 'abcdefghikjl')

从肉眼角度上，我们很难发现这前后的不一致，所以我们为什么要让调用方的用户自己去 check 自己的字段有没有写对呢？

不就 TypeScript

一个人说：这还不简单，用个泛型加 keyof 不就行了。

declare function pick<

  T extends Record<string, unknown>

>(target: T, ...keys: keyof T[]): unknown

我们又进一步解决的上面的问题，但是！还是有着相似的问题，虽然我们不用检查 keys 是不是传入的是一个正确的值了，但是我们实际上对返回的值也存在一个类似的问题。

pick({ abcdefghijkl: '123' }, 'abcdefghijkl').abcdefghikjl

• 
  

  一点小小的拓展

  
  

  在这里我们看起来似乎是一个很简单的功能，但实际上蕴含着一个比较重要的信息。

  
  

  为什么我们之前的方式都拿不到用户传入进来的类型信息呢？是有原因的，当我们设计的 API 的时候，前面的角度是从，如何校验类型方向进行的思考。

  
  

  而这里是尝试去通过约定好的一种规则，通过 TypeScript 的隐式类型推断获得到传入的类型，再通过约定的规则转化出一种新的类型约束来对用户的输入进行限制。

  
  

算算 TypeScript

一个人说：好办，算出来一个新的类型就好了。

declare function pick<

  T extends Record<string, unknown>,

  Keys extends keyof T

>(target: T, ...keys: Keys[]): {

  [K in Keys]: T[K]

}

到这里已经是对类型的作用有了基础的了解了，能写出来符合开发者所能接受的类型相对友好的代码了。我们可以再来思考一些更特殊的情况：

// 输入了重复的 key

pick({ a: '' }, 'a', 'a')

完美 TypeScript

到这里，我们便是初步开始了类型“体操”。但是在本篇里，我们不去分析它。

export type L2T<L, LAlias = L, LAlias2 = L> = [L] extends [never]

  ? []

  : L extends infer LItem

    ? [LItem?, ...L2T<Exclude<LAlias2, LItem>, LAlias>]

    : never



declare function pick<

  T extends Record<string, unknown>,

  Keys extends L2T<keyof T>

>(target: T, ...keys: Keys): Pick<T, Keys[number] & keyof T>



const x0 = pick({ a: '1', b: '2' }, 'a')

console.log(x0.a)

// @ts-expect-error

console.log(x0.b)



const x1 = pick({ a: '1', b: '2' }, 'a', 'a')

//                                  ^^^^^^^^

// TS2345: Argument of type '["a", "a"]' is not assignable to parameter of type '["a"?, "b"?] | ["b"?, "a"?]'.

//   Type '["a", "a"]' is not assignable to type '["a"?, "b"?]'.

//     Type at position 1 in source is not compatible with type at position 1 in target.

//       Type '"a"' is not assignable to type '"b"'.

一个相对来说比较完美的 pick 函数便完成了。

总结

我们再来回到我们的标题吧，从我对大多数人的观察来说，很多的人开始来使用 TypeScript 有几种原因：

• 看到大佬们都在玩，所以自己也想来“玩”，然后为了过类型校验而去写


• 看到一些成熟的项目在使用 TypeScript ，想参与贡献，参与过程中为了让类型通过而想办法去解决类型报错


• 公司整体技术栈采用的是 TypeScript ，要用 TypeScript 进行业务编写，从而为了过类型检查和 review 而去解决类型问题

诸如此类的问题还有很多，我将这种都划分为「为了解决类型检查的问题」而进行的类型编程，这也是大多数人为什么非常不适应 TypeScript，甚至不喜欢他的一个原因。这其实对学习 TypeScript 并不是一个很好的思路，在这里我觉得我们需要站在设计者的角度去对类型系统进行思考。我觉得有以下几个角度：

• 类型检查到位


• 类型提示友好


• 类型检查严格


• 扩展性十足

我们如果站在这几个角度对我们的 API 进行设计，我们可以发现，开发者能够很轻松的将他们需要的代码编写出来，而尽量不用去翻阅文档，查找 example。

希望通过我的这篇分享，大家能对 TypeScript 多一些理解，并参与到生态中来，守护我们的 JavaScript。

2023/06/27 更新

理性探讨，在评论区说什么屎不是屎的，嘴巴臭可以不说话的。

没谁逼着你一定要写最后一种层次的代码，能力不足可以学啊，不喜欢可以不学啊，能达到倒数第二个就已经很棒啊。

最后一种只是给大家看看 TypeScript 的一种可能，而不是说你应该这么做的。

作者：一介4188
来源：juejin.cn/post/7248599585751515173

起因

事件的起因是，最近家里的俩娃马上要放暑假了，家里的老母亲早早的就规划好了姐姐弟弟的暑期少年宫课程，奈何有些想上个课程一直没有”抢“到课程。平时带娃在少年宫上课的父母可能懂的，一般少年宫的课程都是提前预报名，然后会为了公平起见进行摇号，中者缴费。本来是一件比较合理的处理方式，但奈何不住各位鸡娃的父母们的上有政策下有对策的路子。

第一阶段：靠数量提高命中率 ，大家都各自报了很多不同课程，防止因为摇号没摇上，导致落空。我们家也是一样操作~~~。但是这里也会出现另一种状况，当摇号结束，大家缴费期间，有的摇中家长，发现课程多了或者有些课程和课外兴趣班冲突，或者种种其他原因，不想再上暑期课程了，就会取消这门课程。 即时你缴费了，后面也是可以取消的，只是会扣除一些费用。
第二阶段：捡漏，有报多的家长，就有没有抢到合适课程的家长。没错，说的正是我们家 哈哈。在我老婆规划中，我们还有几门课程没有摇中，那这个时候怎么办呢？只能蹲守，人工不定时的登录查课，寄期望于有些家长退课了，我们好第一时间补上去。

当当当，作为一个程序员老父亲，这个时候终于排上用场了~~~，花了一个晚上，写了个定时查询脚本+通知，当有课放出，咱们就通知一下领导（老婆大人）定夺，话说这个小查课定时任务深受领导的高度表扬。
好了起因就是这样，下面我们回到正题，给大家实操下如何使用阿里云的Serverless 函数，来构建这个小定时脚本。

架构

很简单的架构图，只用到了这么几个组件，

• Serverless FC 无服务器函数，承载逻辑主体


• OSS 存储中间结果数据


• RAM是对计算函数赋予角色使其有对应权限。


• 企业微信机器人，企业微信本身可以随便注册，拉个企业微信群，加入一个群机器人，就可以作为消息触达端。

实践

函数计算FC

本次实操中，我们需要先了解阿里云的函数计算FC几个概念，方便我们后面操作理解：

相关官方资料：基本概念

下面我只列了本次操作涉及到的概念，更详细资料，建议参考官方文档。

• 服务：服务是函数计算资源管理的单位，是符合微服务理念的概念。从业务场景出发，一个应用可以拆分为多个服务。从资源使用维度出发，一个服务可以由多个函数组成。


• FC函数：函数计算的资源调度与运行是以函数为单位。FC函数由函数代码和函数配置构成。FC函数 必须从属于服务，同一个服务下的所有函数共享一些相同的设置，例如服务授权、日志配置。函数的相关操作


• 层：层可以为您提供自定义的公共依赖库、运行时环境及函数扩展等发布与部署能力。您可以将函数依赖的公共库提炼到层，以减少部署、更新时的代码包体积，也可以将自定义的运行时，以层部署在多个函数间共享。


• 触发器：触发器是触发函数执行的方式。在事件驱动的计算模型中，事件源是事件的生产者，函数是事件的处理者，而触发器提供了一种集中、统一的方式来管理不同的事件源

创建函数

1. 函数计算FC--> 任务--> 选择创建函数

2. 配置函数

这里我截了个长屏，来给大家逐个解释

tips: 如果大家也有截长屏需求，推荐chrome 中的插件：Take Webpage Screenshots Entirely - FireShot

• 函数方式：我的小脚本是python 代码，我直接使用自定义运行环境，如果你想了解这三种方式区别，建议详细阅读这篇文章：函数计算支持的多语言运行时信息


• 服务名称：我们如果初次创建，选择创建一个服务，然后填入自己设定的服务名字即可


• 函数代码：这里我选择运行时python 3.9 ， 示例代码（代码等我们创建完成之后，再填充自己的代码逻辑）


• 高级配置： 这里如果是初学者，个人建议尽量选最小配置，因为函数计算是按你使用的资源*次数 收费的， 这里我改成了资源粒度，0.05vCpu 128MB，并发度 1


• 函数变量：我暂时不需要，就没有设置，如果你需要外部配置一些账号密码，可以使用这种方式来配置


• 触发器：这里展示出了函数计算的协同作用，可以通过多种云服务产品来进行事件通知触发，我们这里的样例只需要一个定时轮询调度，所以这里我使用了定时触发器，5分钟调用一次。

配置依赖

函数整体创建成功之后，点击函数名称，进入函数详情页

函数代码模块填充本地已经调试好的代码， 测试函数，发现相关依赖并没有，这里我们需要编辑层，来将python相关依赖文件引入， 点击上图中编辑层。

我选择的是在线构建依赖层，按照requirements.txt的格式书写，然后就可以在线安装了，很方便。创建成功之后，回到编辑层位置，选择刚开始创建的层，点击确定，既可，这样就不会再报相关依赖缺失了。

配置OSS映射

我的小脚本里，需要存储中间数据，因为函数计算FC本身是无状态的，所以需要借助外部存储，很自然的就会想到用OSS来存储。但是如何正确的使用OSS桶来存储中间数据呢？
官方关于python操作OSS的教程：python 操作 OSS

# -*- coding: utf-8 -*-

import oss2

# 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。

auth = oss2.Auth('<yourAccessKeyId>', '<yourAccessKeySecret>')

# Endpoint以杭州为例，其它Region请按实际情况填写。

bucket = oss2.Bucket(auth, 'http://oss-cn-hangzhou.aliyuncs.com', '<yourBucketName>')

这里操作基本都会使用到 AK,SK。 但是基于云上的安全的实践操作以及要定期更换ak,sk来保证安全，尽量不要直接在代码中使用ak, sk来调用api 。那是否有其他更合理的操作方式？
我找到了这篇文章 配置OSS文件系统

函数计算支持与OSS无缝集成。您可以为函数计算的服务配置OSS挂载，配置成功后，该服务下的函数可以像使用本地文件系统一样使用OSS存储服务。

个人推荐这种解决方案

• 只需要配置对应函数所授权的角色策略中，加上对相应的挂载OSS桶的读写权限


• 这个操作符合最小粒度的赋予权限，同时也减少代码开发量，python可以像操作本地磁盘一样，操作oss，简直不要太方便~~~


• 同时也不需要担心所谓的ak sk泄漏风险以及需要定期更换密钥的麻烦，因为就不存在使用ak sk

我最后也是用这种方式，配置了oss文件系统映射到函数运行时的环境磁盘上。

企业微信机器人

企业微信可以直接注册，不需要任何费用，之后两个人拉一个群，添加一个群机器人即可。
可以参考官方文档：如何使用群机器人 来用python 发送群消息，很简单的一段代码既可完成发送消息通知。

wx_url = "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxxx-xxxxx-xxxxx"

def sendWechatBotMsg(msg,collagues):

    """艾特指定同事，并发送指定信息"""

    data = json.dumps({"msgtype": "text", "text": {"content": msg, "mentioned_list":collagues}})

    r = requests.post(wx_url, data, auth=('Content-Type', 'application/json'))

最后效果如图所示：

总结

通过日常生活中的一个小场景，实践了下阿里云的高大上的Serverless FC 服务。个人选择这种无服务器函数计算，也是结合了成本的因素。
给大家对比下两种方案价格：

• 传统云主机方式：

阿里云官方ECS主机的定价：实例价格信息
最便宜的一档： 1vCPU 1GB 实例， 每个月也要34.2 RMB 还没有包括挂载的磁盘价格 ，以及公网带宽费用

• Serverless FC

而使用无服务器函数计算服务， 按使用时长和资源计费，像我这种最小资源粒度就可以满足同时调度次数是周期性的，大大消减了费用， 我跑了大概一周的时间 大概花费了 0.16 RMB，哈哈 简直是不能再便宜了。大家感兴趣的也可以动手实践下自己的需求场景。

云计算已经是当下技术人员的必学的一门课程，如果有时间也鼓励大家可以多了解学习，提升自己的专业能力。感兴趣的朋友，如果有任何问题，需要沟通交流也可以添加我的个人微信 coder_wukong，备注：云计算，或者关注我的公众号 WuKongCoder日常也会不定期写一些文章和思考。

如果觉得文章不错，欢迎大家点赞，留言，转发，收藏 谢谢大家，我们下篇文章再会~~~

参考资料

中国唯一入选 Forrester 领导者象限，阿里云 Serverless 产品能力全球第一

函数计算支持的多语言运行时信息

阿里云OSS文档：python 操作 OSS

阿里云函数计算文档：配置OSS文件系统

企业微信文档：如何使用群机器人

让 Serverless 更普惠

Serverless 在阿里云函数计算中的实践

背景

最近有一个页面改版的需求，在UI走查阶段，设计师说原来的轮播组件和新版页面UI整体风格不搭，所以要换掉。

这里就涉及到两种轮播组件，一种是传统的轮播组件，一种是设计师要的那种。

传统的轮播组件，大家都见过，原理也清楚，就是把要轮播的图片横向排成一个队列，把他们当成一个整体，每次轮换，其实是把这个队列整体往左平移X像素，这里的X通常就是一个图片的宽度。
这种效果可以参见vant组件库里的swipe组件

而我们设计师要的轮播效果是另外一种，因为我利用端午假期已经做好了一个雏形，所以大家可以直接看Demo。

当然你也可以直接打开 腾讯视频APP 首页，顶部的轮播，就是我们设计师要的效果。

需求分析

新式轮播，涉及要两个知识点：

• 图片层叠


• 揭开效果

与传统轮播效果一个最明显的不同是，新的轮播效果需要把N张待轮播的图片在Z轴上重叠放置，每次揭开其中的一张，下一张是自然漏出来的。这里的实现方式也有多种，但最先想到的还是用zindex的方案。

第二个问题是如何实现揭开的效果。这里就要使用到css3的新属性mask。
mask是一系列css的简化属性。包括mask-image, mask-position等。
因为mask的系列属性还有一定的兼容性，所以一部分浏览器需要带上-webkit-前缀才能生效。

还有少数浏览器不支持mask属性，退化的情况是轮播必须有效，但是没有轮换的动效。

实现

有了以上的分析，就可以把效果做出来了。核心代码如下：

<script setup lang="ts">

 import { ref, onMounted, watch } from "vue";

 // 定义属性

const props = defineProps([

  'imgList',

  'duration', 

  'transitionDuration',

  'maskPositionFrom', 

  'maskPositionTo',

  'maskImageUrl'

]);

 // 定义响应式变量

const currentIndex = ref(0);

const oldCurrentIndex = ref(0);

const imgList = ref([...props.imgList, props.imgList[0]]);

const getInitZindex = () => {

  const arr = [1];

  for (let i = imgList.value.length - 1; i >= 1; i--) {

    arr.unshift(arr[0] + 1);

  }

  return arr;

}

const zIndexArr = ref([...getInitZindex()]);

const maskPosition = ref(props.maskPositionFrom || 'left');

const transition = ref(`all ${props.transitionDuration || 1}s`);

 // 设置动画参数

const transitionDuration = props.transitionDuration || 1000;

const duration = props.duration || 3000;



 // 监听currentIndex变化

watch(currentIndex, () => {

  if (currentIndex.value === 0) {

    zIndexArr.value = [...getInitZindex()];

  }

  maskPosition.value = props.maskPositionFrom || 'left';

  transition.value = 'none';

})

 // 执行动画

const execAnimation = () => {

  transition.value = `all ${props.transitionDuration || 1}s`;

  maskPosition.value = props.maskPositionFrom || 'left';

  maskPosition.value = props.maskPositionTo || 'right';

  oldCurrentIndex.value = (currentIndex.value + 1) % (imgList.value.length - 1);

   setTimeout(() => {

    zIndexArr.value[currentIndex.value] = 1;

    currentIndex.value = (currentIndex.value + 1) % (imgList.value.length - 1);

  }, 1000)

}

 // 挂载时执行动画

onMounted(() => {

  const firstDelay = duration - transitionDuration;

  function animate() {

    execAnimation();

    setTimeout(animate, duration);

  }

  setTimeout(animate, firstDelay);

})

 </script>

 <template>

  <div class="fly-swipe-container">

    <div class="swipe-item"

         :class="{'swipe-item-mask': index === currentIndex}"

         v-for="(url, index) in imgList"

         :key="index"

         :style="{ zIndex: zIndexArr[index],

         'transition': index === currentIndex ? transition : 'none',

         'mask-image': index === currentIndex ? `url(${maskImageUrl})` : '',

         '-webkit-mask-image': index === currentIndex ? `url(${maskImageUrl})`: '',

         'mask-position':  index === currentIndex ? maskPosition: '',

         '-webkit-mask-position':  index === currentIndex ? maskPosition: '' }">

      <img :src="url" alt="">

    </div>

    <div class="fly-indicator">

      <div class="fly-indicator-item"

           :class="{'fly-indicator-item-active': index === oldCurrentIndex}"

           v-for="(_, index) in imgList.slice(0, imgList.length - 1)"

           :key="index"></div>

    </div>

  </div>

</template>

 <style lang="less" scoped>

.fly-swipe-container {

  position: relative;

  overflow: hidden;

  width: 100%;

  height: inherit;

   .swipe-item:first-child {

    position: relative;

  }

  .swipe-item {

    position: absolute;

    width: 100%;

    top: 0;

    left: 0;

     img {

      display: block;

      width: 100%;

      object-fit: cover;

    }

  }

   .swipe-item-mask {

    mask-repeat: no-repeat;

    -webkit-mask-repeat: no-repeat;

    mask-size: cover;

    -webkit-mask-size: cover;

  }

   .fly-indicator {

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 666;

    position: relative;

    top: -20px;

    .fly-indicator-item {

      margin: 0 5px;

      width: 10px;

      height: 10px;

      border-radius: 50%;

      background: gray;

    }

    .fly-indicator-item-active {

      background: #fff;

    }

  }

}

</style>

这是一个使用 Vue 3 构建的图片轮播组件。在这个组件中，我们可以通过传入一组图片列表、切换动画的持续时间、过渡动画的持续时间、遮罩层的起始位置、遮罩层的结束位置以及遮罩层的图片 URL 来自定义轮播效果。

组件首先通过 defineProps 定义了一系列的属性，并使用 ref 创建了一些响应式变量，如 currentIndex 、 oldCurrentIndex 、 imgList 、 zIndexArr 等。

在 onMounted 钩子函数中，我们设置了一个定时器，用于每隔一段时间执行一次轮播动画。
在模板部分，我们使用了一个 v-for 指令来遍历图片列表，并根据当前图片的索引值为每个图片元素设置相应的样式。同时，我们还为每个图片元素添加了遮罩层，以实现轮播动画的效果。

在样式部分，我们定义了一些基本的样式，如轮播容器的大小、图片元素的位置等。此外，我们还为遮罩层设置了一些样式，包括遮罩图片的 URL、遮罩层的位置等。

总之，这是一个功能丰富的图片轮播组件，可以根据传入的参数自定义轮播效果。

后续

因为mask可以做的效果还有很多，后续该组件可以封装更多轮播效果，比如从多个方向的揭开效果，各种渐变方式揭开效果。欢迎使用和提建议。

仓库地址：github.com/cunzai

前言

前段时间，我司的官网要改版。老板们手一挥，提出了以下几点需求

• 网站要大气，炫酷，有科技感


• 图片文字要高大上


• 注重SEA、SEO优化，用户查找关键字后，我们公司的网站排名要显示在前列

为此，我们还专门买了一个SEO优化的课程，大张旗鼓的学习了一通。至于效果如何，1个月见分晓

那么如何编写 JavaScript 代码以有利于 SEO 和 SEA 呢？

下面仅展示被被谷歌搜索引擎收录的

SEA、SEO优化

保持好的网页结构

1. 使用语义化的 HTML结构

HTML语义化是指使用恰当的HTML标签来描述网页内容的结构和含义，以提高网页的可读性、可访问性和搜索引擎优化。

• header: 网站的页眉部分


• nav: 定义网站的主要导航链接


• main: 定义页面的主要内容区域，每个页面应该只有一个<main>标签


• section: 定义页面中的独立区块, 例如文章、产品列表等


• article: 定义独立的文章内容，通常包含标题、作者、发布日期等信息


• aside: 定义页面的侧边栏或附属信息区域


• footer: 网站的页脚部分

<header>

  <h1>官网</h1>

  <nav>

      <ul>

        <li><a href="#">首页</a></li>

        <li><a href="#">关于我们</a></li>

        <li><a href="#">联系我们</a></li>

      </ul>

  </nav>

</header>



<main>

  <div>欢迎来到我们的网站</div>

  <p>这里是网站的主要内容。</p>

</main>





<section>

    <h2>最新文章</h2>

    <article>

        <h3>文章标题</h3>

        <p>文章内容...</p>

    </article>

    <article>

        ...

    </article>

</section>





<aside>

  <h3>最新消息</h3>

  <ul>

    <li><a href="#">链接1</a></li>

    ...

  </ul>

</aside>



<article>

  <h2>消息1</h2>

  <p>文章内容...</p>

</article>





<footer>

  <p>版权所有 &copy; 2023</p>

  <p>联系我们：info@example.com</p>

</footer>

2. 提供准确且吸引人的页面标题和描述

准确且简洁的标题和描述，有利于吸引访问者和搜索引擎的注意

• 页面标题: Title


• 页面描述: Meta Description

<head>

  <title>精美手工艺品——手工制作的独特艺术品</title>

  <meta name="description" content="我们提供精美手工艺品的设计与制作，包括陶瓷、木雕、织物等。每件艺术品都是独一无二的，以精湛的工艺和创造力打动您的心灵。欢迎浏览我们的作品集。">

</head>

标题要小于50个字符，描述要小于150字符

3. 
   

   在关键位置使用关键字: 包括标题、段落文本、链接文本和图片的 alt 属性。

   
   
   
   
   • 段落文本: 自然的使用关键字，有助于搜索引擎收录
   
   
   • 链接文本: 使用描述性的链接文本，并在其中包含关键字，这有助于搜索引擎理解链接指向的内容
   
   
   • 图片的 alt 属性: 对于每个图像，使用描述性的 alt 属性来说明图像内容，并在其中包含关键字。这不仅有助于视力障碍用户理解图像，还可以提供关键字相关的图像描述给搜索引擎。
   
   
   
   

<h1>欢迎来到精美手工艺品网店</h1>

<p>我们提供各种精美手工艺品，包括陶瓷、木雕、织物等。每个艺术品都是由我们经验丰富的工匠手工制作而成，展现了精湛的工艺和创造力。</p>

<p>浏览我们的<a href="/products" title="手工艺品产品列表">产品列表</a>，您将发现独特的艺术品，适合作为礼物或收藏。</p>

<img src="product.jpg" alt="陶瓷花瓶 - 手工制作的精美艺术品" />

一个页面要保证有且只有h1标签

使用友好的 URL 结构

使用友好的URL结构是一个重要的优化策略，它可以提升网站的可读性、可维护性和用户体验

• 使用关键字: 在URL中使用关键字，以便用户和搜索引擎可以更好地理解页面的主题和内容, URL中多个关键词使用连字符字符 "-"进行分隔。


• 结构层次化: 层次化的URL结构来反映内容的结构和关系


• 避免使用参数: 尽量避免在URL中使用过多的参数，特别是使用随机字符串或数字作为参数


• 尽量使用永久链接: 尽可能使用永久链接，避免频繁更改URL


• 尽量保持URL简洁: 避免过长的URL。短连接更易于分享和记忆

<!-- 不友好的URL -->

https://example.com/index.html?category=7&product=12345

https://example.com/qinghua/porcelain



<!-- 友好的URL -->

https://example.com/porcelain/qinghua

https://example.com/blog/friendly-urls

1. 重要链接不要用JS

搜索引擎爬虫通常不会执行 JavaScript，并且依赖 JavaScript 的链接可能无法被爬虫正确解析和索引

使用标准的 <a> 标签进行跳转，避免使用 JavaScript 跳转

2. 使用W3C规范

使用W3C规范是确保你的网页符合Web标准并具有良好可访问性的重要方式

不符合W3C的规范：

• 未闭合的标签


• 未正确嵌套的元素


• 行内元素包裹块状元素

<!-- 未闭合的标签 -->

<p>This is a paragraph with no closing tag.

<!-- 未正确嵌套的元素 -->

<div><p>This paragraph is inside a div but not closed properly.</div></p>

<!-- 行内元素包裹块状元素 -->

<span><p>This paragraph is inside a div but not closed properly.</p></span>

响应式设计和移动优化

Google 现在使用了移动优先索引, 搜索引擎更倾向于优先索引和显示移动友好的网页。

使用响应式设计，使你的网页在各种设备上都能正确显示。

1. 响应式设计：确保网页具有响应式设计，能够适应不同设备的屏幕尺寸


2. 关注移动友好性：确保网页在移动设备上加载和显示良好

JavaScript使用和加载优化

搜索引擎爬虫通常不会执行 JavaScript，并且在抓取和索引页面时可能会忽略其中的动态内容

1. 
   

   加载时间优化: 通过压缩和合并 JavaScript文件，减小文件大小，以及使用异步加载和延迟加载的方式，可以提高网页的加载速度

   
   


2. 
   

   避免使用AJAX技术加载核心内容: 对于核心内容，避免使用 AJAX 或动态加载方式，而是在初始页面加载时就呈现。这样可以确保搜索引擎能够正确抓取和索引核心内容，提高网页的可见性和相关性。

   
   


3. 
   

   减少懒加载、瀑布流、上拉刷新、下载加载、点击更多等互动加载: 这些常见的页面优化方式虽然有利于用户体验。但搜索引擎爬虫不会执行 JavaScript，并且在抓取和索引页面时可能会忽略其中的动态内容。

   
   


4. 
   

   js阻塞后保证页面正常运行: 确保网站在没有 JavaScript 的情况下仍然能够正常运行。这有助于搜索引擎爬虫能够正确索引你的网页内容。

   
   

性能和体验优化

1. 提高网站加载速度: 搜索引擎和用户都更喜欢快速加载的网页，提高页面的转加载速度，会对搜索引擎排名产生积极影响。


2. 优化移动体验: 在移动设备上，用户的粘性和耐心被放大，优化移动体验，减少用户的流失率，会对移动搜索排名产生积极影响。


3. 无障碍: 在 Web 开发无障碍性意味着使尽可能多的人能够使用 Web 站点, 增加用户人群的受众，会提高搜索引擎排名

内容更新

1. 内容持续更新: 搜索引擎比较喜欢新鲜的内容，如果网站内容长期不更新的话，搜索引擎就会厌烦我们的网站。反之，我们频繁的更新新闻、博客等内容，会大大的提高


2. 网页数量尽可能的多： 尽可能的让网页超过15个，

频繁修改或调整网站结构的话就相当于修改了搜索引擎爬取网站的路径，导致网站即使更新再多的内容也难以得到收录

监测

索引

在浏览器中输入 site:你的地址（此方法仅适合谷歌，百度则直接搜索URL地址）

查看是否被索引

1. 进入Google Search Console


2. 进入URL检测工具。


3. 将需要索引的URL粘贴到搜索框中。


4. 等待谷歌检测URL。


5. 点击“请求编入索引”按钮。

收录

点击网址检查: 如果页面被索引，那么会显示“URL is on Google（URL在谷歌中）”。

如何去收录

但是，请求编入收录索引不太可能解决旧页面的索引问题，并且这只是一个最原始的方式，提交链接不能确保你的URL一定被收录，尤其是百度。

参考11个让百度快速收录网站的奇思淫技

总结

持续的优化和监测是关键，以确保你的策略和实践符合不断变化的搜索引擎算法和用户需求。

期待一个月后见分晓啦！

参考文献

1. 11个让百度快速收录网站的奇思淫技


2. search


3. JavaScript与SEO之间的藕断丝连关系<
   
   作者：高志小鹏鹏
   来源：juejin.cn/post/7251786985535275067
   /a>

经常在技术社区看到有小白提问如何提升技术水平，我也曾是小白，我也曾经问过这个问题，我也不是什么天赋异禀之人，和大部分人都一样，所以我能够理解小白在问这个问题时的感受，作为过来人，解决这个问题的路径其实是非常清晰的，网上这类的答案也很多，不过看过我文章的读者都应该能够感觉到我是个比较务实的人，对于冠冕堂皇实际上屁用没有的东西不太感冒，所以我的这篇文章可能跟其他人的不要太一样，我只从实际出发，谈谈我的想法

以下内容对于大部分 0-3年经验的小白都适用，仅针对想靠这行混碗饭吃的人（这类人才是这个行业的主力军），天赋异禀的少数群体看个乐子就行

基础知识必须掌握

在 React、Vue 大行其道的当下，我见过很多人竟然连基本的 js api 都搞不清楚，方法不知道，参数不清楚，掌握的少的可怜的 js 知识，比如 requestAnimationFrame、Object.defineProperty等还都纯粹是因为跟 vue、react扯上了关系面试要用所以才看了两眼，我无法理解如果连基础知识都掌握不了的话，又该如何去 深入 理解这些框架？

实际工作用的确实也是框架，很少有需要用原生 js 去实现什么复杂功能的地方，但这并不代表这不重要，恰恰相反，如果不是急着要找工作的话，比如在校大学生，我认为还是先把基础弄清楚，再顺带着学一学框架，无论是什么框架，都是对于底层技术的封装，react、vue等框架更新的确实很快，很多人都在说学不动了，实际上是你学错了，这些上层的东西根本不需要追着学，它们只是趁手的工具，工具是为你所服务的，但现在你却说工具让你追得很累，这本身就是有问题的

我上大学的时候，那个还是 angular 市场占有率最高，我那个时候也学了 angular，但是现在我再看 angular发现早就不是当初我学的那个东西了，假设我现在需要用到 angular，现在学和一路追着 angular那么多版本更新一个个学下来，有区别吗？没区别，都是工具，只要能实现功能就行了，我管你是 angular还是 react，管你是 vue2.x 还是 vue3.x，反正对着文档一把梭就行了，都是基于 js的 dsl封装罢了，无非是玩得花不花而已

你可能会说，现在都在用框架，面试问的也是框架知识，基础知识知不知道有什么关系平时根本用不到啊，我并不认同，我就举个例子，经常看到有人说问

只学过vue，现在工作需要用react，怎么办，react好学吗？

我看了就很迷惑，你要是问我vue、react牛不牛逼，我肯定会伸出大拇指绝对牛逼，但你要问我难不难学，那我不能理解了，不就是一个框架吗有什么难不难好不好学的，我只能猜测这人可能一上来就是跟风学了vue，啥基础知识都不懂，要是老老实实先掌握了基础知识，再顺手学个框架，好好研究下框架与基础之间的通用关系，根本不会问这个问题

我不否认有些小众的东西确实难以理解，但像vue、react这种市场占有率很高的大众化框架，不可能存在什么技术门槛的，管你是React还是 Svelte，一天看文档，两天速通，三天上手写业务就是标准流程

当然了，想深入还是要花费些功夫的，但是恕我直言，以绝大多数人（包括我自己）写的业务屎山的逻辑难度而言，根本不需要什么深度技术，深入学习研究更多的是提升自己的认知水平

为了快速找工作，你可以在什么基础知识都不懂的情况下就跟风学框架，问题不大，毕竟吃饭要紧，但是如果你想把饭碗尽可能拿的更久一点或者更进一步，跳过的东西，你必须要再捡回来

另外，多提一嘴，前端三剑客包括 js、css、html，虽然后两者的重要程度远不能跟 js 相提并论，但既然是基础知识，都还是需要掌握的，作为一名业务前端，总不能跟别人说你不太懂 css吧？

多看

如何掌握基础知识，首先你得知道有哪些基础知识，你作为一个啥也不懂一片空白的新人，了解这个领域最应该做的事情就是多看，看什么？看书、看视频

看书

关于前端书籍推荐的话题或者书单等，网上已经有很多了，我就不再赘述了，不过我发现有些书单也太特么长了，几十上百本书哪有那么多时间去看，好多我名字都没听过也往上凑，这可能会让很多人打退堂鼓，甚至直接摆烂，先进收藏夹再说，至于什么时候看就再说吧

如果只谈基础知识的，我认为只有两本书是必须要看的，《JavaScript高级程序设计》和《JavaScript权威指南》，也就是常说的红宝书和犀牛书，这两本书比较厚，但相比于几十上百本书而言，已经很明确了很清晰了，只需要看这两本就行了，是必须要看的，由于这两本书都是出版了较长时间的书籍，一些更新的内容没有包括在内，那么这部分知识就需要自行去网上获取了，比如 ECMAScript 6 入门

至于其他的几十上百本，说实话，看哪本都行，不是说其他书不重要，哪本书都有其存在的意义，但只是相比于这两本没那么重要，多看肯定比不看强，这两本书是必看的综合基础，其他书是在你在掌握了基础之后，根据你的实际情况，提升在不同细分领域水平的助攻

技术社区上的文章也姑且算是书的一种形式吧，零散的文章用于开阔视野紧跟潮流风向，系列文章用于加深在细分领域的认知

看视频

我知道很多人看不起视频学习的，认为效率太低，除此之外还因为跟培训班扯上关系，也让很多自诩清高的人认为太low拉低自己的层次，所以对于看视频学习持否定态度

首先，我也认为看视频学习确实效率很低，但你得分清是对什么层次的人来说的

对于有了三年（只是大概估个数，少部分人可能只需要一年）以上工作经验的人来说，再看视频学习，那确实效率太低了，但是对于三年以下甚至是初识技术世界的小白来说，看视频的效率不是低，而是高，年限越低，看视频学习的效率越高，直到突破了三年这个节点后，看视频学习的效率才开始低于看书

我就是从小白过来的，我很清楚小白对于技术的认知是什么样的，那真是狗屁不通，让这样的人抱着厚厚的一本书在那看，每个字都认识，可一连起来就不知道为什么这样了，书籍内的世界虽然无比广阔，但无人指引，你跑了半天可能还在绕着圈，天地再大与你何干？

但视频就不同了，视频承载的信息量远低于书籍，但那却能给你更清晰的指引，一步步地告诉你该怎么走，万事开头难，入门的时候慢一点没关系，主要是要能入门，入对门，而不是像无头苍蝇一样乱撞

鄙人就是靠视频入门的，一开始大学里学的是 java，但后来对前端感兴趣，转投前端，只能自学，但又不知如何下手，明知道红宝书和犀牛书是很好的书籍，奈何看着看着就想睡觉，每个字都能看懂，但一合上书就忘了今天看了啥，机缘巧合之下在某专门卖视频课的网站买了视频开始学习，这才逐步进入正轨，一改之前苦大仇恨不得要领，每天跟着视频课都学得很开心，因为能学进脑子里了，每天都能感觉到自己又多进步了一点，如此良性循环才算是入了门，入了门之后，才终于具备了自学的能力，因为知道路在哪里了，知道该怎么走了

视频的信息量低吗？低，无论是以前还是现在我都这么认为

但视频课的效率一定低吗？不一定，对于已经入了门有了足够经验的人来说，效率是低的，因为确实信息密度低嘛，但对于小白来说，重要的是要先入门，哪种方式能先入门哪种方式才是效率高的

掘金小册我认为是介于书籍和视频之间的一种形式，兼顾了二者的部分优点

多写

看了不一定就是会了，必须要亲自上手写才能考验出是否是真的懂了，看视频或者看书，每一页都能看懂，但是真正让你写了却不知道如何下手，那不叫懂，上学时对着答案做题就没有不会的，但没了答案或者换了个形式你就不会了，那不叫会

写什么？写所有你能写的代码，无论是什么代码

写多少？能写多少是多少，写得越多越好

有小白曾问过我，说他看别人写的代码都能看懂也能理解，但是让自己独立写的话，他就不知道该怎么写了，为什么会出现这种情况？我想都不想就知道这人代码写得太少了

这一行绝大部分人干的活，包括一些所谓的大厂员工（比如我），实际上真的都只是搬砖活而已，根本不需要太高的技术含量，也就是远不到比拼智商的时候，只要你智商和别人差得不太多，那么别人能够做到的事情，你肯定也能做到，如果你做不到，只是因为你懒罢了

这么说吧，我认为对于大多数人来说，如果他们有机会从一开始就进入并夕夕过上 997 的工作模式，只要不是真的智商有问题，那么经过了两年的高强度输出之后，技术能力怎么也能达到这个行业的中上水准，这就是多写带来的收益

你一年写得代码比其他人三年写得还多，一些代码编写规范或者设计模式你背都背下来了，水平还能怎么低？

没错，虽然zz不正确，但我依然鼓励加班，但，需要注意前提

前提是你是个初入技术大门的小白（老油条就没必要掺和了，瞎内卷），想快速提升技术水平不怕吃苦，只是想靠这行混碗饭并不天赋异禀，年轻力壮有冲劲，且你在的公司确实能让你学到一些东西。

有些人可能会说，想多写代码不一定非要加班啊，我完全可以自己整个项目自己写，我的看法是，可以当然可以，但恕我直言，你自己捣鼓的那个东西也就是个 Demo，你不面对复杂多变的需求，没有庞大的用户体量，没有苛刻的产品、测试，你是很难碰到有意义的问题的，毕竟自己写的东西自己怎么看都是对的

也有人会说，公司确实清闲，没啥需要加班的怎么办？好办啊，我从业那么多年，我还就没见过完美的项目，绝大多数情况下都是问题一个接一个的屎山，屎山虽然满是毒，但如果你能摸索着尝试改善屎山，在实践中去思考去总结去行动，对你的提升速度可比光看书强得多得多了。但是，必须要注意，自己折腾可以，千万要注意安全，别把跑得好好的屎山给整塌方了

加班是给自己加的，如果你在加班之后，完全感觉不到自己有什么收获只是想骂公司傻x，那么就没必要加这个班了

多思考

如果你能做到前一条的话，再做这一条就是顺理成章的事情了（除非你懒）

我刚入门编程的时候，完全不理解函数是什么，为什么要抽离函数，我只知道人家都说抽离函数好，所以我就抽离，至于为什么抽离、什么时候抽离、怎么抽离，我一概不知，只是照葫芦画瓢，我没有专门去理解这件事，因为我尝试过但是理解不了（就是笨吧），于是就不管了，但忽然有一天我发现我不知道什么时候已经理解这回事了，想了半天，我只能归结于我写代码写多了，自动理解了

但这不是一蹴而就的，这是一个逐渐积累的过程，可能我在每次封装函数的时候都会思考一点，我为什么封装了这个函数，给我带来了哪些好处，那么当我写得代码足够多，封装的函数足够多之后，我就完全理解了这回事

写代码的时候要思考，为什么我要这么写，还有没有更好的写法？相同的逻辑，别人是那样写的，我是这样写的，差别是什么，各自有什么优缺点？这个代码把我坑惨了，要是下次换我来写，我会怎么设计？

不必专门腾出时间来冥想，这些思考完全可以是零碎的、一闪而过的念头，但必须要有这种习惯，当你写得足够多的时候，这些零散的思考汇聚起来终有一天能给你带来别样的启发

小结

绝大部分人（包括我）所能用上的技术，都谈不上高深，并不需要什么天赋，确实就只是熟能生巧的事情，辛苦一两年，把这些熟练掌握，然后后面才有余力去做技术之外的事情，当然，你也会发现，相比于这些事情，