https://zhelin.me/493c3cffebcb6940/

由微软研究院针对GPT-4的研究论文《通用人工智能的火花：GPT-4 的早期实验》：

人工智能（AI）研究人员一直在开发和完善大型语言模型（LLMs），这些模型在各种领域和任务中展示出了令人瞩目的能力，挑战了我们对学习和认知的理解。OpenAI 最新开发的 GPT-4 [Ope23] 模型是使用前所未有的计算和数据规模进行训练的。在本文中，我们报告了我们对一早期版本的 GPT-4 进行调查的情况，当时它仍处于 OpenAI 的积极开发阶段。我们认为 GPT-4（这个早期版本）是一批表现出比以前的 AI 模型更一般智能的新一代 LLMs 的一部分（例如 ChatGPT 和 Google 的 PaLM）。我们讨论了这些模型不断增强的能力和意义。我们证明了，在掌握语言方面之外，GPT-4 可以解决涉及数学、编码、视觉、医学、法律、心理学等新颖而困难的任务，而无需任何特殊提示。此外，在所有这些任务中，GPT-4

https://zhelin.me/47627553bd09576fbdeafc11dc93bfbf/

敏感词过滤应该是许多后端同事经常会遇到的需求，无论是评论、弹幕、文章，都需要做敏感词过滤处理来规避风险。在前端开发中，使用replace函数来替换字符串是我们的常规操作，在这之前我思考过如果用JavaScript来实现敏感词过滤该怎么做。在学习过程中，接触到了Trie树，瞬间有一种拨开云雾见青天的感觉。 所以，我这里算法使用的是AC（Aho–Corasick）自动机算法、设计模式使用单例模式。会简单的对方案进行阐述，主要是代码实现，需要注意的是，在这里将采用TypeScript编写。同时代码也上传至GitHub，点击此处查看本文完整代码 Aho–Corasick算法是由Alfred V. Aho和Margaret J.Corasick 发明的字符串搜索算法，用于在输入的一串字符串中匹配有限组“字典”中的子串。它与普通字符串匹配的不同点在于同时与所有字典串进行匹配。算法均摊情况下具有近似于线性的时间复杂度，约为字符串的长度加所有匹配的数量。 在正式进入到AC自动机算法之前，我们需要先了解Trie树。 Trie树（字典树） 在维基百科中，Trie 树的解释是这样的： 在计算机科学中，trie，又称前缀树或字典樹，是一种有序树，用于保存关联数组，其中的键通常是字符串。 与二叉查找树不同，

https://zhelin.me/5eea45dd756329c3/

在追《创造101》时，因嫌看数据太麻烦做了【创造101成员网络数据】，在《创造101》结束后，抽时间做了【火箭少女101数据中心】，有很多小伙伴问我一些相关的问题，为了不让自己每次重复回答，所有准备写这一个系列的文章。当然啦，其实这个东西十分简单，我也琢磨着怎么下笔才能产生内容。但在此之前，我需要说明的是：

一般而言我们需要遵守网站的robots协议，该协议在域名的根目录下通过 http://xxx.com/robots.txt 的形式访问。这个文件告诉了爬虫什么目录可以访问，什么目录不可以访问。但遗憾的是，有可能你需要访问的数据在这个文件禁止访问的行列里，这个时候就不必遵循了......

但做为一个有节操的爬虫作者，你应该严格控制爬虫获取数据的节奏，高并发的请求会给服务器带来巨大的压力和占用大量带宽，虽然服务器有相关防范措施，但我们也需要掌握好这个度，不然IP可能会被BAN。

整体结构

文章分为三大部分：

• 从火箭少女101（创造101）了解爬虫——前端篇
• 从火箭少女101（创造101）了解爬虫——爬虫篇
• 从火箭少女101（创造101）了解爬虫—

https://zhelin.me/post/-e7-bd-91-e9-a1-b5-e6-9d-a1-e7-ba-b9-e8-a1-a8-e6-a0-bc-e7-9a-84-e4-b8-80-e4-ba-9b-e6-93-8d-e4-bd-9c-e6-96-b9-e6-b3-95/

