什么是SSE(Server-Sent Event)

近在做大屏数据可视化项目时要求用图表实时展示最新数据变化,考虑到有大量的图表需要展示,因此轮询请求不予以考虑了,然后想到了支持全双工通信的 websocket。为了实时展示这些图表专门建立一个 websocket 连接也是可以的,然而总觉得杀鸡用牛刀了。知道查询到 Server-sent Event,顿时觉得这才是完美的解决方案。

如何用Vite快速搭建一个vue3项目

vite 一个由 vue 作者尤雨溪开发的 web 开发工具,它具有以下特点:

  1. 快速的冷启动
  2. 即时的模块热更新
  3. 真正的按需编译

至于为什么选择 vite,官网上介绍的很详细,可点击查看为什么选择 vite,这里主要介绍一下如何用 vite 搭建一个包含前端开发常用配置的前端项目

Javascript 数据结构与算法

一个后进先出的数据结构
javascript 中没有栈 可以用 Array 实践栈的所有功能

const stack = [];
stack.push(1);
stack.push(2);
const item1 = stack.pop();
const item2 = stack.pop();

使用场景: 所有后进先出的场景 函数调用堆栈
leetcode 练习题:20

深度和广度优先搜索

算法是作用于具体数据结构之上的,深度优先搜索算法和广度优先搜索算法都是基于“图”这种数据结构的。这是因为,图这种数据结构的表达能力很强,大部分涉及搜索的场景都可以抽象成“图”。

堆和堆排序

堆这种数据结构的应用场景非常多,最经典的莫过于堆排序了。
堆排序是一种原地的、时间复杂度为 O(nlogn) 的排序算法。前面我们学过快速排序,平均情况下,它的时间复杂度为 O(nlogn)。尽管这两种排序算法的时间复杂度都是 O(nlogn),甚至堆排序比快速排序的时间复杂度还要稳定,但是,在实际的软件开发中,快速排序的性能要比堆排序好,这是为什么呢?

二叉树

前面我们讲的都是线性表结构,栈、队列等等。今天我们讲一种非线性表结构,树。树这种数据结构比线性表的数据结构要复杂得多

哈希算法

将任意长度的二进制值串映射为固定长度的二进制值串,这个映射的规则就是哈希算法,而通过原始数据映射之后得到的二进制值串就是哈希值

要想设计一个优秀的哈希算法并不容易,根据我的经验,我总结了需要满足的几点要求:

  1. 从哈希值不能反向推导出原始数据(所以哈希算法也叫单向哈希算法);
  2. 对输入数据非常敏感,哪怕原始数据只修改了一个 Bit,最后得到的哈希值也大不相同;
  3. 散列冲突的概率要很小,对于不同的原始数据,哈希值相同的概率非常小;
  4. 哈希算法的执行效率要尽量高效,针对较长的文本,也能快速地计算出哈希值。

散列表

散列表的英文叫“Hash Table”,我们平时也叫它“哈希表”或者“Hash 表”
散列表用的是数组支持按照下标随机访问数据的特性,所以散列表其实就是数组的一种扩展,由数组演化而来。可以说,如果没有数组,就没有散列表。

散列表用的就是数组支持按照下标随机访问的时候,时间复杂度是 O(1) 的特性。我们通过散列函数把元素的键值映射为下标,然后将数据存储在数组中对应下标的位置。当我们按照键值查询元素时,我们用同样的散列函数,将键值转化数组下标,从对应的数组下标的位置取数据。

跳表

跳表这种数据结构对你来说,可能会比较陌生,因为一般的数据结构和算法书籍里都不怎么会讲。但是它确实是一种各方面性能都比较优秀的动态数据结构,可以支持快速地插入、删除、查找操作,写起来也不复杂,甚至可以替代红黑树(Red-black tree)。

二分法查找

二分查找针对的是一个有序的数据集合,查找思想有点类似分治思想。每次都通过跟区间的中间元素对比,将待查找的区间缩小为之前的一半,直到找到要查找的元素,或者区间被缩小为 0。

递归

如何理解“递归”?

递归是一种应用非常广泛的算法(或者编程技巧)。之后我们要讲的很多数据结构和算法的编码实现都要用到递归,比如 DFS 深度优先搜索、前中后序二叉树遍历等等

所有的递归问题都可以用递推公式来表示

f(n)=f(n-1)+1 其中,f(1)=1

如何快速生成tsconfig.json文件

问题缘由

在 typescript 项目中我们都需要配置 tsconfig.json,在此之前的配置方法都是从网上模仿别人的然后修该或添加自己的配置项。随着项目的增多每次都要去复制感觉很麻烦,就想找一个更好的解决办法快速生成 tsconfig.json 文件。

用Ssh连接docker容器

用 docker commit 的方式创建 ssh 直连 docker 容器镜像

  1. 拉取镜像,这里采用 centos:7 作为基础镜像
docker pull centos:7
  1. 运行镜像,生成容器
docker run -d --name ssh_box --privileged=true centos:7 /usr/sbin/init
07228ec257564c4874ca24216d651bda65573d49e4149064a079cacca27de4e1 # 生成的容器ID

Wireshark过滤器使用介绍

在工作中我们常会用到 wireshark 抓取数据包进行分析,当使用 wireshark 默认设置时,会捕获到大量冗余的数据包,如果没有过滤器过滤,我们很难找到自己想要抓取的数据,这个时候就需要用到 wireshark 的过滤器来过滤,它们可以帮助我们在庞杂的结果中迅速找到我们需要的信息。
wireshark 提供的过滤器有捕捉过滤器和显示过滤器。

Webpack编译后的html中图片路径变为[object Module]的原因及解决办法

问题缘由

在 html 模板页面中我们有时候要直接插入图片 img。如果直接写绝对路径例如<img src="https://static.yidongtimes.com/dist/mobile/v2/img/notice/fishingTips/waiting.png" alt="">,页面可以访问到图片但是图片不经过 webpack 处理(压缩,添加哈希后缀等)。这样操作图片也不能作为资源一起编译处理到 dist 文件夹中。因此需要找到更好的解决办法