- 博客(260)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 走进微前端：手写single-spa核心原理
下面我将实现一个接近 Single-SPA 源码的版本，并为每一行代码添加详细注释。Single-SPA 是一个用于前端微服务的 JavaScript 框架，下面我将手写一个简化版的 Single-SPA 核心功能实现。最近在做微前端的事情，因为不太熟悉微前端机制，导致出了一些问题一开始是不知所措的，虽然最后解决了，但是还是一知半解，遂研究其原理。这个实现保留了 Single-SPA 90% 的核心功能，代码结构清晰且注释详尽，适合用于深入理解微前端架构原理。加强版的 Single-SPA 实现。
2025-08-05 23:09:52
680
原创 走进AI（1）：细说RAG、MCP、Agent、Function Call
RAG（检索增强生成）和Function Call（函数调用）是大模型的两大“外挂”，一个负责知识补充，一个负责实际操作。💡 本质分工： - RAG解决“知识不足”（LLM不知道的事）。二者结合，才能让AI既“博学”又“能干”！LLM的上下文窗口（比如GPT-4-turbo是128K tokens）决定了它能“记住”的对话长度。情感化MCP：记住用户的情绪状态（比如“上次用户因为航班延误很生气”），调整应答策略。检索：从财经数据库/网页抓取相关段落（如：“特斯拉2023年净利润150亿美元”）。
2025-07-30 22:39:16
1024
原创 手把手写JavaScript压缩的核心原理
这段代码的作用是压缩 JavaScript 代码中的空白符，以减少文件大小并提高加载速度。...），通常用于代码混淆（Obfuscation）或缩小变量名的场景。需要匹配到最后一个符合条件的字符时（如提取整个 JSON 字符串）。提取最短匹配的内容（如 HTML/XML 标签、注释块）。：匹配一个或多个空白字符（包括空格、换行符、制表符等）。这段代码的作用是匹配 JavaScript 变量声明（），并将变量名替换成一个简短的、自动生成的名称（如。贪婪匹配（默认）：尽可能匹配最长的字符串。
2025-07-24 23:20:28
938
原创 详解DNS是如何为域名找到对应的 IP 地址的
这个顶级域名告诉应该找哪台 DNS 服务器去解析（这台服务器我们称为次级域名服务器），其实这台 DNS 服务器就是我们购买域名时设置的用于解析的 DNS 服务器。当 LDNS 服务器还是找不到域名对应的记录时，那么其就会去根 DNS 服务器去寻找域名对应的记录。根 DNS 服务器全球只有 13 台，所以在 LDNS 服务器建立的时候，其会写死一个根 DNS 服务器的 IP 地址列表。如果在系统 DNS 也找不到域名的记录，那么浏览器就会去本地的 DNS 服务器（LDNS）上寻找该域名的记录。
2025-05-23 22:18:07
903
原创 怎么解决vue中多个相同组件重复请求的问题？
点击上方前端阳光，关注公众号回复加群，加入技术交流群交流群现在因为有个上传组件他用到了这个mixin文件，这个mixin文件中mounted请求了接口，这样一个页面中如果有多个上传组件的话，那么就会导致一上来就会一次性请求多个重复的接口，有什么好点的方法吗，如果不放在vuex中的话。解决方法：这种情况下的 getSignature 最好是 Singleton 的，可以写个模块导出。mixin 里...
2023-04-18 22:28:26
1865
原创 手写async await核心原理，再也不怕面试官问我async await原理
async await 语法是 ES7出现的，是基于ES6的 promise和generator实现的。
2022-08-27 13:28:35
826
原创 手写flexible.js的原理实现，我终于明白移动端多端适配
上周优化了个跑马灯，原因是跑马灯的长度太长了，每个item的节点比较多，所以即使限制最多只有50个item，也还是很长很长，有多长可以看看下面
2022-08-04 17:12:59
1112
1
原创 太长了，巧妙地优化了跑马灯
点击上方前端阳光，关注公众号回复加群，加入技术交流群交流群前言上周优化了个跑马灯，原因是跑马灯的长度太长了，每个item的节点比较多，所以即使限制最多只有50个item，也还是很长很长，有多长可以看看下面怎么优化呢？看看之前的跑马灯优化前的写法之前的写法很简单，其实就是让很长很长的class="animate"的div在lottery-person-wrapper中滚动...
2022-07-12 08:30:52
593
原创 我写了一个将 excel 文件转化成 本地json文件的插件
点击上方前端阳光，关注公众号回复加群，加入技术交流群交流群Part1插件介绍excel-2b-json 插件用于将 google excel 文件转化成 本地json文件。适用场景：项目国际化，配置多语言Part2使用方法11. 安装excel-2b-jsonnpminstallexcel-2b-json22. 引入使用constexcelToJson=re...
2022-07-05 10:07:35
838
原创 纯css就能实现可点击切换的轮播图，feel起来很丝滑
轮播图经常会在项目里用到，但是实际上用到的轮播图都是比较简单的，没有复杂的特效，这个时候如果去引入swiper那些库的话，未免就有点杀鸡焉用牛刀了。所以不如自己手写一个，而今天我要分享的一种写法也是我最近才发现的，发现写起来真的是很丝滑，只纯css就实现了呢！可以先看看预览效果for 属性规定 label 与哪个表单元素绑定,label的for属性要与绑定表单元素（input）的ID对应。绑定完成后可以通过点击label触发表单元素的默认属性。通俗的讲就是你绑定完了点lebel就相当于点击表单元素（inpu
2022-06-15 17:45:43
5568
原创 快来学习下webhook吧！超级简单易学
点击上方前端阳光，关注公众号回复加群，加入技术交流群交流群1. Webhook是啥？ 简单而言，webhook就是一个监听的钩子，监听你push你的代码到github仓库之后，发起一个请求。这个请求要请求哪里交给你设置要。主要流程git push xxx 本地代码提交至远程github仓库github仓库收到push后进行回调，发post（ Payload url 是来...
2022-04-22 09:31:45
1421
原创 手写axios核心原理，再也不怕面试官问我axios原理
文章目录一、axios简介axios是什么？axios有什么特性？（不得不说面试被问到几次）二、基本使用方式三、实现axios和axios.method四、请求和响应拦截器一、axios简介axios是什么？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios有什么特性？（不得不说面试被问到几次）从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据
2022-04-18 17:02:38
3942
原创 快用上PerformanceObserver，别再手动计算首屏时间了
点击上方前端阳光，关注公众号回复加群，加入技术交流群交流群大家好，我是阳光，今天给大家介绍一个非常好用的浏览器api：PerformanceObserver， 我们可以用它来获取首屏、白屏的时间，就不用再麻烦地手动去计算了。1介绍PerformanceObserver可用于获取性能相关的数据，例如首帧fp、首屏fcp、首次有意义的绘制 fmp等等。构造函数Perfo...
2022-04-10 21:18:00
6456
1
原创 三面面试官：运行 npm run xxx 的时候发生了什么？
面试官：npm run xxx的时候，发生了什么？讲的越详细越好。 我（嘿嘿，稳了，这次我要30k）: 嘻嘻！...
2022-03-25 14:49:42
1656
1
原创 关于 HTML5 LocalStorage 的 5 个不为人知的事实
作者：Todd Anglin译者：前端阳光来源：http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.htmlLocalStorage 是HTML5中一个方便使用的 API，它为 Web 开发人员 提供了一个易于使用的5MB的存储空间。使用 LocalStorage API 真的再简单不过了。不信看下：//Save a value to localStoragelocalStorage.setI..
2022-03-17 11:04:55
3864
原创 UI小姐姐说我用CSS实现毛玻璃效果的样子很帅
点击上方前端阳光，关注公众号回复加群，加入技术交流群交流群前言UI小姐姐问我，能不能做出透明加模糊的背景，而我当然是二话不说就说可以。因为我觉得没有什么是css实现不了的。更何况我要在她...
2022-03-08 09:21:22
300
原创 UI妹子说我用CSS实现毛玻璃效果的样子很帅
前言UI小姐姐问我，能不能做出透明加模糊的背景，而我当然是二话不说就说可以。因为我觉得没有什么是css实现不了的。更何况我要在她面前展现得我很厉害的样子。开发起来果不其然，在我打开蓝湖后，发现属性都给我提供好了于是我立即将这份代码ctr c，然后ctr v，一番丰功伟绩立马就完成了，效果也是杠杠滴。然后兴高采烈地交付给UI小姐姐查看了。小姐姐也说可以。出于职业素养，我马上拿起我在pdd上9.9买的iphone13手机（当时也就邀请了我老家整个镇子的人来帮我砍一刀吧）查看效果，哇塞真机效
2022-03-07 17:14:02
1433
2
原创 拜托，css这样实现多行文本“展开收起” 超酷的好吧
前言2022.02.14的午后，我站在你家门口，再次遇见了你，他又来牵起你的手无法言语，我是什么，这样傻傻的我怎么守护你这次我静静哭了选择放弃，我好想好想把记忆折叠起可惜，记忆不能像之前那个需求一样自由展开与折叠前段时间接到一个需求，关于文字展开和收起的，走了很多路,踩了很多坑。在这个夜深人静，想你想到泪流的时候，决定记录分享一下。需求如下所述：未满两行时超过两行，少于7行时未展开展开超过7行时未展开展开就如上面所述，我倒是第一次做这种需求，于是就网上
2022-02-16 20:02:36
4429
4
原创 手写Express核心原理，再也不怕面试官问我Express原理
一、首先安装express二、创建example.js文件创建myExpress.js文件实现app.get()方法实现post等其他方法。实现app.all方法中间件app.use的实现...
2021-08-10 18:32:00
2865
原创 你见过js中的逗号表达式吗？这道逗号表达式的面试题，你能做对吗？
前言由于在看一些loader源码的时候，第一次见到这种逗号表达式，觉得挺有意思的，于是就分享给大家，应该也有很多同学也是第一次见吧。概述逗号操作符 对它的每个操作对象求值（从左至右），然后...
2021-07-28 15:24:20
343
原创 研究大佬写的倒计时组件(Vue)，学到了不少东西
回复【加群】加入技术交流群一、前言二、开始手操1. 先创建一个vue组件2. 实现基本的倒计时组件3. 为什么要**用setTimeout来模拟setInterval的行为**？4. 为什...
2021-07-19 09:42:16
3296
2
原创 使用flex 布局 的盒子 使用 swiper轮播插件，flex布局会失效的解决方法
如上图代码所示：本来reward-list是一个弹性布局容器，子元素reward是弹性布局的。但嵌入swiper之后，reward的直接子元素就不再是reward。。我们看下实际上的html结构：可以看到从rewad-list到reward中间多了三层。解决方法：将reward-swiper的width设置为100%。然后将reward的margin设置为auto即可。...
2021-07-14 15:58:34
3629
原创 【深入探究Node】（5）“Buffer与乱码的故事” 有十问
1. 为什么要有Buffer对象？2. 可以谈谈你所认识的Buffer对象吗？模块结构Buffer对象结构3. 哇塞，原来Buffer对象这么有意思，还可以当成Array来使用，我突发奇想...
2021-07-08 09:47:05
869
原创 【深入探究Node】（4）“内存控制” 有十五问
文章目录1. V8是用什么给对象分配内存的呢？2. V8为何要限制堆的大小？3. 原来如此，那你知道垃圾回收机制的策略是什么吗？4. 为什么要分代呢？5. 哦，那你谈谈是怎么分代的？6. 那 新生代是怎么回收的？7. 很好奇，一个新生代它是怎么晋升成老生代的。8. 为什么要设置25%这个这么低的值呢？9. 新生代的对象晋升后就成老生代了，那老生代为什么不能用Scavenge回收？10. 那老生代的对象该怎么处理？11. 那为什么还要标记整理？12. 咦！既然标记整理是基于标记清除上演变而来的，也就是它包括了
2021-07-05 20:08:55
242
1
原创 【深入探究Node】（3）“异步IO” 有九问
我尝试用一种自问自答的方式记下笔记，就像面试一样，我自个儿觉得有意思极了，希望你也喜欢1.为什么要异步I/O？具体到实处，则可以从用户体验和资源分配这两个方面说起。用户体验与前端JavaS...
2021-06-18 09:15:59
320
原创 【深入探究Node】（2）“模块机制” 有十三问
我尝试用一种自问自答的方式记下笔记，就像面试一样，我自个儿觉得有意思极了，希望你也喜欢第一问：CommonJS规范是干嘛的CommonJS规范为JavaScript制定了一个美好的愿景——...
2021-06-13 12:52:52
366
原创 【深入Node探究】（1）“Node特点与应用场景” 有四问
1、为什么叫Node？它自身非常简单，通过通信协议来组织很多Node，非常容易通过扩展来达成构建大型网络应用的目的。每一个Node进程都构成这个网络应用中的一个节点，这是它名字所含意义的真...
2021-06-12 18:30:00
155
原创 我的【毕业照】
2021年05月16日 毕业照这是一篇没有谈论、介绍技术的文章，有的只是照片写真#1班级四年的青春就这样宣布结束了一张九宫图怎能承载我们的青春，愿大家前程似锦#2BAT高级架构师合照就这...
2021-05-21 21:03:00
192
原创 如何用纯 CSS 创作一只愤怒小鸟中的绿猪
如何用纯 CSS 创作一只愤怒小鸟中的绿猪实现步骤定义 dom，容器中包含 3 个元素，分别代表耳朵、眼睛、鼻子：<div class="pig"> <span class="ears"></span> <span class="eyes"></span> <span class="nose"></span></div>居中显示：body { margin: 0;
2021-04-17 07:49:35
229
原创 “模块机制” 有十三问——读《深入浅出Node》第二章有感
我尝试用一种自问自答的方式记下笔记，就像面试一样，我自个儿觉得有意思极了，希望你也喜欢第一问： CommonJS规范是干嘛的CommonJS规范为JavaScript制定了一个美好的愿景——希望JavaScript能够在任何地方运行。CommonJS规范的提出，主要是为了弥补当前JavaScript没有标准的缺陷，以达到像Python、Ruby和Java具备开发大型应用的基础能力，而不是停留在小脚本程序的阶段第二问： 那你知道CommonJs模块包含什么吗？CommonJS对模块的定义十...
2021-03-31 21:25:14
208
原创 “初学Node.js” 有四问——读《深入浅出Node》第一章有感
1、为什么叫Node？它自身非常简单，通过通信协议来组织很多Node，非常容易通过扩展来达成构建大型网络应用的目的。每一个Node进程都构成这个网络应用中的一个节点，这是它名字所含意义的真谛。2、你能说说Node的特点吗？作为后端JavaScript的运行平台，Node保留了前端浏览器JavaScript中那些熟悉的接口，没有改写语言本身的任何特性，依旧基于作用域和原型链，区别在于它将前端中广泛运用的思想迁移到了服务器端。下面我们可以看看node相较于其他语言的一些特点：1. 异步I/O关于异步.
2021-03-30 20:45:59
302
原创 一道js笔试题， 刷新了我对map方法函数的认知，你做对了吗？
文章目录背景猜想1猜想2对map方法的深入思考你百度一下，会发现也基本上很多人都是这样手写的：那真正的map方法应该死怎样实现的呢？为什么 key in Array 可以判断 当前项是否为 empty呢？最后参考文章背景昨天在看一道笔试题的时候本以为很简单，但是结果不是我想象的那样，直接上笔试题。const array = new Array(5).map((item) => { return item = { name: '1' }});console.log(array)
2021-01-25 17:35:40
487
原创 那些年，几道”老生常错“的前端面试题(四)
1. 请生成一个16位的随机数字；2.所有题目公用一个上下文，已知数组：3.关于字符串处理：4.在一个Web页面中有很多的链接和图片，例如：5.已知用户输入手机号的时候可能是通过粘贴输入...
2021-01-20 00:09:00
363
原创 react hook仿造掘金博客项目
一、准备工作实现antd的按需加载引入安装antdnpm install antd --save安装（react-app-rewired）一个对 create-react-app 进行自定义配置的社区解决方案 yarn add react-app-rewired / cnpm install react-app-rewired --save npm install customize-cra --save-dev修改 package.jsonreact-sc
2020-12-21 10:05:08
1090
2
原创 推荐使用并手写实现redux-actions原理
文章目录一、前言二、介绍2.1 创建action2.2 reducer2.3 触发action三、 认识与手写createAction()3.1 用法3.2 原理实现四、认识handleActions五、认识与手写实现handleAction5.1 用法5.2 原理实现六、handleActions原理实现最后参考文章一、前言为什么介绍redux-actions呢?第一次见到主要是接手公司原有的项目，发现有之前的大佬在处理redux的时候引入了它。发现也确实 使得 在对redux的处理上方便了许多，
2020-12-17 20:45:43
428
原创 前端进阶之认识与手写compose方法
文章目录前言：为什么要学习这个方法compose简介compose的实现最容易理解的实现方式手写javascript中reduce方法redux中compose的实现参考文章最后前言：为什么要学习这个方法遇到这个方法主要是最近在阅读redux，koa 原理 等多次遇到这个方法，为了更好地理解框架原理，于是深入学习了一下compose的实现。然后也发现这属于函数式编程的东西，发现函数式编程是进击前端进阶的必经之路，因为像其中的纯函数的概念在redux的reducer中也展示得淋漓尽致，而保留函数计算结
2020-12-11 10:43:36
616
原创 前端进阶之认识与手写compose方法
前言：为什么要学习这个方法compose简介compose的实现最容易理解的实现方式手写javascript中reduce方法redux中compose的实现参考文章最后前言：为什么要学...
2020-12-09 21:07:27
514
原创 精品文章目录列表【不要收藏，持续更新】
文章目录：看文章不迷路手写核心原理系列前端面试题精选Vue源码解读redux源码解读开发实用案例手写核心原理系列手写Vuex核心原理，再也不怕面试官问我Vuex原理手写webpack核心...
2020-12-03 23:02:17
397
原创 手写react核心原理，再也不怕面试官问我react原理
1. 项目基本准备工作创建项目利用npx create-react-app my_react命令创建项目项目结构将一些用不到的文件删除后，目录变成这样此时的index.jsimport React from 'react';import ReactDOM from 'react-dom';ReactDOM.render( "sunny", document.getElementById('root'));2.创建react.js和react-dom.js文件我们就可.
2020-11-18 10:37:19
840
1
原创 BAT大佬推荐使用的HTML5的十个功能
HTML5不是新事物。自从最初发布（2008年1月）以来，我们一直在使用它的一些功能。后来，我再次仔细查看了HTML5功能列表。看到我发现了什么？到目前为止，我还没有真正使用过它！在本文中，我列出了十个HTML5我过去没用过但现在发现有用的功能。我还创建了一个工作示例流程并托管在Netlify。希望您也觉得它有用。点击演示实例：https://html5-tips.netlify.app/太好了，让我们开始介绍它们的解释，快速码起来吧。您可以在Twitter上关注我，以了解我将来的文章和工作。???
2020-10-28 11:37:07
470
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人