- 博客(86)
- 收藏
- 关注
RSS订阅原创 【前端面经】字节前端社招面经分享（已offer）
字节跳动前端社招面经分享 本文详细记录了作者从4年工作经验（3年小厂+1年安防大厂）成功跳槽字节跳动的完整面试经历。面试流程高效，从HR沟通到发offer仅用时2周多，包含3轮技术面（侧重AI应用、前端基础、项目深挖）和HR面。技术考察特点：前端原理深度、手写代码（如异步调度器）、AI应用思考；HR面重视职业规划和动机。作者建议：夯实基础、深度复盘项目、培养AI思维，并分享了自整理的前端面试资料集（HTML/CSS/JS/Vue等）。关键经验是录音复盘+AI辅助整理，强调面试需经得起"拷打&quo
2025-11-13 16:51:16
1324
原创 【前端面试】前端工程化篇
本文讲解 Webpack 核心与优化，对比 Vite，并涵盖 Babel、CSS 工程化、Monorepo 等前端工程化实践。
2025-11-13 00:01:11
809
原创 【前端面试】Vue篇
本文档是一份全面的 Vue.js 核心知识点指南。内容以问答形式，系统梳理了 Vue 的响应式原理、生命周期、组件通信、虚拟 DOM、路由管理和状态管理（Vuex/Pinia）。同时，深入对比了 Vue2 与 Vue3 的差异，并涵盖了性能优化、Composition API 等关键概念，是系统学习和准备面试的理想参考。
2025-11-12 22:24:28
1090
原创 【前端面试】JS篇
本文档是一份全面的 JavaScript 面试知识点摘要。内容从作用域、闭包、this 指向、原型链等基础概念，到事件循环、Promise 与 async/await 等异步编程模型，再到垃圾回收、内存泄漏、模块化等进阶主题，均进行了系统梳理。它还涵盖了 ES6 新特性、常用设计模式和性能优化技巧，是巩固和复习前端核心知识的实用指南。
2025-11-12 21:40:29
1024
原创 【AI助手】从零构建文章抓取器 MCP（Node.js 版）
本文演示了如何使用 Node.js 和 MCP TypeScript SDK 构建一个 AI 可调用的掘金文章抓取服务。通过定义工具、注册逻辑并启动 MCP 服务，AI 能获取指定用户文章列表，并结合 TRAE 智能体实现工作流分析与文件生成，为 AI 调用外部服务提供实践参考。
2025-11-03 02:28:55
1115
原创 【AI助手】释放双手，基于Cursor Agent与Playwright MCP的浏览器自动化实战
本文介绍了如何通过Cursor Agent和Playwright MCP实现浏览器自动化，解决传统脚本灵活性差、维护成本高的问题。Playwright MCP作为标准化协议，为AI提供32个API接口，支持页面导航、元素交互、HTTP请求等操作。文章详细说明接入步骤，并通过GitHub登录、文件上传、微博数据抓取三个实战案例，展示如何用自然语言Prompt驱动AI自动完成网页操作。该方法显著提升自动化效率，将开发者从重复劳动中解放出来。
2025-06-27 14:08:30
1426
原创 【前端部署】通过 Nginx 让局域网用户访问你的纯前端应用
本文介绍如何用 Nginx 快速部署前端应用（Vue/React/原生等）并实现局域网共享。先打包应用并安装 Nginx，再配置路径、端口并放入打包文件。启动 Nginx 后即可测试访问。此流程能高效共享应用，提升团队协作。
2025-05-20 16:26:24
654
原创 【IDE扩展】提升开发效率：构建离线代码片段库VSCode扩展
在 VSCode 中，自定义代码片段（Snippets）能够显著提升开发效率，通过快捷触发词快速插入常用代码，减少重复输入。构建一个统一的离线代码片段库 VSCode 扩展，可以提升效率、保障安全、统一规范、便于管理并促进团队协作。开发流程包括安装 Node.js 和 VSCode 插件开发工具，梳理代码片段，使用在线工具生成 .code-snippets 文件，创建项目并编写文件，调试效果，配置 package.json，打包和安装。进阶开发点包括编写更新日志、扩展说明、版本管理和光标提示。通过集中更新和
2025-05-20 14:24:13
923
原创 【AI助手】提升开发效率：Continue配置自定义提示词模板及规则
本文介绍了Continue插件的YAML配置方法，强调通过自定义提示词（如commit解读、JS注释）和规则（如中文回答、安全警告）提升开发效率与一致性。
2025-05-20 14:15:44
2523
原创 【数据流图】用JointJs实现数据流图（一）
创建静态图表或完全交互式图表工具，例如工作流编辑器、流程管理工具、IVR 系统、API 集成器、演示应用程序等等。demo网址：https://resources.jointjs.com/demos#jointjsAPI文档：https://resources.jointjs.com/docs/jointjs/v3.5/joint.html其中linkInfo为自定义，可以使用起点元素id与终点元素id，也可使用起点元素坐标与终点元素坐标，以官方文档link的使用为准使用节点连接使用坐标连接。
2024-05-10 17:07:32
1062
原创 vue+el-tooltip 封装提示框组件，只有溢出才提示
使用el-tooltip的diabled实行和内容绑定mouseenter事件控制提示框是否展示
2023-11-29 16:31:34
845
原创 vue+less+style-resources-loader 配置全局颜色变量
全局统一样式后，可配置vue.config.js实现全局颜色变量，方便在编写时使用统一风格的色彩。
2023-11-29 16:11:26
1076
原创 vue+jsonp编写可导出html的模版，可通过外部改json动态更新页面内容
导出后文件结果如图所示，点击Index.html即可查看页面，页面所有数据由report.json控制，修改report.json内容即可改变index.html展示内容。
2023-11-29 16:04:32
1049
原创 vue实现一个popover悬浮组件(简易版)
效果图实现思路定义组件，监听元素的mouseenter和mouseleave还有组件的mouseenter和mouseleave事件由于有滚动等交互需求，所以加一个轮询，监听鼠标对于元素和popover组件的交互状态实现代码<!-- * @Fileoverview: 保护措施详情 * @Description: 仪表盘-数据流图-保护措施详情--><template> <div class="popover"> <div
2022-05-27 14:34:36
4017
6
原创 【数据流图】SpriteJs绘制数据流图
使用vue2+SpriteJs+Echarts5实现的2D数据流图，适用于演示场景，不适用于自由度过高的开发场景
2021-12-17 17:22:14
1674
3
原创 vue+原生js实现滚动加载数据动画
效果展示实现思路通过动态移除和新增元素实现代码run() { if (!this.isRuning) { this.isRuning = true; let runRes = this.$refs.runRes; let i = 0; while (runRes.hasChildNodes()) { runRes.removeChild(runRes.firstChild); } this.interval = setInterva
2021-10-28 14:37:55
299
原创 vue+原生js+element-ui实现轮播列表动画(无限轮播)
效果展示实现思路用element-ui中的el-row和el-col来构建列表，若无element-ui，也可用类似布局组件或直接用div元素实现将滚动区域封装，使用绝对定位与相对定位的方式，并将超出滚动区域部分hidden隐藏下述业务代码有每分钟刷新一次列表的需求，所以用两个interval，若纯轮播则一个interval即可通过改变子元素相对于父元素的top值，并设置transition: all 1s;即可出现如图所示效果当轮播结束后再次首尾相连，即可实现无限轮播关键代码流畅过
2021-10-28 14:17:36
4967
原创 echarts+vue动态生成可配置的桑基(sankey)图
效果展示实现思路桑基图实现的本质也是一条条source-target，节点与节点之间的连线做到完全可配置化，需抽离出大量可配置的属性无数据的节点要进行隐藏，因此需要加是否有数据的判断节点颜色和线条颜色通过设置itemStyle和lineStyle来配置分辨率自适应则需要设置函数来动态计算实现代码//now-size.jslet nowClientWidth = document.documentElement.clientWidth;export function nowSize(
2021-10-28 14:04:32
3335
原创 【数据流图】Echarts地图实例(热力图&线图&markPoint)
效果展示需求解读分辨率自适应左右框内标题及内容都可动态配置同时包括地图热力图与地图线图出发点添加涟漪动画markPoint根据数据不同动态展示是否高亮热力图颜色数值范围由返回数据动态控制难点分析series.type为lines或effectScatter显示的前提为geo属性有值，而展示热力图却需要series.type为map，就涉及到geo与map两属性重叠与z轴level问题线图需要准确知道起点与终点坐标，若边框、标题和边框内元素都脱离在canvas画布外会导致无法准确定
2021-10-28 12:04:04
10921
4
原创 vue+echarts封装一个可配置的环形图
效果展示组件代码<template> <div class="donut-chart"> <div ref="chart" class="chart"></div> </div></template><script>const OVERVIEW_COLOR_LIST = [ '#6F9CF9', '#65DCAC', '#A486D5', '#F7C739', '#EB7
2021-10-28 11:19:32
716
原创 vue封装一个大屏加载动画
效果展示组件代码<template> <div class="spinner"> <div v-for="item in 5" :key="item" :class="rectName + ' rect rect' + item" ></div> </div></template><script>export default { name: 'Lo
2021-10-28 11:14:37
748
原创 Vue+el-popover+原生JS+CSS实现日历功能
效果展示功能固定位置展示星期(日/一/二/三/四/五/六)固定位置切换年份，重绘日历滚动展示完整日历自动滚动到离当天最近有数据的一天，若全年无数据则滚动至当天在日期下方动态添加小红点表示该天有数据，悬停展示当天数据概览，点击可高亮该日期实现思路实现固定位置与滚动容器定高，用于展示滚动修改滚动条样式，适配颜色header采用绝对定位固定body日期区域用绝对定位，与header固定位置保持距离body区域定高，展示滚动条拆解后元素结构如图所示：实现高亮与悬停展示
2021-10-28 10:43:00
717
原创 mac纯前端部署至本地服务器方案
前置环境应保证服务器上具备nginx环境，若无，则按此教程进行配置Linux nginx安装篇具体步骤一、打包本地项目在项目目录下执行npm run build 生成dist文件夹二、在服务器上创建自定义目录，以webapp为例1.连接服务器ssh root@192.168.20.120root@192.168.20.120's password: ****2.进入根目录，创建文件夹webappcd / mkdir webapp3.在本地项目目录下，上传dist文件夹至服务
2021-10-27 18:13:51
1165
原创 vue生成并导出表格(使用xlsx第三方包，支持csv/html/xlsx等格式)
使用第三方包xlsx文档支持导出格式● xlsx● xlsb● xlsm● xls● xml● csv● txt● ods● fods● uos● sylk● dif● dbf● prn● qpw● 123● wb*● wq*● html● htm安装npm install xlsx使用demo<template> <div class="demo"> <qz-icon class="icon-d
2021-10-27 18:07:37
779
原创 vue+echarts图表编写模版(浏览器宽度自适应/及时销毁组件)
在此模版基础上可在两处编写代码，如无交互，可将click交互模块代码删除<template> <div class="chart" ref="chart"></div></template><script>export default { mounted() { this.init(); }, methods: { // 初始化数据 init() { this.paintChart(.
2021-10-27 18:04:41
439
原创 解决ssh连接服务器报错问题
问题详情解决方法● 原因：由于服务器重新安装系统了，所以会出现以上错误● 解决：ssh-keygen -R 服务器端的ip地址，再重新连接效果
2021-10-27 18:02:54
764
原创 解决el-tree被元素包裹后节点高亮显示不完全方案
问题详情如下图所示，将树形图包裹在panel中，超出最大宽高则横向或纵向滚动，但高亮设置的是当前选中节点的content，设置宽度100%，就会造成下图情况。解决方法覆盖原有高亮样式，给所有节点设置class为row-context，并设置row-context的样式，直接对高亮下的该容器设置样式，造成伪高亮效果(非组件自带高亮效果).el-tree-node.is-current > .el-tree-node__content { background: #fff; colo
2021-10-27 17:57:02
789
原创 在el-table中嵌套使用el-popover的坑与两种解决方案(v-model显示失效)
使用出现的问题根据element-ui文档与网上教程编写如下代码<el-popover v-model="row.visible" trigger="click"><span slot="reference" @click="row.visible=!row.visible">删除</span></el-popover>常规情况下，row中的visible属性会发生改变，但通过调试发现row属性并未改变，查看源码所以<span s
2021-07-06 18:13:36
12069
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人