走来先PO图，一张2008年的条纹表格是这样写的，Excuse me？ 2008年怎么说也是DIV+CSS了吧，怎么说也是样式表和HTML分离了吧， 这么写可以瞬间让前端炸毛的不知道吗？ 好的，平复一下心情。首先来说一下之前的效果： 1.加载完成时，表格是条纹效果。（已完成，就是上面那张炸毛的写法） 2.鼠标悬浮至该行时该行变色。 3.点击该行，这一行变色。表示被选中，重复点击取消选中。（但前面的复选框不会有改变） 4.点击复选框，指示被选中，但该行不变色。（冷漠） 5.点击全选框，指示被全选，但全部不变色。 以上是我拿到时整个表格的效果，原作者功能的实现如下图。 我看到时当时就懵逼了，因为我对原生JS并不在行，直接说通俗一点就是这代码我看不懂。这是我的问题，确实JS太差劲。

https://zhelin.me/3d767a0c0377f2421fa762098fd277a0/

之所以加倍的努力，

因为有一种想要去更大世界看看的欲望

https://zhelin.me/95a5cf572e791ece69251f3ca5d2e476/

前段时间在Ghost博客系统群与群友交流，谈到了Node内存管理的问题，发现很多小伙伴对Node内存管理完全处于一个“零认识”的状态，这可能与本身工作没有接触到相关，毕竟我们大多数工作可能与DOM打交道，当页面内存占用过多（可能性也很低），几乎不用等GC，用户已经刷新或关闭了网页。 做为前端工程师的我们，大多使用Node做一做小工具，这大多是短时间执行的场景，即使内存使用过多或是内存泄漏，也只会影响到我们使用者，随着进程的退出，内存也会释放。但面对Node服务端应用的开发，内存管理这样一个话题就不可避免的摆在了我们面前。虽然我对Node的认知也比较浅薄，但觉得也有必要将知道的内存相关知识整理一下。 第一次看重内存管理是在做推妹子前端占位图的时候，顺便了解了一下相关知识，算下来正好快一年了。基于Node无阻塞、事件驱动建立的网络服务，本身就具有内存消耗低的优点，但面对海量的图片处理请求，也不得不让我考虑超低配云服务器内存的问题。 V8内存管理 在浏览器开发工作中，我几乎没有遇到过垃圾回收对程序构成的性能影响。知道的也就是老生常谈的通过eval('Code')或是setTimeout('Code', 0)等方法动态改变作用域带来的性能影响。但都不会这样去写代码。我们知道Node的JavaScript执行引擎是V8，关于V8的历史，或是关于Node的历史我们就不在这里赘述了，毕竟学一门语言和使用一门框架，最先应该了解的是它是基于怎样的场景为了解决什么样的问题而诞生的。但我们必须要记住和了解的是：Node对JavaScript执行的优异表现直接受益于V8。它可以随着V8的升级享受到更好的性能表现和实现新的语言特性。但也会因为V8受到一些限制。 V8内存限制

https://zhelin.me/92c2857df42fa342/

React Fiber理念

1. 为什么ES语法中有Generator可以实现异步、中断、恢复的功能，React团队还要重新设计呢？

Fiber Principles: Contributing To Fiber #7942

• 类似async，Generator也是传染性的，使用了Generator则上下文的其他函数也需要作出改变。这样心智负担比较重;
• Generator执行的中间状态是上下文关联的;

同时，Generator虽然可以实现异步、中断、恢复，但无法调度更新的优先级。

2. Fiber架构的实现原理？

React Fiber Architecture

2.1 Fiber含义

2.1.1 架构

react15（Stack Reconciler）：Reconciler采用递归的方式执行，数据保存在递归的调用栈中。

react16（Fiber Reconciler）：基于Fiber节点实现的。

2.1.2 作为静态数据结构（虚拟DOM）

每个Fiber节点对应一个React

https://zhelin.me/post/0882e6eb04f593718090cbc83ce329f5/

