Toypipi's blog

发表于 更新于 分类于 本文字数： 870 阅读时长 ≈ 3 分钟

HTTP（Hypertext Transfer Protocol）是用于传输超文本的应用层协议，它被用于在客户端和服务器之间传输和呈现超文本。

  1. HTTP 1.0：

    • 特性：
      • 使用明文传输数据，不提供数据加密。
      • 请求-响应模型，每个请求都需要服务器单独响应。
      • 不支持持久连接，每个请求/响应都需要建立新的 TCP 连接。
      • 无法复用连接，每个请求都会在单独的连接上处理。
      • 不支持请求的优先级，请求之间平等对待。
    • 缺点：
      • 性能较差，多次连接建立和拆除的开销。
      • 安全性差，数据明文传输容易被窃听和篡改。

  2. HTTP 1.1：

    • 特性：
      • 引入持久连接，减少了连接的建立和拆除开销。
      • 引入请求的优先级，可以根据需求标识请求的优先级。
      • 支持管道化，允许多个请求/响应在一个连接上同时处理。
      • 引入分块传输编码，允许数据分块传输。
    • 缺点：
      • 依然使用明文传输，存在安全风险。
      • 性能提升有限，管道化和请求优先级的支持不够强大。
阅读全文 »

发表于 分类于 本文字数： 1.2k 阅读时长 ≈ 4 分钟

定义

适配器模式（Adapter Pattern）是一种结构性设计模式，它用于将一个类的接口转换成客户端代码期望的另一个接口。这使得原本不兼容的接口能够一起工作。适配器模式通常用于以下情况：

系统需要使用一些已存在的类，但这些类的接口与系统要求的接口不匹配。

系统需要一个可以重用的类，这个类能够与其他类或者系统一起工作，但这个类的接口不符合系统的要求。

适配器模式包括以下几种类型：

对象适配器模式：在这种模式中，适配器类继承自已存在的类，同时实现目标接口。这种方式使用了组合，将一个对象包含在适配器中。

类适配器模式：在这种模式中，适配器类同时继承自已存在的类和实现目标接口。这是使用多重继承的一种方式，通常在静态编程语言中较难实现。

真实世界中的适配器

  • 电源适配器（电脑，手机……）
  • iPhone 手机的 3.5 毫米耳机插口转接头
阅读全文 »

发表于 分类于 本文字数： 248 阅读时长 ≈ 1 分钟

DESCRIPTION

SOLUTION

  • 方法一：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function solution(list) {
  // 检查是否为空
  if (list.length === 0) {
    return "";
  }
  // 定义 result 保存最终结果的数组
  let result = [];
  // 记录连续数字开始值
  let start = list[0];
  // 记录连续数字结束值
  let end = list[0];
  // 从第二个元素开始遍历 list 中的元素
  for (let num of list.slice(1)) {
    // 如果 num 等于 end + 1,则 num 与前一个元素连续，将 end 更新为 num
    if (num === end + 1) {
      end = num;
    } else {
      // 处理连续的 3 个数字或以上，如果 end - start >= 2,则将 `${start}-${end}` 添加到 result 中
      if (end - start >= 2) {
        result.push(`${start}-${end}`);
      } else {
        // 连个数字以下
        for (let j = start; j <= end; j++) {
          result.push(j.toString());
        }
      }
      // 更新 start 和 end 值
      start = end = num;
    }
  }

  // 处理循环结束的最后一组连续数字
  if (end - start >= 2) {
    result.push(`${start}-${end}`);
  } else {
    for (let j = start; j <= end; j++) {
      result.push(j.toString());
    }
  }

  return result.join(",");
}
阅读全文 »

发表于 分类于 本文字数： 337 阅读时长 ≈ 1 分钟

