刘炳全的博客

原创 初识RAG

RAG

原创 初识ai Agent

ai Agent

原创 xss和CSRF的攻击和防御

xss（跨站脚本攻击）是一种通过向网页端注入恶意脚本，在用户浏览器执行攻击代码的漏洞，会通过url参数、表单提交等，窃取用户的身份凭证（如cookie、session）和篡改页面内容（如插入虚假广告或链接）。用户输入渲染（评论、搜索、URL 参数）第三方脚本（广告、统计、CDN）富文本编辑器Markdown 渲染JSON 数据直接插入 HTML用fonttextContent代替innerHTML用户输入必须转义对用户输入的信息必须转义，仅允许安全字符；转义特殊字符：< > & " ’

原创 mitmproxy抓包工具

1、下载&安装2、启用3、移动端抓包4、web端抓包。

原创 node和npm的版本灵活切换【NVM】

点击开始菜单，找到nodejs文件夹，点击Uninstall Node.js，再到终端cmd，运行node -v，查看node版本，如果没能查看到版本说明已经删除成功。（1）在指定文件夹创建两个文件夹，一个用来存放nvm的安装文件，另外一个存放node的文件，将下载解压好的nvm-setup.exe运行安装，其中的nvm路径选以上的nvm文件，node文件路径选以上创建的node文件；（3）至此安装nvm成功，可以通过nvm指令安装、切换不同版本的nodejs，通过nvm -V 查看所有可用命令。

原创 Cherry Markdown Editor

给大家推荐一款很Nice~的编辑器，并对Cherry Markdown Editor进行一个简单的.vue封装，并添加了目录，置顶等功能。Cherry Markdown Editor 是一款 Javascript Markdown 编辑器，具有开箱即用、轻量简洁、易于扩展等特点. 它可以运行在浏览器或服务端(NodeJs)。官方文档；;cherry-markdown Example 效果图cherry-markdown API示意图。

原创 代码高亮编辑

本文介绍了多种代码高亮工具的实现方式，包括highlight.js、Prismjs、vue-codemirror等，并重点演示了highlight.js和Prismjs的使用方法。highlight.js通过字符串解析生成DOM树并添加CSS样式实现代码高亮，支持行号显示；Prismjs则具有轻量、可扩展等特点，配置简单且支持多种语言。文章提供了详细的安装、引入和配置步骤，帮助开发者快速实现代码高亮功能。

原创 Git操作总结

原创 Webpack打包原理

一、什么是Webpack原理： webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，最后将所有这些模块打包成一个或多个bundle。详细描述： webpack就像一条流水线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一

原创 RegExp小菜一道

正则表达式（regular expression）是一种描述字符串的模式对象。它的历史可追溯至上个20世纪50年代科学家在数学领域做的一些研究，后来被引入计算机领域，底层实现原理是使用状态机的思想进行模式匹配；通俗地讲，就是利用一些特定的表达语法，和其中提供的可以与字符串对象一同使用的所有属性和方法来对字符串进行解析、格式检查、替换等操作。本文是由本吃货在业务开发时，觉得自己在正则的掌握上较弱；且是在胃不争气的情况下写下此文，所以会联想到吃的。

原创 数组去重的几种方式

本文属于个人闲来无事，写写记录一下；看到有大量地方都有使用循环，结合自己在数据处理时，也常常使用大量循环去过滤，匹配，构造，查看等操作去处理数据。在相同的数据处理场景下，不同的伙伴却使用了不同的循环，而且都能满足预期的结果，那哪个在同等的应用场景下使用场景比较优勒。带着疑问看一下内容，希望对往后的开发有所帮助。

原创 Vue组件导出&渲染

导出模板化文件。

原创 函数柯里化&偏函数

将一个n参数的函数转换成固定x参的函数，剩余参数(n-x)将在下次调用全部传入。：就是就将使用多个参数的函数转换成一系列使用一个参数的函数技术。

原创 多种标签之间数据通信实现方式

多标签通信

原创 Virtual DOM原理

一、什么是Virtual DOMVirtual DOM 本质上是对DOM更加轻量级描述的JS对象。二、为什么需要Virtual DOMDOM操作起来更慢，而且频繁地变动DOM会造成浏览器的回流或者重绘，会严重地影响到性能；在patch过程中，也会将差异尽可能地一次性更新到DOM中，保证了DOM不会出现性能差的情况。Virtual DOM的好处：在现代前端框架中，无需手动操作DOM。一方面是保证了程序的性能，（多人协作开发项目中如果review不严格可能，开发出来的代码性能较低）不会出现性

原创 options请求（跨域预检）