选择排序，运行时间：O(n^2) // 找出数组中最小的数字 function findSmallest (arr) { let minValue = arr[0] let minIndex = 0 for (let i in arr) { let item = arr[i] if (item >= minValue) { continue } minIndex = i minValue = item } return minIndex } // 对数字进行排序 function selectionSort (arr) { let len = arr.length let newArr = [] for (let i = 0;

https://zhelin.me/1693a9bd6469ed1b/

前端性能优化是一个老生常谈的话题，导致前端卡顿的原因有很多，如何在工作开发中优化这些问题是一个需要长时间积累的过程，

而我们为缩短用户等待时间做出了一系列方案，以期「短益求短」。比如用 PWA 缓存更多可用的离线资源，让网页应用打开更快；借助 WebAssembly 规范缩小资源体积，提高执行效率。这些方案分别着眼于网络链路，前端资源处理速度等维度上，致力提高用户体验。

正是因为影响用户页面性能及加载速度较深的就是这几个维度：网络链路、服务器资源、前端资源渲染效率、用户端硬件。

那我们就基于这几个维度，拆开来谈。当然，磨刀不误砍柴工，一个趁手的工具，是完成优化的开始。

0. Web Vitals

如果是5年前，问起衡量前端性能优化的标准是什么，我想大部分会说加载速度，加载速度固然重要，但渐渐的我们发现，加载速度只是一个很主观的表现，大部分网页中，只要2秒能加载出来，这就是个符合标准的网站，但这样衡量，真的严谨吗？

Google推动Web Vitals计划，以提供网站开发者一套统一的用户体验和效能衡量标准。Google提到，网站要在长期发展上成功，就必须最佳化使

https://zhelin.me/post/83154e427cdb8791/

二分查找，其查找的列表必须有序。时间复杂度为：O(log n)