修改 map option，将香港、澳门和台湾的透明度设置为 0，同时不显示标签名：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
series: [
  {
    name: "",
    type: "map",
    map: "china",
    roam: true,
    itemStyle: {
      label: { show: true, areaColor: "#b4e8fe" },
    },
    emphasis: { label: { show: true } },
    data: [
      { name: "北京", value: 0, id: 110000 },
      { name: "天津", value: 0, id: 120000 },
      { name: "上海", value: 0, id: 310000 },
      { name: "重庆", value: 0, id: 500000 },
      { name: "河北", value: 0, id: 130000 },
      { name: "河南", value: 0, id: 410000 },
      { name: "云南", value: 0, id: 530000 },
      { name: "辽宁", value: 0, id: 210000 },
      { name: "黑龙江", value: 0, id: 230000 },
      { name: "湖南", value: 0, id: 430000 },
      { name: "安徽", value: 0, id: 340000 },
      { name: "山东", value: 0, id: 370000 },
      { name: "新疆", value: 0, id: 650000 },
      { name: "江苏", value: 0, id: 320000 },
      { name: "浙江", value: 0, id: 330000 },
      { name: "江西", value: 0, id: 360000 },
      { name: "湖北", value: 0, id: 420000 },
      { name: "广西", value: 0, id: 450000 },
      { name: "甘肃", value: 0, id: 620000 },
      { name: "山西", value: 0, id: 140000 },
      { name: "内蒙古", value: 0, id: 150000 },
      { name: "陕西", value: 0, id: 610000 },
      { name: "吉林", value: 0, id: 220000 },
      { name: "福建", value: 0, id: 350000 },
      { name: "贵州", value: 0, id: 520000 },
      { name: "广东", value: 0, id: 440000 },
      { name: "青海", value: 0, id: 630000 },
      { name: "西藏", value: 0, id: 540000 },
      { name: "四川", value: 0, id: 510000 },
      { name: "宁夏", value: 0, id: 640000 },
      { name: "海南", value: 0, id: 460000 },
      {
        name: "香港",
        itemStyle: {
          normal: { opacity: 0 },
        },
        label: { show: false },
      },
      {
        name: "澳门",
        itemStyle: {
          normal: { opacity: 0 },
        },
        label: { show: false },
      },
      {
        name: "台湾",
        itemStyle: {
          normal: { opacity: 0 },
        },
        label: { show: false },
      },
      { name: "南海诸岛", value: 0, id: 460324 },
    ],
    label: {
      show: true,
      fontSize: 12,
      color: "#dcdcdc",
    },
    zoom: 1.25,
  },
];
阅读全文 »

发表于 分类于 本文字数： 389 阅读时长 ≈ 1 分钟

Vue 2.x 的虚拟 DOM 采用的是基于 Snabbdom 库实现的 diff 算法。其基本思想是通过比较新旧节点，找出它们之间的差异，然后将这些差异应用于真实 DOM 上，从而最小化 DOM 操作次数，提高渲染效率。

Vue 2.x 的 diff 算法主要分为以下几个步骤：

  1. 新旧节点的比较：首先比较新旧节点的类型和标签名，如果不同，则直接替换整个节点；如果相同，则继续比较节点的属性和子节点。

  2. 属性的比较：对于同一节点，比较它们的属性是否相同，如果不同，则更新属性值。

  3. 子节点的比较：对于同一节点，比较它们的子节点是否相同，如果不同，则递归地对子节点进行比较。

  4. 列表的比较：对于列表节点，比较它们的子节点是否相同，如果不同，则使用 diff 算法找出它们之间的差异，然后更新列表。

  5. 键值的比较：在进行列表比较时，如果节点具有 key 值，则通过 key 值来快速定位节点，从而提高比较效率。

总的来说，Vue 2.x 的 diff 算法是一种高效的算法，可以最小化 DOM 操作次数，提高渲染效率。但是，开发者仍然需要注意一些性能问题，如避免过多的嵌套组件、避免重复渲染等，以优化应用程序的性能。

0%