概述options 请求就是预检请求，可用于检测服务器允许的 http 方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求，即 CORS 预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。一、什么是 options 请求HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法，也可以对整站（通过将 URL 设置为"*"）使用该方法。(简而言之，就是可以用 opti

原创 CSS作用域（样式分割）

CSS作用域（样式分割）的使用在vue中，让css样式只在当前组件中生效：scoped 属性是 HTML5 中的新属性，是一个布尔属性，如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。二、scoped的实现原理vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码： <style scoped> .test { color: blue; } </style> <temp

原创 端口合法，字符串消消乐，格式转换和洗牌算法

端口号为整数，范围在0~65535之间function isPort(port) { if (/^[1-9]\d*|0$/.test(port) && port * 1 >= 0 && port * 1 <= 65535){ return true } return false;}console.log(isPort(8080));//trueconsole.log(isPort("cfe"));//false字符串消消乐链接

原创 判断一个变量是否是一个空对象

// 方法一：就是粗暴的直接转字符串，然后强行比较function isEmptyObject1(obj) { return (JSON.stringify(obj) === '{}');}console.log(isEmptyObject1({}));//trueconsole.log(isEmptyObject1({name: "xiaoming"}));//false// 方法二：通过对象的键长度来判断function isEmptyObject2(obj){ return

原创 鉴权的4种基本方法

一、基于服务器常出现的问题Seesions： 每次认证用户发起请求时，服务器需要去创建一个记录来存储信息。当越来越多的用户发请求时，内存的开销也会不断增加。可扩展性： 由于sessions存放在服务器内存中，伴随而来的是可扩展性问题。当我们想要增加服务器来解决负载问题时，session里的关键性信息会限制我们的扩展。CORS(跨域资源共享)： 当我们扩展应用程序，让数据能够从不同设备上访问时，跨域资源的共享会是一个让人头疼的问题。在使用Ajax抓取另一个域的资源时（移动端访问我们的API服务器），

原创 自己捋的常见算法

1.打印图形// // 三角形打印function log(n){ for(var i = 1; i <= n; i ++){ for(var j = 0; j < n - i; j ++){//循环使前边空格产生 document.write("&nbsp;&nbsp;"); } for(var k = 0; k < i; k ++){//使星星产生 document.write("&nbsp;*&nbsp;");

原创 js多线程的实现

一、前言JS作为脚本语言，它的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。但是单线程的语言，有一个很致命的确定。如果说一个脚本语言在执行时，其中某一块的功能在执行时耗费了大量的时间，那么就会造成阻塞。这样的项目，用户体验是非常差的，所以这种现象在项目的开发过程中是不允许存在的。二、JS实现多线程方式（Worker）JS为我们提供了一个Worker的类，它的作用就是为了解决这种阻塞的现象。当我们使用这个类的时候，它就会向浏览器申请一个新的线程。这个线程就用

原创 vue中data必须是一个函数

一、 VUE组件中的data必须是函数Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了;在JavaScript中，只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。 这是因为js本身的特性带来的，跟vue本身设计无关。例如：const MyComponent = function(

原创 Vue的模板和数据是如何渲染成DOM的

一、实现过程1、new Vue 初始化数据等;2、$mount 将 render、template 或 el 转为 render 函数;3、生成一个渲染 Watcher 收集依赖，并将执行render 函数生成 vnode 传递给 patch 函数执行，渲染页面;4、当渲染 Watcher 依赖发生变化时，执行Watcher 的 getter 函数，重新依赖收集。并且重新执行 render 函数生成 vnode 传递给 patch 函数进行页面的更新。参考文献：【面试题解析✨】Vue

原创 Vue Router的路由模式hash和history的实现原理

一、Vue-router 中hash模式和history模式的关系最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。二、hash模式实现原理早期前端路由的实现就是基于location.hash来实现的，其实实现原理很简单，location.hash的值就是URL中#

原创 Promise实现原理及使用

一、什么是回调地狱在以往的js中使用异步编程，都是串联多个异步回调，嵌套大量的回调函数（将一个函数作为参数传递给另个函数），也就是“回调地狱”的解决方法。如下代码所示：function a(functionb(){ c(function d(){ })})造成代码混乱，可读性差和后期维护困难等负作用。二、Promise基本用法和实现原理Promise是异步编程的一种解决方案，解决前端异步函数多层嵌套所产生的回调地狱问题，以及回调地狱错误不方便捕捉的问题；可以

原创 观察者模式与发布订阅

一、定义观察者模式（Observer Pattern）观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。 观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。发布订阅模式（Pub-Sub Pattern）说明：发布订阅模式只是观察者模式的一个别称。 但是经过时间的沉淀，似乎他已经强大了起来，已经独立于观察者模式，成为另外一种不同的设计模式。在现在的发布订阅模式中，称为发布者的

原创 Ajax与JSON的定义及优缺点

一、定义Ajax 是一种通过后台与服务器进行少量的数据交换，使页面实现异步更新。是一种创建交互式网页应用的网页开发技术。json是一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性。二、优缺点Ajax优点： 异步请求响应快，用户体验好；页面无刷新、数据局部更新；按需取数据，减少了冗余请求和服务器的负担；缺点： 异步回调问题、this指向问题、路由跳转back问题；对搜索引擎的支持比较弱，对于一些手机还不是很好的支持。JSON优点：数据格式比较简单，易于读写，格式都是压

原创 显示与隐藏

一、CSS显示与隐藏的方法1.display 显示display属性规定元素应该生成的框的类型。值为none： 此元素不会显示，从而达到影藏的效果；值为block： 将此元素设为块级元素，从而达到显示的效果；隐藏后不占据页面空间，不再为其保留位置。2.visibility可见性visibility 属性规定元素是否可见。值为hidden： 使元素不可见；值为visible： 是元素可见；隐藏后继续占据页面空间上的位置。3.overflow 溢出overflow属性规

原创 Vue中的Computed和Watch的区别

computed 计算属性支持缓存，只有依赖数据（一般在data中的数据）发生变化，才会重新进行计算；不支持异步，当computed内有异步操作时无效，无法监听数据的变化；computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值；如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，一对一或多对一，一般使用computed；如果computed属性属性值是函数，那么默认会走get方法，函数返回

原创 进程与线程（前端部分）

一、线程与进程进程是资源分配的最小单位，线程是操作系统可识别的最小执行和调度单位；一个进程可以有多个线程，线程运行在进程中，一个线程只能属于一个进程；一个标准的线程由线程ID、当前指令指针（PC）、寄存器集合和对栈组成；在现代面向线程设计的计算机结构中，进程是线程的容器，是程序的实体（程序是指令、数据及其组织形式的描述）；线程有就绪、阻塞和运行三种基本状态,  就绪状态： 是指线程具备运行的所有条件，逻辑上可以运行，在等待处理机；  运行状态： 是指线程占有处理机正在运行；  阻塞状态：

原创 div水平垂直居中的4种方法

HTML： <div id="box"> <div id="chil-box"> test </div> </div>方式一： #box { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); ba

原创 防抖与节流

一、概念函数防抖和函数节流二者都是优化高频率执行js的一种手段；常用于绑定resize、scroll、mousemove 等事件；可控制在事件持续触发的过程中按自己的频率地去执行函数。防抖： n秒后在执行该事件，若在n秒内被重复触发，则重新计时。节流：n秒内只运行一次，若在n秒内重复触发，只有一次执行。相同点：都可以使用定时器来实现；目的都是，降低回调执行频率。节省计算资源。区别：函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeou

原创 常见数组去重

方法一：function remote_Repeat1(arr) { let newArr = []; for(let i = 0; i < arr.length; i++) { if(!newArr.includes(arr[i])) { newArr.push(arr[i]); } } return newArr;}var test1 = [1, 2, 3, 4, 4, 4,5,5,5,5];console.log(remote_Repeat1(

原创 回文、分位隔符和斐波那契数列

是否会文function isHuiWen(str) { return str == str.split("").reverse().join("")}console.log(isHuiWen("mnm")); //true逐步解析console.log('eyhuwa'.split(""));//[ 'e', 'y', 'h', 'u', 'w', 'a' ]console.log('eyhuwa'.split("").reverse());//[ 'a', 'w', 'u', 'h.

原创 五种常用排序

冒泡排序原理： 比较两个相邻的元素，将值大的元素交换到右边。实现思路： 依次比较相邻的两个数，将比较小的数放在前面，比较大的数放在后面。优点： 比较简单，空间复杂度较低，是稳定的。缺点： 时间复杂度太高，效率不好。function bubbleSort(arr) { for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length - i; j++) { if (arr[j] &g.

原创 DOM事件流和事件委托

DOM事件流（分为三个阶段）：捕获阶段目标阶段冒泡阶段在addeventListener()的第三个参数(useCapture)设为true，就会在捕获阶段运行，默认是false冒泡事件委托利用冒泡原理(子向父一层层穿透)，把事件绑定到父元素中，以实现事件委托...

原创 如何清除浮动

额外标签  clear:both<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> .

原创 script标签中defer和async

Problem：script会阻塞页面的加载，如果是引用外部js的话，可能会由于这个外部js请求很久而出现空白页问题解决方法：defer / asyncdefer<script src="a.js" defer></script><script src="b.js" defer></script>不会阻止页面解析，并行下载对应的js文件;下载完之后不会执行;等所有其他脚本加载完之后，在DOMContentLoaded事件之前执行对

原创 数据双向绑定

有Object.defineProperty() 和 Proxy 对象（代理）两种方式来实现数据双向绑定。 用对数据的劫持操作的方式。当访问或者修改某个对象的某个属性的时候，通过一段代码进行拦截行为，然后进行额外的操作，然后返回结果。Vue2.x 是使用 Object.defindProperty()，来进行对对象的监听的;Vue3.x 版本之后就改用Proxy,进行实现的。原理: 双向数据绑定是通过 数据劫持 结合 发布订阅模式 的方式来实现的， 也就是说数据和视图同步，数据发生变化，视.