function binarySearch (list, item) {
// 保存最小与最大位置
let min = 0
let max = list.length - 1

// 最小位置是否小与等于最大位置
while (min <= max) {
let index = Math.floor((min + max) / 2)
let val = list[index]

if (val === item) {
  return index
} else if (val > item) {
  max = index - 1

https://zhelin.me/a833d3d09b637363/

在阅读《敏捷革命》之前，我一直不太能够全面的理解敏捷开发。也是通过阅读本书，了解了相关的知识。那么在这里，我会通过对本书的梳理，将我所了解到的知识点写下来。：

本章主要是通过失败的项目表达了对一个项目管理新思维的迫切性，在很长一段时间，人们习惯使用甘特图、瀑布法来管理项目，花大量的时间来制作精美的图片，“猜测”可能发生的问题。

但我们知道计划往往是跟不上变化的，在项目开发中更是如此，没有亘古不变的需求，也没有计划之中的BUG，那么之前的方法更加强调规范性，自上而下逐步实施的瀑布式软件开发方法。但很显然，这种开发流程进度缓慢，具有高度的不可预测性，还容易产出用户不愿意购买的产品，就是闭门造车的产物。

思维

本书提出的新思维就是“Scrum”，作者提到了它的优点——先进灵活，具有自我修复能力。

的确，两周一个迭代的开发工作具有灵活性和自我修复能力，但其实在很长一段时间，我都没感觉到它的先进性，这不是敏捷开发的问题，而是我和我的团队的问题。

因为在很长一段时间，我们只是了解了敏捷开发的皮毛，并没有了解到它的核心，因为现在很少有人能认真的去了解一个方法，并将它表述的通俗

https://zhelin.me/post/6b48782e6e093897c287165f6c17cd00/

二分查找，其查找的列表必须有序。时间复杂度为：O(log n)二分查询/简单查询对比（查找数23）二分查询/简单查询对比（查找数1）function binarySearch (list, item) { // 保存最小与最大位置 let min = 0 let max = list.length - 1 // 最小位置是否小与等于最大位置 while (min <= max) { let index = Math.floor((min + max) / 2) let val = list[index] if (val === item) { return index } else if (val

https://zhelin.me/post/76fc81e6349403957e27c8759f3ea44f/

很早之前就想将博客进行迁移了，到一直都是停留在想法阶段。之所以选择Ghost，因为我是个前端，Ghost毕竟是使用Node.js开发的，于我而言，都有很大的吸引力。 我们知道wordpress是个老牌的博客系统了，十分强大，优缺点我就不在赘述。选择Ghost必定要舍弃许多博客的功能，当然也可以二次开发。比如我现在用的这个博客主题是之前在Wordpress上使用的，迁移必定要再次重构Ghost的主题。像评论那些都得舍弃（第三方如畅言倒不用担心）。 那么我下面就具体谈谈迁移之中遇到的问题，先说说我的需求： 全站HTTP/2.0 使用Ghost系统 自建数据库 数据迁移 主题重构 一、全站HTTP/2.0 支持HTTP/2.0需要你有自己的服务器以及域名证书，那么服务器自不必说，花钱买，域名证书可以到腾讯云、阿里云申请免费的，有效期是一年，到期可续签。 因为我们需要使用反向代理，并且要上HTTP/2.0，那么Nginx就是我们的选择了。安装Nginx网上教程十分多，CentOS可以使用yum直接安装，自动解决依赖的问题，后面的数据库安装将是使用Yum安装。那么我在这里说说Nginx的编译安装： 编译安装（

https://zhelin.me/1998374abcc7facd/

走来先PO图，一张2008年的条纹表格是这样写的，Excuse me？

2008年怎么说也是DIV+CSS了吧，怎么说也是样式表和HTML分离了吧，

这么写可以瞬间让前端炸毛的不知道吗？

好的，平复一下心情。首先来说一下之前的效果：

1.加载完成时，表格是条纹效果。（已完成，就是上面那张炸毛的写法）

2.鼠标悬浮至该行时该行变色。

3.点击该行，这一行变色。表示被选中，重复点击取消选中。（但前面的复选框不会有改变）

4.点击复选框，指示被选中，但该行不变色。（冷漠）

5.点击全选框，指示被全选，但全部不变色。 以上是我拿到时整个表格的效果，原作者功能的实现如下图。

我看到时当时就懵逼了，因为我对原生JS并不在行，直接说通俗一点就是这代码我看不懂。这是我的问题，确实JS太差劲。

https://zhelin.me/post/e4aba903f3826e7b/?

得益于RouterOS强大的能力，我们可以尝试BGP、OSPF等协议来自定义路由，但这些方式或多或少有一些上手难度。在家庭网络中，使用这些协议的维护成本是比较高的。在很长一段时间对于上网的需求我都是基于旁路网关 + DHCP 模式，而我也时常在想还有没有更为简单、影响范围更小的上网方式。

得益于前段时间旁路网关放弃了 OpenWrt 改用 Ubuntu，相较于 OpenWrt 这种路由系统，我认为 Linux 系统做旁路网关自主性更高一点（虽然 OpenWrt 也是基于 Linux）。而此时，更为简单的上网方式想法在我心中躁动了起来。

该篇文章需要使用Fake IP模式，如果不知道这个是什么，那就可以关闭了；

1. RouterOS 配置

2. 新增table，该配置在 Routing -> Tables 下：

3. 新增 Fake IP 列表，在 IP -> Firewall

https://zhelin.me/a17917fbf92308935bb998cb11cea9a7/

因为工作的需要，可能有的时候需要用的路由，虽然在Github上有许多大大小小已成熟的路由插件，但人有时候就是这样，宁愿自己写一个，也不愿多看几遍文档。这个是已经完成的路由插件地址：miniRouter，插件大小不足3kb，也没有任何依赖。虽然简单，我也觉得有必要整理成文，分享给大家。因为我使用的代码风格规范是JavaScript Standard Style所以代码我不会以分号结尾。那么现在写一个插件，很重要的是要兼容AMD/CMD等标准，自适应不同的引用。那么这个“起手式”就很重要。我记得我出来工作那会写插件大多以这种形式：(function(){ var MiniRouter = function(ele, opt) { // ... this.init() } MiniRouter.prototype = { init: function() { // ... } } })() 原型模式在插件开发中有举足轻重的地位，但这并不是我们上述的起手式，那么插件开发的起手式是什么呢？我也就不卖关子了，就是下面这样：;(function (root, factory) { if (typeof define === 'function' &&

https://zhelin.me/post/242d20007d21ba8d5676916be1e0b313/

工作中经常要用到占位图，但是大多数占位图都是纯色且单调的。所以闲着没事用Node写了一个妹子占位图程序，供各位在工作中使用。接收有四个分类及接收三个参数。具体大家可以点击这里查看。

如何使用它

我们需要使用链接https://tuimeizi.cn/random来接收参数，/random只是其中的一个类别，[这里](https://tuimeizi.cn)详细描述各个参数的含义。同时默认SSL及HTTP2.0传输。

网站地址：https://tuimeizi.cn

https://zhelin.me/post/8e2564a5124f4b78ed4ab17ccb6ceee0/

如今浏览器能够实现的特性越来越多，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化，就变得越来越重要了。

开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升，所以任何一点儿小小的优化都会提升你网站的性能。

前端给力的地方是可以有许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你一些前端性能优化的最佳实践，只需要一分钟，就可以优化你现有的代码。

最佳实践1：使用DocumentFragments或innerHTML取代复杂的元素注入

DOM操作在浏览器上是要付税的。尽管性能提升是在浏览器，DOM很慢，如果你没有注意到，你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了。

现在假设我们页面中有一个

元素，调用AJAX获取JSON列表，然后使用JavaScript更新元素内容。通常，程序员会这么写：

Javascript代码

var list = document.querySelector('ul'); ajaxRes

https://zhelin.me/post/514d343a2be74cd510d0545c213c3c4f/

使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。

常听人说：

移动端要想动画性能流畅，应该使用3d硬件加速

最近深入了解了一些浏览器内核的细节，感觉这里面其实有坑啊。。。

事情要从最近看的《WebKit技术内幕》说起，第二章介绍了网页的结构，其中提到了Webkit硬件加速的方式，会把需要渲染的元素放到特定的『Composited Layer』中，在chrome的控制台可以这样开启：

选择『Show composited layer borders』以后，就能看到有动画3d变换的元素会被一个黄色的边框圈起来，表示放到了一个新的『复合层（composited layer）』中渲染，大概长这个样子：

蓝色的细线是浏览器渲染时候的『瓦片』，浏览器绘制页面的时候只会绘制可视区域一定范围内的瓦片，以节省性能开销，而黄色的边框框起来的，就代表了这个元素被放到特殊的复合层中渲染，跟主文档不在一个层中

然后我觉得这个视图挺有意思的，就拿来看

https://zhelin.me/article/f92308935bb998cb/

因为工作的需要，可能有的时候需要用的路由，虽然在Github上有许多大大小小已成熟的路由插件，但人有时候就是这样，宁愿自己写一个，也不愿多看几遍文档。这个是已经完成的路由插件地址：miniRouter，插件大小不足3kb，也没有任何依赖。虽然简单，我也觉得有必要整理成文，分享给大家。因为我使用的代码风格规范是JavaScript Standard Style所以代码我不会以分号结尾。

那么现在写一个插件，很重要的是要兼容AMD/CMD等标准，自适应不同的引用。那么这个“起手式”就很重要。我记得我出来工作那会写插件大多以这种形式：

(function(){
var MiniRouter = function(ele, opt) {
// ...

this.init()

}

MiniRouter.prototype = {
init: function() {
// ...
}
}
})()

原型模式在插件开发中有举足轻重的地位，但这并不是我们上述的起手式，那么插件开发的起手式是什么呢？我也就不卖关子了，就是下面这样

https://zhelin.me/95a5cf572e791ece69251f3ca5d2e476/?

前段时间在Ghost博客系统群与群友交流，谈到了Node内存管理的问题，发现很多小伙伴对Node内存管理完全处于一个“零认识”的状态，这可能与本身工作没有接触到相关，毕竟我们大多数工作可能与DOM打交道，当页面内存占用过多（可能性也很低），几乎不用等GC，用户已经刷新或关闭了网页。

做为前端工程师的我们，大多使用Node做一做小工具，这大多是短时间执行的场景，即使内存使用过多或是内存泄漏，也只会影响到我们使用者，随着进程的退出，内存也会释放。但面对Node服务端应用的开发，内存管理这样一个话题就不可避免的摆在了我们面前。虽然我对Node的认知也比较浅薄，但觉得也有必要将知道的内存相关知识整理一下。

第一次看重内存管理是在做推妹子前端占位图的时候，顺便了解了一下相关知识，算下来正好快一年了。基于Node无阻塞、事件驱动建立的网络服务，本身就具有内存消耗低的优点，但面对海量的图片处理请求，也不得不让我考虑超低配云服务器内存的问题。

V8内存管理

在浏览器开发工作中，我几乎没有遇到过垃圾回收对程序构成的性能影响。知道的也就是老生常谈的通过eval('Code')或是setT

https://zhelin.me/post/ead7d9b97b09e2961e9a97419bfc3a05/

作用域，这个词在编程界经常能听到看到，每一个程序员几乎都有被问到过。在前端圈，面试JavaScript相关知识，这可以算说是一个非常基础的问题了。但很多时候我们可能“只可意会不可言传”，无法用具象的语言来描述它。

https://zhelin.me/post/76fc81e6349403957e27c8759f3ea44f/

很早之前就想将博客进行迁移了，到一直都是停留在想法阶段。之所以选择Ghost，因为我是个前端，Ghost毕竟是使用Node.js开发的，于我而言，都有很大的吸引力。

我们知道wordpress是个老牌的博客系统了，十分强大，优缺点我就不在赘述。选择Ghost必定要舍弃许多博客的功能，当然也可以二次开发。比如我现在用的这个博客主题是之前在Wordpress上使用的，迁移必定要再次重构Ghost的主题。像评论那些都得舍弃（第三方如畅言倒不用担心）。

那么我下面就具体谈谈迁移之中遇到的问题，先说说我的需求：

• 全站HTTP/2.0
• 使用Ghost系统
• 自建数据库
• 数据迁移
• 主题重构

一、全站HTTP/2.0

支持HTTP/2.0需要你有自己的服务器以及域名证书，那么服务器自不必说，花钱买，域名证书可以到腾讯云、阿里云申请免费的，有效期是一年，到期可续签。

因为我们需要使用反向代理，并且要上HTTP/2.0，那么Nginx就是我们的选择了。安装Nginx网上教程十分多，CentOS可以使用yum直接安装，自动解决依赖的问题，后面的数据库安装

https://zhelin.me/229fbf9ebf2b57f6/

关键点

1. Rust没有null，但null的概念还是有用的，因某种原因而变为无效或缺失的值 Option

2. Struct结构体

定义

方法

1. 方法和函数类似：fn关键字、名称、参数、返回值
2. 使用impl定义
3. self可以获得所有权，可以借用也可以可变借用
4. 每个struct允许拥有多个impl快

struct Rectangle {
width: u32,
}

impl Rectangle {
// self 可以获得所有权，也可以使用可变的借用&mut self
fn test(&self) -> {
self.width
}
}

• 方法实在struct（或enum、trait对象）的上下文中定义
• 第一个参数是self，表示方法被调用的struct实例

关联函数

1. 可以在impl块里定义不把self作为第一个参数的函数，

https://zhelin.me/article/55a64d40ffbb030d/?

使用Portainer忘记密码快速解决方案：

1、进入服务器后台

2、下载镜像：portainer/helper-reset-password

sudo docker pull portainer/helper-reset-password

3、停止portainer

sudo docker stop portainer

4、重置密码

portainer_data 是你创建的Portainer卷

sudo docker run --rm -v portainer_data:/data portainer/helper-reset-password

执行后输出：

{

https://zhelin.me/post/7f5bdbb2857e15aa/

在我将家里的主路由改为RouterOS后，始终找不到一个能完美更新内网设备IPv6的脚本，要么是通过EUI64转换的，要么就是端口转发，还有引入第三个设备，用别的语言去做DDNS的更新，这些方案虽然都能实现最终的效果，但无疑是增加了别的成本，RouterOS本身就支持，舍近求远并不是我的风格，但在查找了一周后无果后，只有自己动手写这个脚本了。

那先说这个脚本的需求：

运行在RouterOS上，自动获取指定内网设备的IPv6地址，具有自动更新、定时检查等功能；

1. 开始之前

在开始写之前，我们要知道 RouterOS 脚本使用的是 MikroTik RouterOS 特定的脚本语言，它是一种专为 MikroTik 路由器设备设计的脚本语言。这个脚本语言被用于配置和自动化 MikroTik 路由器上的各种任务和功能。这种脚本语言与一般的编程语言略有不同，具体的语法和功能集是为了满足 MikroTik RouterOS 的特定需求而设计的。所以，在开始之前我们需要了解基本的语法：Scripting - RouterOS ，不过幸运的是，这个语法并不难。

2. 脚本编写

https://zhelin.me/post/523e5859795170ae/

控制器Controller @controller() 装饰 使用 import { Controller, Get } from '@nestjs/common'; @controller('cats') export class CatsController { @get() findAll(): string { return 'This action returns all cats'; } } Providers/Services @Injectable() 装饰 使用 import { CatsService } from './cats.service'; // 构造函数参数可以使用 @Inject(CatsService) 装饰器 // 控制器 @controller('cat') export class CatController { constructor( private readonly catService:

https://zhelin.me/83e19b1a7821ce77/?

敏感词过滤应该是许多后端同事经常会遇到的需求，无论是评论、弹幕、文章，都需要做敏感词过滤处理来规避风险。在前端开发中，使用replace函数来替换字符串是我们的常规操作，在这之前我思考过如果用JavaScript来实现敏感词过滤该怎么做。在学习过程中，接触到了Trie树，瞬间有一种拨开云雾见青天的感觉。

所以，我这里算法使用的是AC（Aho–Corasick）自动机算法。会简单的对方案进行阐述，主要是代码实现，需要注意的是，在这里将采用TypeScript编写。同时代码也上传至GitHub，点击此处查看本文完整代码

Aho–Corasick算法是由Alfred V. Aho和Margaret J.Corasick 发明的字符串搜索算法，用于在输入的一串字符串中匹配有限组“字典”中的子串。它与普通字符串匹配的不同点在于同时与所有字典串进行匹配。算法均摊情况下具有近似于线性的时间复杂度，约为字符串的长度加所有匹配的数量。

在正式进入到AC自动机算法之前，我们需要先了解Trie树。

Trie树（字典树）

在维基百科中，Trie 树的解释是这样的：

在计

https://zhelin.me/47627553bd09576fbdeafc11dc93bfbf/

敏感词过滤应该是许多后端同事经常会遇到的需求，无论是评论、弹幕、文章，都需要做敏感词过滤处理来规避风险。在前端开发中，使用replace函数来替换字符串是我们的常规操作，在这之前我思考过如果用JavaScript来实现敏感词过滤该怎么做。在学习过程中，接触到了Trie树，瞬间有一种拨开云雾见青天的感觉。 所以，我这里算法使用的是AC（Aho–Corasick）自动机算法、设计模式使用单例模式。会简单的对方案进行阐述，主要是代码实现，需要注意的是，在这里将采用TypeScript编写。同时代码也上传至GitHub，点击此处查看本文完整代码 Aho–Corasick算法是由Alfred V. Aho和Margaret J.Corasick 发明的字符串搜索算法，用于在输入的一串字符串中匹配有限组“字典”中的子串。它与普通字符串匹配的不同点在于同时与所有字典串进行匹配。算法均摊情况下具有近似于线性的时间复杂度，约为字符串的长度加所有匹配的数量。 在正式进入到AC自动机算法之前，我们需要先了解Trie树。 Trie树（字典树） 在维基百科中，Trie 树的解释是这样的： 在计算机科学中，trie，又称前缀树或字典樹，是一种有序树，用于保存关联数组，其中的键通常是字符串。 与二叉查找树不同，

https://zhelin.me/316365badb0350b2407a4c6e8c3bcc5c/

快速排序算是非常经典与优雅的排序算法之一了，去年前端圈闹得沸沸扬扬的一件事也与它有关。不过阮一峰老师写的快速排序算法我一直没去看过，所以不予置评。 1、蛋糕问题 与二分查找与选择排序不同，快速排序我决定详细的把自己的理解分享出来，在讨论快速排序之前，我们来思考这样一个问题。假设你的朋友过生日，订了一个长64cm宽40cm的蛋糕，现场他问了一个问题：这个长方形至多能切多少个最大的小正方形？ 我们把上面那个问题捋一捋： 长方形的蛋糕 切的最多 切出来的蛋糕是最大的正方形 那么我们该怎么做呢？有一句话说的非常好：“如果这个问题无法解决，那就解决提出这个问题的人。”这是一个不错的方案，开玩笑。因为这个问题是可以解决的，这也就引出了一种**——分治法（divide and conquer, D&C），那么下面，我们就用这种**来切这一块蛋糕。 我们先把蛋糕放在这里，讨论一种极端理想的情况，如果这个蛋糕的长是64cm宽是32cm，那我们就很好分了，那么最大我们可以切成32cm X 32cm的正方形蛋糕，至多可以切成两块。 当然，这是在一个理想的情况下，事实上我们手上的这块蛋糕要复杂一些。这个时候我们就需要用D&C策略了，使用D&

https://zhelin.me/523e5859795170ae/?

控制器Controller

@controller() 装饰

使用

import { Controller, Get } from '@nestjs/common';

@controller('cats')
export class CatsController {
@get()
findAll(): string {
return 'This action returns all cats';
}
}

Providers/Services

@Injectable() 装饰

使用

import { CatsService } from './cats.service';

// 构造函数参数可以使用 @Inject(CatsService) 装饰器

// 控制器
@controller('cat')
export class CatController {
constructor( private readonly catService:

https://zhelin.me/ead7d9b97b09e2961e9a97419bfc3a05/

作用域，这个词在编程界经常能听到看到，每一个程序员几乎都有被问到过。在前端圈，面试JavaScript相关知识，这可以算说是一个非常基础的问题了。但很多时候我们可能“只可意会不可言传”，无法用具象的语言来描述它。

https://zhelin.me/post/1ad636b819433d3d/

这是我读《React设计原理》的读书笔记，算是一个持续更新的东西。因为是边读边记，并没有下来去整理。

https://zhelin.me/post/281bb7afdc9b8a8f/

1. 防火墙基础

1.1. 什么是防火墙

防火墙是计算机网络安全的基本组成部分，用于保护网络免受未经授权的访问和潜在威胁的侵害。它是一种网络安全设备或软件，位于网络之间，根据事先定义的规则过滤传入和传出的数据流。防火墙的主要目标是控制数据流的访问权限，确保只有经过授权的用户或系统可以与网络资源进行通信。

1.2. 防火墙的作用

访问控制：防火墙允许管理员定义规则，以确定哪些网络流量是允许的，哪些是禁止的。这种访问控制可以基于源IP地址、目标IP地址、端口号和其他协议相关信息。

数据包过滤：防火墙对每个传入或传出的数据包进行检查，并根据预定义的规则决定是否允许通过。这可以帮助防止恶意攻击和网络入侵。

网络地址转换（NAT）：防火墙可以执行NAT，将内部网络的私有IP地址转换为公共IP地址，以保护内部网络的隐私，并实现多台设备共享单个公共IP地址的功能。

防御协议攻击：防火墙还可以检测和抵御某些协议攻击，如DDoS（分布式拒绝服务攻击）和SYN洪水攻击，以保持网络的可用性。

1.3. 防火墙的工作原理

防火墙基于一组规则和策略来工作。当数据流经防火