linong 的个人站 - 技术博客与思考https://www.lilnong.top/https://www.lilnong.top/blog/novel-codex-card-gallery/https://www.lilnong.top/blog/novel-codex-card-gallery/把《天灾第十年跟我去种田》人物与动物图鉴提取为 JSON 数据，用同一组数据演示翻转、收藏、玻璃遮罩、聚光灯、档案条、3D 倾斜、流光描边、双色调、票券、堆叠、手风琴、拍立得、故障风、邮票、杂志编辑、电影横幅、上滑揭示、色调滤镜、文字镂空，以及轮播横幅、视差横幅、推近揭示、宽银幕字幕等 23 种卡片效果。Thu, 16 Jul 2026 16:00:00 GMThttps://www.lilnong.top/blog/ai-interview-100-index/https://www.lilnong.top/blog/ai-interview-100-index/把 AI 应用面试百题拆成上中下三篇：每题附答法与 Review，覆盖大模型、RAG、Agent、MCP 与上线治理。Wed, 15 Jul 2026 16:00:00 GMThttps://www.lilnong.top/blog/ai-interview-100-part1-llm-python-prompt/https://www.lilnong.top/blog/ai-interview-100-part1-llm-python-prompt/逐题 Review AI 面试百题前半：大模型基础、Python 工程、Java 集成与 Prompt/上下文管理，纠偏常见背诵口径。Wed, 15 Jul 2026 16:00:00 GMThttps://www.lilnong.top/blog/ai-interview-100-part2-rag-agent/https://www.lilnong.top/blog/ai-interview-100-part2-rag-agent/逐题 Review RAG 与智能体架构：切块、混合检索、ReAct、MCP 与 Human-in-the-Loop，强调可控优于盲目自主。Wed, 15 Jul 2026 16:00:00 GMThttps://www.lilnong.top/blog/ai-interview-100-part3-tools-eval-deploy/https://www.lilnong.top/blog/ai-interview-100-part3-tools-eval-deploy/逐题 Review 工具权限、多智能体、成本与安全、生产排查与项目讲述结构，补齐上线与面试实战口径。Wed, 15 Jul 2026 16:00:00 GMThttps://www.lilnong.top/blog/poker-realtime-plan-2026-07-16/https://www.lilnong.top/blog/poker-realtime-plan-2026-07-16/服务端权威 2–9 人桌联机 Hold'em：房间、机器人、多手连续、协议契约、审计落盘与上线决策。Wed, 15 Jul 2026 16:00:00 GMThttps://www.lilnong.top/blog/disaster-year-ten-farming-settings/https://www.lilnong.top/blog/disaster-year-ten-farming-settings/《天灾第十年跟我去种田》世界观速查：天灾年表、进化与戕颐、晖城领地与同盟协作，一条线对照原文。Tue, 14 Jul 2026 16:00:00 GMThttps://www.lilnong.top/blog/ai-multi-expert-iteration/https://www.lilnong.top/blog/ai-multi-expert-iteration/记录用 8 个 AI 专家角色对个人站进行持续迭代检查的实践，包括踩坑、反思和改进。Wed, 18 Mar 2026 16:00:00 GMThttps://www.lilnong.top/blog/ai-writing-workflow/https://www.lilnong.top/blog/ai-writing-workflow/记录我使用 AI 辅助写技术博客的完整流程，包括选题、大纲、初稿、润色、配图、发布，以及如何保持个人风格。Wed, 18 Mar 2026 16:00:00 GMThttps://www.lilnong.top/blog/first-open-source-project/https://www.lilnong.top/blog/first-open-source-project/记录我从 0 到 1 开发第一个开源项目的全过程，包括想法验证、技术选型、开发节奏、推广策略，以及踩过的坑。Wed, 18 Mar 2026 16:00:00 GMThttps://www.lilnong.top/blog/frontend-trends-2026/https://www.lilnong.top/blog/frontend-trends-2026/基于我对前端社区的观察和实践，整理出 2026 年值得关注的 10 个前端技术趋势，包括 RSC、边缘计算、AI 集成等。Wed, 18 Mar 2026 16:00:00 GMThttps://www.lilnong.top/blog/my-dev-tools-2026/https://www.lilnong.top/blog/my-dev-tools-2026/记录我日常使用的开发工具、软件、硬件和服务。从编辑器到浏览器扩展，从设计工具到部署平台，一份完整的前端工程师 Uses 清单。Wed, 18 Mar 2026 16:00:00 GMThttps://www.lilnong.top/blog/nextjs16-static-export-pitfalls/https://www.lilnong.top/blog/nextjs16-static-export-pitfalls/个人站使用 Next.js 16 静态导出的完整踩坑记录，包括 sitemap、Google Fonts、headers 和 dangerouslySetInnerHTML 等问题。Wed, 18 Mar 2026 16:00:00 GMThttps://www.lilnong.top/blog/programmer-health-plan-2026/https://www.lilnong.top/blog/programmer-health-plan-2026/2025 年体检报告敲响警钟，记录我的 2026 健康计划：运动、饮食、作息与心理调节的完整执行策略。Wed, 18 Mar 2026 16:00:00 GMThttps://www.lilnong.top/blog/react-server-components-migration/https://www.lilnong.top/blog/react-server-components-migration/记录如何将 Next.js 项目从客户端 fetch + innerHTML 迁移到 Server Component + SSG，包含完整代码对比与性能数据。Wed, 18 Mar 2026 16:00:00 GMThttps://www.lilnong.top/blog/tailwindcss4-upgrade-guide/https://www.lilnong.top/blog/tailwindcss4-upgrade-guide/TailwindCSS 4 新特性详解，包括 Oxide 引擎、CSS 变量配置、升级步骤和常见踩坑记录。Wed, 18 Mar 2026 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000047538912/https://www.lilnong.top/blog/sf-a-1020000047538912/### 解答思路 从提供的代码片段看，`await` 与回调（callback）混用的写法比较少见，且没有看到 `apiSysUserUpdateInfoPost` 这个方法的具体定义；报错信息 `Unsuccessful HTTP response` 更像是底层封装的请求方法（`callApi`）内部处理失败时抛出的Wed, 31 Dec 2025 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000047515593/https://www.lilnong.top/blog/sf-a-1020000047515593/### 解答思路 通过 DOM class 特征判断出目标元素是 [Semi Design](https://github.com/DouyinFE/semi-design) 的 `Dropdown` 组件；再通过阅读该组件的单元测试和源码，确认它本质上是基于 `Tooltip` 组件实现弹出展示的，进而找到通过 `rTue, 30 Dec 2025 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000047504046/https://www.lilnong.top/blog/sf-1190000047504046/曾几何时，为了答疑解惑，或验证一个突如其来的想法，我尝试过各种前端工具： 从 JSFiddle、CodePen 这样的在线代码编辑器，到 StackBlitz 这种项目级在线 IDE，再到 GitHub Pages、Netlify 等静态站点托管平台。Thu, 25 Dec 2025 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000047492630/https://www.lilnong.top/blog/sf-a-1020000047492630/### 解答思路 左侧目录树用 Element UI 的 `el-tree` 即可，如果数据量大需要关注虚拟化支持；右侧文件列表用常规的 Row/Col 布局组件就能实现；如果需要拖拽排序/移动文件，`Sortable.js`（及其对应的 Vue 封装）是常见选择。 ### 详细说明 - **目录树**：使用 `el-Sun, 21 Dec 2025 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000047492654/https://www.lilnong.top/blog/sf-a-1020000047492654/### 解答思路 这类问题的根本原因通常是用固定像素值硬编码了容器/文本宽度，一旦操作系统的字体渲染发生细微变化（字宽、字距等），原本刚好够用的宽度就可能不够，导致换行。解决思路包括：避免硬编码宽度、排查是否有其他影响宽度的样式属性、必要时做动态测量或跨平台视觉回归测试。 ### 详细说明 - **排查是否硬编码了宽度Sun, 21 Dec 2025 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000047469388/https://www.lilnong.top/blog/sf-a-1020000047469388/### 解答思路 这类需求可以归纳为「节点卡片 + 连线 + 泳道分组」的图编辑场景，大致有两种实现路线可选：完全通用的图编辑引擎，或者结构固定的简化版自研组件，需要在自由度和开发/维护成本之间做权衡。 ### 详细说明 - **方案一：完全的图编辑引擎**：使用类似 [AntV](https://antv.antgrThu, 11 Dec 2025 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000047298448/https://www.lilnong.top/blog/sf-1190000047298448/Issue: 🐛 ModalFrom在同时设置了formRef、request和destroyOnClose时，加载过程中关闭ModalForm会报错 #8858 PR: https://github.com/ant-design/pro-components/pull/9272Sun, 12 Oct 2025 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000046862232/https://www.lilnong.top/blog/sf-1190000046862232/前言：2025年7月，有人给我发来两张截屏，记录了一次典型的“AI翻车现场”。他咨询我，常识性的而且已有定论的问题，为什么AI会“胡说八道”？是中了病毒还是数据库问题？于是，我决定写这篇文章来解答。Sun, 13 Jul 2025 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000046862563/https://www.lilnong.top/blog/sf-a-1020000046862563/### 解答思路 自动注入通常依赖 Webpack 的自动导入机制，或者是 `alias` 别名配置、插件做了模块替换（比如 Vue/Element 之类组件库的按需引入插件）；而调试时看到的目录结构，是由 Source Map 解析出来的，和项目实际的物理目录结构不完全对应也是正常现象。 ### 详细说明 - **自Sun, 13 Jul 2025 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000046423922/https://www.lilnong.top/blog/sf-1190000046423922/根本原因：技术治理体系缺失，导致验证环境建设滞后Mon, 07 Apr 2025 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000045409291/https://www.lilnong.top/blog/sf-a-1020000045409291/### 解答思路 把 JSON 当作树状结构，用先序遍历依次访问所有叶子节点，并用一个固定容量为 200 的队列保存结果：每当叶子节点数量超过 200，就把最早进入队列的节点移除（先进先出），遍历结束后队列里剩下的就是最后 200 个叶子节点。 ### 示例代码（如有代码） ```js function lastNLeWed, 23 Oct 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000045371834/https://www.lilnong.top/blog/sf-a-1020000045371834/### 解答思路 两者并不是完全互斥的关系：`axios` 是更底层的 HTTP 客户端，负责发请求本身；`React Query` 是更高层的数据请求管理库，负责请求状态（加载中/成功/失败）、缓存、重试等能力，实际项目中也可以搭配使用（用 `axios` 发请求，用 `React Query` 管理请求状态）。 #Fri, 11 Oct 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000045354215/https://www.lilnong.top/blog/sf-1190000045354215/尽管 SPA（单页应用）通常为用户提供了流畅的操作体验。Wed, 09 Oct 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000045350163/https://www.lilnong.top/blog/sf-1190000045350163/年初接到一个任务将 semi-ui 替换到 antd，但是能人力预算不太够，所以基于工作量和效率选择了基于 AST 的替换方案。Tue, 08 Oct 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000045257481/https://www.lilnong.top/blog/sf-a-1020000045257481/### 解答思路 `localStorage` 本身不是响应式的，但浏览器提供了 `storage` 事件：当某个页面修改了 `localStorage`，其他同源的页面可以通过监听 `window` 的 `storage` 事件感知到变化，从而实现一种准响应式的跨页面同步。 ### 示例代码（如有代码） ```js Sun, 08 Sep 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000045145224/https://www.lilnong.top/blog/sf-a-1020000045145224/### 解答思路 选座系统可以拆成三部分：座位数据如何建模、座位数据如何维护（打点/录入）、座位图如何绘制展示。成本最低的实现方式是手动打点，即人工录入每个座位的坐标和属性。 ### 详细说明 - **座位数据建模**：每个座位可以用一个 `x, y` 坐标（保证互不重叠）加上一组属性来描述，比如票档等级（一等/二等）Mon, 05 Aug 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000045117384/https://www.lilnong.top/blog/sf-a-1020000045117384/### 解答思路 Flex 子项默认具有 `flex-shrink: 1`，当空间不足时会被压缩，看起来就像设置的 `width` 失效；给子元素加上 `flex: none`（即 `flex-grow: 0; flex-shrink: 0; flex-basis: auto`），禁止其在极端情况下被拉伸/压缩即可解决Mon, 29 Jul 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000044958368/https://www.lilnong.top/blog/sf-a-1020000044958368/### 解答思路 节点折叠的点击事件很可能绑定在原生 DOM 事件上，通过给 `radio`/`checkbox` 添加 `@click.native.stop` 阻止事件冒泡到父级节点，是最直接的处理方式；如果组件内部通过 `$emit` 触发折叠逻辑而非依赖原生事件冒泡，则需要针对原始事件本身来阻止冒泡。 ### Wed, 12 Jun 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000044828283/https://www.lilnong.top/blog/sf-a-1020000044828283/### 解答思路 优先使用现成的可视化库，比如 ECharts 内置的力引导布局图；如果需要自己实现，用普通的 `div` 布局很难胜任，需要借助绝对定位并手动计算每个节点的位置。 ### 详细说明 - **推荐方案**：ECharts 提供了力引导布局的图（Graph）类型，支持节点、连线，以及连线是否显示等配置，参Wed, 24 Apr 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000044805391/https://www.lilnong.top/blog/sf-a-1020000044805391/### 解答思路 浏览器本身无法直接读取用户的公网 IP，只能通过向服务器发起一次请求，由服务器读取请求的来源 IP 并返回给前端，从而间接获取出口 IP。 ### 详细说明 - 前端在 Vue 组件中发起一个普通的 HTTP 请求（比如请求自己搭建的服务），服务端根据请求头（如 `X-Forwarded-For`、`Tue, 16 Apr 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000044773861/https://www.lilnong.top/blog/sf-1190000044773861/在我们日常工作中有很多场景需要使用代理服务，比如说前端开发环境的 proxy 正向代理，比如说常见的 nginx 反向代理，比如常见的 cdn 等等。但是还有很多场景也可以使用代理服务。Mon, 08 Apr 2024 16:00:00 GMThttps://www.lilnong.top/blog/service-code/https://www.lilnong.top/blog/service-code/阿里云 ECS（Ubuntu 22.04）上的 snapd、certbot、nvm、nginx、Node 与 code-server 等常用安装与配置命令备忘。Tue, 02 Apr 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000044750097/https://www.lilnong.top/blog/sf-a-1020000044750097/### 解答思路 先了解两种常见方案各自的优缺点，再结合临时授权 URL 弥补它们的短板，最终得到一个兼顾安全性、移动端兼容性和后台下载能力的方案。 ### 详细说明 - **方案一：Blob + `createObjectURL`** 1. 请求时设置 `responseType: 'blob'`，在 Ajax 回调Tue, 26 Mar 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000044735787/https://www.lilnong.top/blog/sf-a-1020000044735787/### 解答思路 医学场景中的波形图在实现上通常就是一种实时更新的折线图，可以直接复用 ECharts 提供的动态数据折线图方案，配合 WebSocket 推送的数据不断追加/滚动更新即可。 ### 详细说明 - ECharts 官方提供了动态数据折线图示例，展示了如何随时间推移持续追加新数据点、并让图表平滑滚动更新，Thu, 21 Mar 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000044688788/https://www.lilnong.top/blog/sf-a-1020000044688788/### 解答思路 按数据流经的层级，从外到内梳理前端可用的缓存手段：HTTP 缓存 → Service Worker → 本地持久化存储 → 内存缓存。 ### 详细说明 - **HTTP 缓存**：由浏览器根据响应头（如 `Cache-Control`、`ETag`）自动处理，是最外层、最常见的缓存方式，适合静态资源Wed, 06 Mar 2024 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000044214325/https://www.lilnong.top/blog/sf-1190000044214325/前两天遇到一个小需求，需要将横屏图片转为竖屏展示。整理一下相关内容。Tue, 12 Sep 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000044212504/https://www.lilnong.top/blog/sf-a-1020000044212504/### 解答思路 先通过实际操作缩小范围：右键复制是可以成功的，但用键盘快捷键（如 `Ctrl+C`）复制却不行，说明拦截的不是复制事件本身，而是键盘事件；随后通过浏览器搜索源码中的关键字（如 `copy`、禁止转载）定位具体实现代码。 ### 详细说明 - **排查思路**：先假设是通用的 `copy` 事件监听（`Tue, 12 Sep 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000044141333/https://www.lilnong.top/blog/sf-a-1020000044141333/### 解答思路 `sort` 并不关心比较函数返回的具体数值大小，只关心返回值的正负（或零），据此判断两个元素的先后顺序。 ### 详细说明 - 比较函数 `(a, b) => a - b` 中： - 当 `a - b` 为负数时，表示 `a` 应排在 `b` 前面； - 当 `a - b` 为正数时，表示 `a` Tue, 22 Aug 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000044097062/https://www.lilnong.top/blog/sf-a-1020000044097062/### 解答思路 使用一个「空对象交叉」的技巧：对类型做一次映射类型（`{ [K in keyof T]: T[K] }`），再和 `{}` 做交叉类型，可以让 TypeScript / IDE 把类型展开显示成具体的键值结构，而不是原始的类型别名或运算表达式。 ### 示例代码（如有代码） ```ts type PrTue, 08 Aug 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000044049332/https://www.lilnong.top/blog/sf-1190000044049332/昨天晚上为了参加「探索编码世界之旅 - 记我的第一份编程工作」，撸了一篇文章Tue, 25 Jul 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000044048836/https://www.lilnong.top/blog/sf-1190000044048836/我先把前面 11 个人的文章都看了，然后开始写我的回忆录。Mon, 24 Jul 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000043596307/https://www.lilnong.top/blog/sf-a-1020000043596307/### 解答思路 这种上头部、下方三栏（左固定宽、中间自适应、右固定宽）的布局，用原生 Flex 布局就可以直接实现，不必依赖额外的开源组件。 ### 示例代码（如有代码） ```html <div class="box"> <div class="header"></div> <div class="content"Tue, 28 Mar 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000043595528/https://www.lilnong.top/blog/sf-a-1020000043595528/### 解答思路 按团队规模和用途分开推荐：管理 Bug/需求可以用禅道；团队人数较少、只是简单协作任务，用钉钉自带的轻量工具也够用。 ### 详细说明 - **[禅道](https://www.zentao.net/)**：一款开源的项目管理软件，覆盖需求、任务、Bug、测试等研发全流程管理，不少公司会用它来做 BuMon, 27 Mar 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000043586082/https://www.lilnong.top/blog/sf-a-1020000043586082/### 解答思路 关键在于 `focusout` 和 `blur` 的冒泡差异：`focusout` 支持事件冒泡，可以用事件委托统一绑定在父级容器上；`blur` 不支持冒泡，必须在每个 `input` 上单独绑定。 ### 示例代码（如有代码） ```js // focusout 支持冒泡，直接委托给父级容器 $(Sat, 25 Mar 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000043387816/https://www.lilnong.top/blog/sf-1190000043387816/我们日常工作中虽然会遇到很多 BUG，我们也熟练掌握使用搜索引擎解决开发中的问题。Thu, 23 Mar 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000043313242/https://www.lilnong.top/blog/sf-1190000043313242/顺利入职。把我最近找工作的心得记录下来。Wed, 22 Mar 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000043529336/https://www.lilnong.top/blog/sf-a-1020000043529336/### 解答思路 先明确问题出在前端还是后端，再对照参数名是否一致，最后确认请求的 `Content-Type` 是否支持文件上传。 ### 示例代码（如有代码） ```java @PostMapping("/upload") public void upload(@RequestParam("avatar") MulSun, 12 Mar 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000043524904/https://www.lilnong.top/blog/sf-a-1020000043524904/### 解答思路 这几个比较结果都是 `==` 隐式类型转换规则导致的：只要比较的两边类型不同，引擎会按固定顺序把一方（或双方）转换成基本类型再比较。而 `[] != []` 比较的是两个不同的对象引用，永远不相等（无论内容是否相同）。 ### 示例代码（如有代码） ```js console.log(34 == '0Thu, 09 Mar 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000043466296/https://www.lilnong.top/blog/sf-a-1020000043466296/### 解答思路 浮动元素的宽度、高度属于会影响布局的几何属性，修改后会触发重排（Layout），这个结论可以通过实际测试代码验证。 ### 示例代码（如有代码） ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <titlThu, 23 Feb 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000043404052/https://www.lilnong.top/blog/sf-a-1020000043404052/### 解答思路 图片展示模糊，一般不是单一原因，可以按下面的顺序排查： 1. 确认「拿到的图片」是不是「上传的原图」——很多情况下前端或后端在上传/存储环节做了压缩，导致展示图并非原始分辨率。 2. 如果上传前使用了 `canvas` 对图片进行处理（如裁剪、缩放），这个过程本身也会造成一次压缩，画质下降是正常现象。Wed, 08 Feb 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000042677338/https://www.lilnong.top/blog/sf-1190000042677338/往年的我早早就参与了活动，今年不知道为什么，直到 2023.01.09 原来这就是答案。虽然果只有一个，但是因会有很多可能，不管怎么说反正是润Tue, 10 Jan 2023 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000043005520/https://www.lilnong.top/blog/sf-a-1020000043005520/### 解答思路 用正则 `/[^a-z]/i` 匹配所有「非字母」字符作为分隔符对字符串进行切割，得到一个单词数组，再用 `Set` 去重；需要注意如果原字符串以非字母字符开头/结尾，或包含连续的非字母字符，`split` 结果里会出现空字符串，需要额外过滤。 ### 示例代码 ```js const str = 'Wed, 07 Dec 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000042907207/https://www.lilnong.top/blog/sf-a-1020000042907207/### 解答思路 问题的本质是「关键请求（登录）」和「非关键请求（预加载资源）」在争抢浏览器对同一个域名的并发连接数（HTTP/1.1 下通常是 6 个左右）。解决思路是从「连接资源」和「请求优先级」两个方向入手，让登录请求尽量独立、优先。 ### 详细说明 常见的几种应对方式： 1. **接口域名分流**：把登录接口Thu, 24 Nov 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000042849701/https://www.lilnong.top/blog/sf-a-1020000042849701/### 解答思路 生成唯一选择器常见的两类思路： 1. **基于已有特征拼接**：递归读取元素的 `id`、`class`、`tagName`、在父节点中的索引等信息，逐层拼接出一条能唯一定位该元素的选择器路径。 2. **主动打标记（更省心的取巧方案）**：直接给目标元素临时打上一个全局唯一的自定义属性（如 `datThu, 17 Nov 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000042007301/https://www.lilnong.top/blog/sf-a-1020000042007301/### 解答思路 仅凭 UA 字符串**无法**可靠判断客户端真实性，因为 UA 本身就是客户端自己上报的字符串，可以被随意修改（浏览器插件、开发者工具、脚本环境都能轻易伪造）。实际的反模拟器/反爬检测通常是**多种信号组合判断**，而不是依赖单一的 UA 值。 ### 详细说明 常见的组合判断思路包括： 1. **特Sun, 19 Jun 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000042001470/https://www.lilnong.top/blog/sf-a-1020000042001470/### 解答思路 浏览器默认的拖拽预览图是对被拖拽元素做的一次「快照截图」，通常只保留矩形边界，不会完整还原所有 CSS 效果（如圆角、阴影等）。要自定义拖拽时显示的图像，需要在 `dragstart` 事件里手动调用 `DataTransfer.setDragImage()`，传入自己想展示的图片/元素。 ### 示Fri, 17 Jun 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041972013/https://www.lilnong.top/blog/sf-1190000041972013/最近 「SegmentFault 思否社区 10 周年「问答」打卡」 十分火热，但是有一个小问题，经常不知道是否完成今天的 KPI，以及小尾巴是否正常添加，那我们今天来做个小工具。Sat, 11 Jun 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041944132/https://www.lilnong.top/blog/sf-1190000041944132/前几天被人问，「如何把元素固定在容器底部」。（本来想直接把 demo 地址给他，结果没找到，那么今天我们来补一下）Mon, 06 Jun 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000041931501/https://www.lilnong.top/blog/sf-a-1020000041931501/### 解答思路 技术上完全可以只用 WebSocket 来传递数据，不再依赖普通 HTTP 请求；但 HTTP 生态（`fetch`/`XMLHttpRequest`）已经内置了大量“开箱即用”的能力，如果全部换成 WebSocket，这些能力都需要自己在应用层重新实现一遍。 ### 详细说明 从 HTTP 切换到纯Wed, 01 Jun 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041880872/https://www.lilnong.top/blog/sf-1190000041880872/最近有个项目（就叫他 P 项目）做了一次 UI 视觉统一。Sun, 22 May 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041789636/https://www.lilnong.top/blog/sf-1190000041789636/节前碰到一个需求：「新人引导效果」针对第一次使用平台的用户进行主要功能引导。 具体引导路径为：点击“新增按钮”，对弹出的内容进行解释，并引导用户填充表单，最后提交表单。Sun, 15 May 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041804137/https://www.lilnong.top/blog/sf-1190000041804137/实现聚焦效果Tue, 10 May 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041788965/https://www.lilnong.top/blog/sf-1190000041788965/昨天收到一个铁子的反馈Sun, 08 May 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041560515/https://www.lilnong.top/blog/sf-1190000041560515/前两天北京下雪了，很冷。2022 招聘季，好像也比往年冷一些。Sat, 19 Mar 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041524121/https://www.lilnong.top/blog/sf-1190000041524121/Lighthouse 是一个开源的自动化工具，可以用于改进 Web 应用的质量。Wed, 09 Mar 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000041469825/https://www.lilnong.top/blog/sf-a-1020000041469825/### 解答思路 不需要真的把文件“分割”成多个独立文件，只要目标服务器（或 CDN）支持 HTTP `Range` 请求，就可以直接用 `fetch` 携带 `Range` 请求头，一次请求一个字节区间，从而实现“按需分片获取”的效果，等价于把文件按范围切成了多份。 ### 示例代码 ```js async funcSun, 27 Feb 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041372152/https://www.lilnong.top/blog/sf-1190000041372152/说到加载速度优化我们能想到什么？网上能找到一些什么内容？CDN？ GZIP? 开启缓存？HTTP2? Tree-shaking？Mon, 07 Feb 2022 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041171848/https://www.lilnong.top/blog/sf-1190000041171848/昨天被人问到了一个问题：Thu, 23 Dec 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000041163276/https://www.lilnong.top/blog/sf-a-1020000041163276/### 解答思路 JSONP 本质上是利用 `<script>` 标签不受同源策略限制的特性来实现“跨域”，它本身不存在真正的跨域限制问题；如果 JSONP 突然不生效了，通常不是「跨域」本身的问题，而是环境或安全策略发生了变化。 ### 详细说明 排查思路可以从以下几个方向入手： 1. **协议是否一致**：跨域判断Tue, 21 Dec 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000041104998/https://www.lilnong.top/blog/sf-1190000041104998/今年感觉过的更快了，又到了年度写总结的时候。先来快速过一下回忆一下今年Mon, 20 Dec 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000041098509/https://www.lilnong.top/blog/sf-a-1020000041098509/### 解答思路 先理清引用关系：`const frame = window.open(url)` 中，`frame` 是**打开者**（原窗口）持有的**新窗口的引用**；而在**新窗口**内部，`window.opener` 则是指向**打开它的那个原窗口**的引用。有了双向引用后，就可以通过 `postMessaThu, 09 Dec 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000041055526/https://www.lilnong.top/blog/sf-a-1020000041055526/### 解答思路 区分不同域名的请求本来就是 Nginx `server_name` 指令的职责，不需要（也不应该）通过 URL 路径来区分——只要为每个域名单独配置一个 `server {}` 块即可，Nginx 会根据请求头中的 `Host` 自动匹配对应的 `server_name`，路由到相应的配置块。 ###Wed, 01 Dec 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040919656/https://www.lilnong.top/blog/sf-a-1020000040919656/### 解答思路 `for` 循环如果没有用 `{}` 包裹循环体，默认只会把**紧跟着的下一条语句**当作循环体；一旦把这条语句注释掉了，实际的循环体就变成了原本以为在循环外的下一行代码。 ### 示例代码 ```js // 容易踩坑的写法：没有花括号，循环体只包含一条语句 for (let i = 0; i < 1Fri, 05 Nov 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040848446/https://www.lilnong.top/blog/sf-a-1020000040848446/### 解答思路 问题出在逗号 `,?` 是**可选**的（`?` 表示 0 次或 1 次），一旦逗号可以不出现，整个 `(.{1,50},?)` 分组就退化成了 `(.{1,50})`，而多个 `(.{1,50})` 又可以被外层的 `+` 无限重复拼接，等价于对字符数完全没有限制。 ### 详细说明 逐步简化理解这Thu, 21 Oct 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040681338/https://www.lilnong.top/blog/sf-a-1020000040681338/### 解答思路 用 `new FormData()` 创建一个表单数据对象，通过 `append` 方法逐个添加字段（包括普通字段和文件），然后把这个 `FormData` 实例作为请求体传给 `fetch` 或 `axios` 原来放 `body`/`data` 的位置即可。 ### 示例代码 ```js consMon, 13 Sep 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040497682/https://www.lilnong.top/blog/sf-a-1020000040497682/### 解答思路 绝大多数场景下不需要额外的库：JavaScript 原生就提供了完整的位运算符，直接使用即可，引入第三方库反而增加了不必要的复杂度。 ### 示例代码 ```js const a = 5; // 0101 const b = 3; // 0011 console.log(a & b); // 1 按位Tue, 10 Aug 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040479808/https://www.lilnong.top/blog/sf-a-1020000040479808/### 解答思路 `Array.prototype.sort()` 在**不传比较函数**时，会先把元素转换成字符串，再按字符（字典序/Unicode 码点）进行比较排序，这恰好等价于“按首位数字排序”。 ### 示例代码 ```js const arr = [12, 3, 24, 1, 932, 6423]; conSun, 08 Aug 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000040422876/https://www.lilnong.top/blog/sf-1190000040422876/哈喽，大家好又是我。昨天有个人在群里问：“基于 elementUI 如何实现拖动修改列宽度，并同步在多个表格中”。Thu, 29 Jul 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000040345879/https://www.lilnong.top/blog/sf-1190000040345879/本着实用精神，我们今天来分享一下瀑布流布局（昨天有个小兄弟问我怎么做，我找了半天没找到，啊原来写在内网了）。演示地址: http://www.lilnong.top/static/html/waterfall.htmlThu, 15 Jul 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000040331855/https://www.lilnong.top/blog/sf-1190000040331855/哈喽大家好啊。前半年还挺忙的，一直也没有发文章，有老哥想我了嘛。这两天发现老有人私信问我 PDF 相关的内容。Mon, 12 Jul 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000040188344/https://www.lilnong.top/blog/sf-1190000040188344/祝思否生日快乐，越办越好，越做越大哈哈。Wed, 16 Jun 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040170288/https://www.lilnong.top/blog/sf-a-1020000040170288/### 解答思路 `<img>` 元素本身提供了 `onload` 和 `onerror` 两个事件：加载成功触发 `onload`，加载失败（地址错误、网络异常等）触发 `onerror`。 ### 示例代码 ```js const img = new Image(); img.onload = () => { coSat, 12 Jun 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040170303/https://www.lilnong.top/blog/sf-a-1020000040170303/### 解答思路 `devServer.proxy` **只在本地开发服务器下生效**，本质上是本地 Node 服务帮你转发请求，从而绕开浏览器的跨域限制；打包上线之后，代码是静态文件，没有这个开发服务器在跑，代理自然失效。所以要先确认「代理无效」到底发生在开发环境还是生产环境。 ### 详细说明 - **开发环境**Sat, 12 Jun 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040145508/https://www.lilnong.top/blog/sf-a-1020000040145508/### 解答思路 CSRF 和 XSS 是两种不同的攻击方式：**XSS 是往页面里注入恶意内容（脚本）**，而 **CSRF 是伪造一个正常的请求，让受害者在不知情的情况下“帮”攻击者发出这个请求**。CSRF 本身不需要往目标网站注入任何内容，依赖的是浏览器自动携带 Cookie 的特性。 ### 详细说明 - *Tue, 08 Jun 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040138625/https://www.lilnong.top/blog/sf-a-1020000040138625/### 解答思路 用 `reduce` 遍历原数组，累积一个去重后的结果数组：对每一项先用 `findIndex` 检查结果数组里是否已经存在同名的记录——不存在就直接加入；存在则比较 `created_at`，当前项时间更早就用它替换已存在的记录。 ### 示例代码 ```js const list = [ { naMon, 07 Jun 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040064469/https://www.lilnong.top/blog/sf-a-1020000040064469/### 解答思路 以任意一个数组的下标作为基准，遍历该下标，再从每个原数组中取出对应下标的元素，组成新的一维数组，最终汇总成二维数组。 ### 示例代码 ```js const a = [1, 2, 3, 4, 5]; const b = [11, 22, 33, 44, 55]; const c = [111, 22Tue, 25 May 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040039472/https://www.lilnong.top/blog/sf-a-1020000040039472/### 解答思路 `<a href="...">` 发起的是浏览器原生请求，无法附加自定义请求头。如果后端要求必须通过请求头传递 token，就不能直接用 `<a>` 标签下载，而要先用 AJAX/`fetch` 携带请求头去请求资源，拿到二进制数据（`Blob`）后再触发下载。 ### 示例代码 ```js asynThu, 20 May 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000040005124/https://www.lilnong.top/blog/sf-a-1020000040005124/### 解答思路 遍历 `obj2` 自身的键，用同名键去 `obj1` 中取值，逐一赋值覆盖即可。 ### 示例代码 ```js const obj1 = { a: 1, b: 2, c: 3, d: 4 }; const obj2 = { b: 0, c: 0 }; Object.keys(obj2).forEacFri, 14 May 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000039890277/https://www.lilnong.top/blog/sf-a-1020000039890277/### 解答思路 闪烁的根本原因是第二张图片在 hover 触发时才开始加载，加载耗时导致画面出现空白/延迟。解决方向就是让第二张图片**提前加载好**，而不是等到 hover 时才加载。 ### 详细说明 常见的三种解决方式： 1. **CSS Sprite（雪碧图）**：把两张图拼接成一张图，通过 `backgroFri, 23 Apr 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000039771216/https://www.lilnong.top/blog/sf-a-1020000039771216/### 解答思路 浏览器层面无法真正“禁止”任意 JS 修改 DOM——只要脚本能拿到节点引用，就可以对其进行任意操作，这是浏览器开放能力决定的，无法从根本上阻止。可行的思路是转为**监听 + 恢复**，而不是**阻止**。 ### 详细说明 - 直接阻止：做不到，任何运行在页面上下文中的脚本理论上都能操作 DOM。 Sat, 03 Apr 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000039768940/https://www.lilnong.top/blog/sf-a-1020000039768940/### 解答思路 问题的根源不是 `v-model`，而是新 push 进数组的对象里根本没有 `price` 字段，并且直接 push 了原始对象的引用，导致数据被意外污染。 ### 示例代码 ```js selectChange(item) { // 错误写法：直接 push 原对象引用，且缺少 price 字段 Fri, 02 Apr 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000039359632/https://www.lilnong.top/blog/sf-a-1020000039359632/### 解答思路 局部光照效果通常不是靠单一 CSS 属性直接实现，而是组合使用「遮罩层 + 鼠标位置计算 + 层级控制」： 1. 用一个覆盖全区域的半透明遮罩模拟“变暗”的背景； 2. 通过 JS 监听鼠标位置，动态调整光照容器的位置； 3. 如果只需要简单的聚光效果，也可以用 `box-shadow` 配合定位元素Sat, 06 Mar 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000039257496/https://www.lilnong.top/blog/sf-a-1020000039257496/### 解答思路 让父元素成为“定位上下文”，子元素基于该上下文进行绝对定位，从而可以直接通过 `left`/`top` 或 `offsetLeft`/`offsetTop` 获得偏移量。 ### 示例代码 ```css .parent { position: relative; } .child { positionMon, 22 Feb 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000038911819/https://www.lilnong.top/blog/sf-a-1020000038911819/### 解答思路 jQuery 中常见的「选中一组元素再遍历处理」的逻辑，原生 JS 可以用 `document.querySelectorAll` 配合 `Array.from` 转换为真正的数组后，再调用数组的 `forEach` 方法来实现。 ### 示例代码 ```js // 选中所有匹配的元素（返回 NodeSat, 09 Jan 2021 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000038768824/https://www.lilnong.top/blog/sf-1190000038768824/又到了一年一度写总结的时候，趁着热度我也来混一波阳光普照。今年总结起来其实蛮简单的居家隔离、远程办公、疯狂加班。Thu, 31 Dec 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000038462302/https://www.lilnong.top/blog/sf-a-1020000038462302/### 解答思路 「同源」的判断标准是域名、协议、端口三者是否完全一致，而这些信息服务端完全可以从请求本身获取到：请求的目标地址可以直接从 URL 得知，请求的来源地址则可以从请求头中的 `Referer`（或 `Origin`）字段获取，二者一对比，服务端自然就能判断出这是否是一次跨域请求。 ### 详细说明 - *Sat, 12 Dec 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000038404135/https://www.lilnong.top/blog/sf-a-1020000038404135/### 解答思路 问题的关键在于区分清楚访问 `$refs` 时到底用的是「字面量属性名」还是「变量值作为属性名」，这三种写法在 JS 语法层面含义完全不同，只有正确地把变量作为动态键去访问，才能取到通过动态 `ref` 绑定注册的实例。 ### 示例代码 ```js this.$refs.label.focus();Sun, 06 Dec 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000038308970/https://www.lilnong.top/blog/sf-1190000038308970/面试题：使用 css 隐藏页面元素Wed, 02 Dec 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000038297693/https://www.lilnong.top/blog/sf-1190000038297693/一般用于审核后台，比如说要求图片在一定区间内才能加精。 也用于在 canvas 中裁图时计算缩放比例。Tue, 01 Dec 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000038295923/https://www.lilnong.top/blog/sf-1190000038295923/获取某个月的天数，这个题一般都是在学 switch(){} 一章的案例。Mon, 30 Nov 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000038154375/https://www.lilnong.top/blog/sf-a-1020000038154375/### 解答思路 这通常不是数组本身的问题，而是浏览器控制台打印对象/数组的机制导致的「假象」：控制台打印的其实是当时的一个引用快照，真正展开查看内部内容是在你点开它的那一刻才重新读取的，如果数组在打印之后、点开之前发生了变化（比如被清空又异步填充），就会看到「展开有内容，但顶层 length 却是 0」这种不一致的现Thu, 12 Nov 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000038139198/https://www.lilnong.top/blog/sf-a-1020000038139198/### 解答思路 `transform` 是纯视觉层面的变换，不会改变元素在文档流中原本占据的布局空间，因此单纯用 CSS 旋转无法让父元素“感知”到子元素旋转后的视觉尺寸。回答给出的是一种基于「浏览器会在内容溢出时显示滚动条」这一特性的变通思路：让内容溢出容器从而出现滚动条，再通过 JS 动态调整容器高度来达到视觉上Tue, 10 Nov 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000037760796/https://www.lilnong.top/blog/sf-a-1020000037760796/### 解答思路 报错的根源是循环从 `i = 0` 开始，导致代码中出现了 `yangHui[i - 1]`，也就是访问 `yangHui[-1]`——JavaScript 数组不支持负数下标访问，因此触发了越界/取值异常。解决方式是把循环起始值改为 `i = 1`，并单独给第 0 行赋初始值 `1`。 ### 示例Sat, 07 Nov 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037661643/https://www.lilnong.top/blog/sf-1190000037661643/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Fri, 30 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037658105/https://www.lilnong.top/blog/sf-1190000037658105/今天面试了一个人，居然不知道如何将伪数组转换为数组？Thu, 29 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037628688/https://www.lilnong.top/blog/sf-1190000037628688/前两天才分享了 input 的属性、特征。昨天就有个小伙伴踩雷了。所以素材又有了Wed, 28 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037622220/https://www.lilnong.top/blog/sf-1190000037622220/科学记数法是一种记数的方法。 特性：精度丢失、节省空间Tue, 27 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037592535/https://www.lilnong.top/blog/sf-1190000037592535/今天在前端工匠的群里，看到了一个问题（下载文件，但是请求头中需要传递 token，如何下载文件？怎么设置文件类型？），我们来解决一下这个问题。Mon, 26 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037571207/https://www.lilnong.top/blog/sf-1190000037571207/这个功能还比较常见，用来获取文本的长宽（避免了计算不准的问题），主要用于实现 textarea 自动变长。Sun, 25 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037571151/https://www.lilnong.top/blog/sf-1190000037571151/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sat, 24 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037571109/https://www.lilnong.top/blog/sf-1190000037571109/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Fri, 23 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037591985/https://www.lilnong.top/blog/sf-1190000037591985/今天正是个好日子，1024 程序员节。Fri, 23 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037538101/https://www.lilnong.top/blog/sf-1190000037538101/前两天接到了一个需求：手机号、身份证、验证码 需要校验，检验规则包括长度、内容。Tue, 20 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037455206/https://www.lilnong.top/blog/sf-1190000037455206/前端 BUG 录 - 因 lodashjs debounce 去抖优化造成的 bug 这两个 BUG 其实是同一个 BUG，怎么说呢？两个都没错，错就错在同时使用了。Mon, 19 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037465717/https://www.lilnong.top/blog/sf-1190000037465717/如果你是想看怎么做？那么你可以直接去看我之前写的Vue 实现弹幕效果。Sun, 18 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000024536640/https://www.lilnong.top/blog/sf-1190000024536640/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sat, 17 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037475531/https://www.lilnong.top/blog/sf-1190000037475531/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Fri, 16 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037453771/https://www.lilnong.top/blog/sf-1190000037453771/做开发其实还是要考虑一下边界问题，因为边界问题有时候会导致体验断崖式的下跌。Thu, 15 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000037452855/https://www.lilnong.top/blog/sf-1190000037452855/一般来说布局我们都是水平布局，最多搞个垂直居中。而且对于一些 float 、 position 好像本身就不太适合垂直布局。Wed, 14 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000024536624/https://www.lilnong.top/blog/sf-1190000024536624/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Tue, 13 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022957951/https://www.lilnong.top/blog/sf-1190000022957951/最近公司一直在做众审平台相关的功能，大多数还都和音视频有关，前端终究还是逃不过这一劫。Mon, 12 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000023460961/https://www.lilnong.top/blog/sf-1190000023460961/前段时间写了一个上传文件前预览的功能，用于 pc 端。Sun, 11 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022980730/https://www.lilnong.top/blog/sf-1190000022980730/因为疫情，所有学校都放假了（从寒假到暑假，我也想要啊） 云合影、云毕业照、人脸融合成了热点名词，咱们也来凑凑热闹（demo 代码大概六月份就写了，一直没整理内容，现在成了吃冷饭了）Sat, 10 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022925737/https://www.lilnong.top/blog/sf-1190000022925737/正好回答了一个问题，浏览器哪个事件里可以 禁止 浏览器对title显示默认行为？ 。Fri, 09 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000024538328/https://www.lilnong.top/blog/sf-1190000024538328/昨天朋友说要实现一个效果，获取鼠标所在区域的容器，区域外都遮罩半透明，起名为专注模式。我们今天来实现一下。Thu, 08 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000024536593/https://www.lilnong.top/blog/sf-1190000024536593/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 07 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000024536586/https://www.lilnong.top/blog/sf-1190000024536586/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Tue, 06 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000024536552/https://www.lilnong.top/blog/sf-1190000024536552/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 05 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022728116/https://www.lilnong.top/blog/sf-1190000022728116/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 04 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022728111/https://www.lilnong.top/blog/sf-1190000022728111/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sat, 03 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022728094/https://www.lilnong.top/blog/sf-1190000022728094/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Fri, 02 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022728080/https://www.lilnong.top/blog/sf-1190000022728080/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Thu, 01 Oct 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022728047/https://www.lilnong.top/blog/sf-1190000022728047/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 30 Sep 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000024500734/https://www.lilnong.top/blog/sf-a-1020000024500734/### 解答思路 核心思路是：把所有需要预加载的图片地址放进一个数组，遍历数组为每个地址创建一个 `Image` 对象并触发加载，在每张图片的 `onload` 回调中把已完成计数加 1，用「已完成数量 / 总数量」计算出当前进度百分比，驱动进度条更新。 ### 示例代码 ```js const urls = [ 'hThu, 17 Sep 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000024442835/https://www.lilnong.top/blog/sf-a-1020000024442835/### 解答思路 关键先要区分清楚 `MyObj.showName()`（调用方法，取的是**返回值**）和 `MyObj.showName`（取的是**方法本身的引用**，尚未调用）是两个完全不同的东西；再结合 `this` 的指向规则——默认由「调用者」决定——就能推出为什么直接把方法引用传给 `setTimeouSat, 12 Sep 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000024420084/https://www.lilnong.top/blog/sf-a-1020000024420084/### 解答思路 纯 CSS 选择器（如 `:first-child`、`:last-child`、相邻选择器等）只能基于 DOM 结构中固定的「前后」「子级」关系去匹配元素，难以覆盖动态变化或更复杂的交界场景；更通用的做法是用 JS 判断实际的交界条件后，动态给相邻的两个元素分别添加特定的 class，再通过这些 cThu, 10 Sep 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000023370603/https://www.lilnong.top/blog/sf-a-1020000023370603/### 解答思路 两者的核心区别在于 `this` 的确定时机：箭头函数的 `this` 在**定义**时就已经确定，继承自外层作用域；普通函数的 `this` 则要等到**调用**时，根据调用方式动态确定。 ### 示例代码 ```js // 普通 function 形式的 IIFE：this 由调用方式决定 (asFri, 24 Jul 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000023311808/https://www.lilnong.top/blog/sf-a-1020000023311808/### 解答思路 禁止元素拖动常见的做法确实是 `user-select: none` 和 `-webkit-user-drag: none` 这两个 CSS 属性，但如果页面没有使用它们、却观察到了拖动相关事件的绑定，说明很可能是通过监听 `dragstart` 等原生拖拽事件、并在事件回调中调用 `preventDSun, 19 Jul 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022736770/https://www.lilnong.top/blog/sf-1190000022736770/移动互联网时代，“用户增长”成为每个公司关注的重点话题。 促活拉新是大多数公司的核心，为了将更多用户引导到客户端内，那么主要的渠道有哪些？又是通过什么样的方式回流到客户端内呢？Wed, 27 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022651551/https://www.lilnong.top/blog/sf-1190000022651551/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 25 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022651538/https://www.lilnong.top/blog/sf-1190000022651538/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 24 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022628367/https://www.lilnong.top/blog/sf-1190000022628367/最近在思否看到一个文章36个工作中常用的JavaScript函数片段。Sat, 23 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000022727690/https://www.lilnong.top/blog/sf-a-1020000022727690/### 解答思路 可以把 Node.js 理解为「一个运行 JavaScript 的环境」，类似于把它想象成一个特殊的浏览器：不解析 HTML、不解析 CSS，缺少浏览器特有的一些 API（如 DOM、BOM），但补充了一整套操作系统级的 API（文件系统、网络、进程等）。至于「定位」，更实际的理解方式是看它目前主要被Sat, 23 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022616927/https://www.lilnong.top/blog/sf-1190000022616927/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Fri, 22 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000022722650/https://www.lilnong.top/blog/sf-a-1020000022722650/### 解答思路 超时问题通常来自两个方向：前端自己设置了过短的 `timeout` 限制，或服务端主动断开了长时间未完成的连接。针对下载进度展示，axios 本身提供了 `onUploadProgress` 和 `onDownloadProgress` 两个回调，可以直接监听原生的进度事件。 ### 示例代码 ```Fri, 22 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022597533/https://www.lilnong.top/blog/sf-1190000022597533/前天有个需求，上传前需要校验视频长度，然后让我出个 Demo。 预览文件 demoThu, 21 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022552442/https://www.lilnong.top/blog/sf-1190000022552442/新年不是搞了个摇签的功能吗，弹幕效果咱们前面讲过了，今天来说说摇一摇效果Wed, 20 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022515217/https://www.lilnong.top/blog/sf-1190000022515217/前两天做了一个搜索中间页，有个 input 的效果挺有意思，准备分享一下。Tue, 19 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022507515/https://www.lilnong.top/blog/sf-1190000022507515/为什么写这个题目呢？ 因为之前写的一个 Node 程序有点小问题，使用的 axios 通过代理请求数据，代理服务器（阿布云）时不时抽风（407、413、503）。Mon, 18 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022500122/https://www.lilnong.top/blog/sf-1190000022500122/今天有个朋友说要做个效果：Vue实现拖拽排序，要有 checked，输出结果是排序后的，要全选，未选中的不能拖动。Sun, 17 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022549145/https://www.lilnong.top/blog/sf-1190000022549145/这两天又看到有人问 Vue 如何做弹幕效果。Sat, 16 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000022666756/https://www.lilnong.top/blog/sf-a-1020000022666756/### 解答思路 把值的对照关系转换成下标的对照关系来观察规律：先统计数组中「独立元素个数」（用 `Set` 去重后的大小）和「每个元素重复的次数」，再用这两个数值推导出一个下标映射公式，最后通过 `reduce` 按照该公式重新排列数组。 ### 示例代码 ```js var arr = [1, 1, 2, 2, 3Sat, 16 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022539504/https://www.lilnong.top/blog/sf-1190000022539504/我认为这道题是一个挺有意思的题，但是回答正确的面试者很少，今天我来聊一聊。先上 DJ，哦不对先上 DEMO，测试地址：https://www.lilnong.top/static/html/textarea-event-test.htmlFri, 15 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022493596/https://www.lilnong.top/blog/sf-1190000022493596/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Thu, 14 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000021759936/https://www.lilnong.top/blog/sf-1190000021759936/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 13 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000021745864/https://www.lilnong.top/blog/sf-1190000021745864/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Tue, 12 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000022628185/https://www.lilnong.top/blog/sf-a-1020000022628185/### 解答思路 这类问题的根源几乎都出在「存入的是对象，取出来却当字符串用」或者反过来。可以按顺序排查：先打印取出的值本身，再用 `typeof` 判断它到底是字符串还是对象，是字符串就需要用 `JSON.parse` 转换成对象后再访问属性。 ### 详细说明 排查步骤： 1. **先直接打印 `params`**Tue, 12 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000021281801/https://www.lilnong.top/blog/sf-1190000021281801/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 11 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022235530/https://www.lilnong.top/blog/sf-1190000022235530/这两天（已经是一个多月前了） SF 上面很多 cookie 的问题，然后还有个 cookie 相关的付费问答。 所以咱们今天来这么一节，废话多说点，先说说大体问题方向。Sun, 10 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022534792/https://www.lilnong.top/blog/sf-1190000022534792/如果你是为了获取 exif 解析后的信息，那么你可以看这篇 前端获取图片exif信息，通过 exif-js 来获取的。Sat, 09 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022530734/https://www.lilnong.top/blog/sf-1190000022530734/还是前两天的那个唱歌中间页，上线前发现滚动时候体验不好。Fri, 08 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000022591593/https://www.lilnong.top/blog/sf-a-1020000022591593/### 解答思路 执行顺序由 JavaScript 的事件循环（Event Loop）机制决定：每执行完一个宏任务后，会先把当前微任务队列中的所有任务清空执行完，然后才会去取下一个宏任务继续执行；`Promise.then` 的回调属于微任务，`setTimeout` 的回调属于宏任务。 ### 详细说明 Event Fri, 08 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022528290/https://www.lilnong.top/blog/sf-1190000022528290/前端生成二维码我们之前使用的是 QRCode.js，我相信大家首选也都是这个。Thu, 07 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022528155/https://www.lilnong.top/blog/sf-1190000022528155/前段时间公司要做个歌词标记功能，标记副歌、前奏、无效内容等等。找了找没有找到类似的实现，只能自己实现一把。Wed, 06 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022525432/https://www.lilnong.top/blog/sf-1190000022525432/因为疫情五一假期也不能出去玩，只好在家撸代码。Tue, 05 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000022552098/https://www.lilnong.top/blog/sf-a-1020000022552098/### 解答思路 Props 的数据类型决定了直接修改的实际后果不同：基本类型（字符串、数字、布尔等）修改后仅影响子组件本地的这份拷贝，父组件的数据不会变，因此“修改也没用”；引用类型（对象、数组）由于共享同一份内存引用，修改会直接影响到父组件的数据，看似“有效”，但会破坏组件间的单向数据流，导致数据流向变得不清晰、难Tue, 05 May 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000022466979/https://www.lilnong.top/blog/sf-a-1020000022466979/### 解答思路 `res.push(path)` 直接把 `path` 这个数组的引用存入 `res`，之后如果 `path` 本身被修改，`res` 里存的内容也会跟着变；而 `res.push([...path])` 通过展开语法先复制出一个全新数组再存入 `res`，从而切断了与原 `path` 的引用关系，后Fri, 24 Apr 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000022419976/https://www.lilnong.top/blog/sf-a-1020000022419976/### 解答思路 `el-table` 的 `select` 事件在单击某一行的选择框时触发，回调会同时提供「当前所有已选中的行」和「本次被点击的那一行」，通过判断这一行是否还存在于当前选中列表中，就能区分是勾选还是取消勾选。 ### 示例代码 ```html <el-table ref="multipleTable"Sat, 18 Apr 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022061447/https://www.lilnong.top/blog/sf-1190000022061447/爬虫类的需求，基本上在各个公司都会有，难免就会落在前端开发的头上。今天我们就来看看 Node 如何爬数据。Mon, 30 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022180412/https://www.lilnong.top/blog/sf-1190000022180412/[面试官系列]数组中查找元素下标Sun, 29 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000022157030/https://www.lilnong.top/blog/sf-a-1020000022157030/### 解答思路 将图片资源地址放在 `<a>` 标签的 `href` 上，并让服务端为该资源响应设置下载相关的响应头，是移动端触发下载兼容性较好的做法。 ### 示例代码 ```html <a href="https://example.com/pic.jpg">点击下载图片</a> ``` ``` Content-Wed, 25 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000022091850/https://www.lilnong.top/blog/sf-a-1020000022091850/### 解答思路 问题根源在于箭头函数本身没有自己的 `this`，它的 `this` 在定义时就已经确定（继承自外层作用域），因此即便 `Array.from(arrayLike, mapFn, thisArg)` 提供了 `thisArg` 参数用来指定 `mapFn` 内部的 `this`，如果 `mapFn` Fri, 20 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022022379/https://www.lilnong.top/blog/sf-1190000022022379/对又是我，每天都有新的需求。Wed, 18 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022021264/https://www.lilnong.top/blog/sf-1190000022021264/工作中我相信大家都遇到过设计要求使用一些奇奇怪怪字体的需求，然后因为字体文件太大，选择切图。Tue, 17 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022017869/https://www.lilnong.top/blog/sf-1190000022017869/工作中我们有下面几种方式收集用户输入的内容Mon, 16 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022015361/https://www.lilnong.top/blog/sf-1190000022015361/开篇我先吐槽一下微信开发者的文档，千年不更新。Sun, 15 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022030936/https://www.lilnong.top/blog/sf-1190000022030936/周日有个小伙加我，帮他排查了一下问题。正好记录一下。Sun, 15 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022014580/https://www.lilnong.top/blog/sf-1190000022014580/前段时间公司网页被 xss 搞了一下，微信把域名封了，通宵搞了好几天。Sat, 14 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022007778/https://www.lilnong.top/blog/sf-1190000022007778/文章好久都没更新，最近在家办公，超级忙。 准备更新更新我最近遇到的问题，bug之类的。Fri, 13 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000022010106/https://www.lilnong.top/blog/sf-1190000022010106/最近有人提需求，产品要适配横竖屏，这就令人头秃了呀。Fri, 13 Mar 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000021730888/https://www.lilnong.top/blog/sf-a-1020000021730888/### 解答思路 针对封面图裁剪问题，提供了三种递进的方案：优先用 CDN 的裁图能力在图片源头处理；如果已经改用 `<img>` 标签展示封面，可以考虑用 `background-image` 承载；或者直接给 `<img>` 使用 CSS 的 `object-fit` 属性来控制裁剪填充规则。 ### 详细说明 1Tue, 11 Feb 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000021281744/https://www.lilnong.top/blog/sf-1190000021281744/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 06 Jan 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000021281667/https://www.lilnong.top/blog/sf-1190000021281667/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 05 Jan 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000021496998/https://www.lilnong.top/blog/sf-a-1020000021496998/### 解答思路 核心思路是：先算出圆上任意一点的坐标，再以固定弧度为步长遍历圆周上的多个点；每两个相邻点连成的线段方向，就是该处箭头应该旋转的角度。绘制时使用 `translate` 把画布原点移动到目标点，再用 `rotate` 旋转到计算出的角度，最后绘制箭头图形。 ### 详细说明 - **确定圆上点的坐标**Sun, 05 Jan 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000021281633/https://www.lilnong.top/blog/sf-1190000021281633/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Thu, 02 Jan 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020989873/https://www.lilnong.top/blog/sf-1190000020989873/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 01 Jan 2020 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020989869/https://www.lilnong.top/blog/sf-1190000020989869/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Tue, 31 Dec 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000021433478/https://www.lilnong.top/blog/sf-1190000021433478/本来是不准备写年终总结（我媳妇写总结就拖延了好久，我拖延症更严重）。但是又想了一下，今年提升还是蛮多的，不记录一下又感觉缺少点什么。Mon, 30 Dec 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020936990/https://www.lilnong.top/blog/sf-1190000020936990/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 08 Dec 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020933267/https://www.lilnong.top/blog/sf-1190000020933267/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Thu, 07 Nov 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020913212/https://www.lilnong.top/blog/sf-1190000020913212/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 06 Nov 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020779678/https://www.lilnong.top/blog/sf-1190000020779678/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 28 Oct 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020773377/https://www.lilnong.top/blog/sf-1190000020773377/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Tue, 22 Oct 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020761500/https://www.lilnong.top/blog/sf-1190000020761500/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 21 Oct 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000020726401/https://www.lilnong.top/blog/sf-a-1020000020726401/### 解答思路 `this` 指向的本质是「函数的作用域规则」：普通函数中的 `this` 由调用方式决定，若指向出现偏差，可以用 `bind` 显式绑定，或直接改用箭头函数，因为箭头函数不会创建自己的 `this`，而是继承定义时所在作用域的 `this`。 ### 详细说明 按常见场景梳理 `this` 的指向规Thu, 17 Oct 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020623775/https://www.lilnong.top/blog/sf-1190000020623775/公司国庆搞了个集卡、抽奖小活动。抽奖需要刮刮卡的效果，感觉 css 是实现不了。看我使用 canvas 如何实现刮刮卡效果。 废话不多说，线上效果 jsrun-测试地址 、 lilnong.top-测试地址Tue, 08 Oct 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020625420/https://www.lilnong.top/blog/sf-1190000020625420/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Tue, 08 Oct 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020531386/https://www.lilnong.top/blog/sf-1190000020531386/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 29 Sep 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020532808/https://www.lilnong.top/blog/sf-1190000020532808/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 29 Sep 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020534333/https://www.lilnong.top/blog/sf-1190000020534333/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 29 Sep 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020481658/https://www.lilnong.top/blog/sf-1190000020481658/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Tue, 24 Sep 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020493881/https://www.lilnong.top/blog/sf-1190000020493881/今天下午微信朋友圈炸了，所有人都在要国旗。迎国庆换新颜活动 | 腾讯新闻的合成服务 微信中打开。 我们呢，也来蹭蹭热度，聊聊其中的技术。Tue, 24 Sep 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020204490/https://www.lilnong.top/blog/sf-1190000020204490/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 23 Sep 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000020155549/https://www.lilnong.top/blog/sf-1190000020155549/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 26 Aug 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000019970144/https://www.lilnong.top/blog/sf-a-1020000019970144/### 解答思路 正序、倒序其实不需要手写循环，直接用数组原生方法即可：正序保持原样，倒序用 `reverse()`；乱序可以用 `sort()` 配合随机比较函数实现，前提是没有额外的排序标识（比如「第十天」「第十一天」这种非数值字符串需要特殊处理）。 ### 示例代码 ```js // 倒序 arr.reverseSun, 04 Aug 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019815534/https://www.lilnong.top/blog/sf-1190000019815534/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 24 Jul 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019790710/https://www.lilnong.top/blog/sf-1190000019790710/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Thu, 18 Jul 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019790706/https://www.lilnong.top/blog/sf-1190000019790706/之前写过前端答疑-chrome开发者工具正确食用-看网页源码，其中涉及到了 Sources 和 Network 两个标签。Wed, 17 Jul 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019735939/https://www.lilnong.top/blog/sf-1190000019735939/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Tue, 16 Jul 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019705779/https://www.lilnong.top/blog/sf-1190000019705779/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 08 Jul 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019629508/https://www.lilnong.top/blog/sf-1190000019629508/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 01 Jul 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019611763/https://www.lilnong.top/blog/sf-1190000019611763/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Thu, 27 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019591330/https://www.lilnong.top/blog/sf-1190000019591330/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 26 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019581713/https://www.lilnong.top/blog/sf-1190000019581713/在前端越来越重的这个时代，页面加载速度成为了一个重要的指标。对于这个问题，业界也有一些解决方案。Tue, 25 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019526598/https://www.lilnong.top/blog/sf-1190000019526598/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 23 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019520438/https://www.lilnong.top/blog/sf-1190000019520438/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 19 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000019539013/https://www.lilnong.top/blog/sf-a-1020000019539013/### 解答思路 浏览器是否下载文件，除了看前端 `<a>` 标签本身的属性，还会参考服务端响应头。可以从两方面入手：给 `<a>` 标签加 `download` 属性，同时让服务端返回 `Content-Disposition: attachment` 响应头。 ### 示例代码 ```html <a href="aWed, 19 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019519473/https://www.lilnong.top/blog/sf-1190000019519473/最近这两周在忙着给公司爬一点数据，更文的速度有一点下降，预计今天就爬完了，总结总结经验。Tue, 18 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019433644/https://www.lilnong.top/blog/sf-1190000019433644/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 17 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019514989/https://www.lilnong.top/blog/sf-1190000019514989/我最近没有摸鱼，一直都在工作。只不过目前需要爬一点数据 python 做的，之后看机会分享一下。Mon, 17 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019410216/https://www.lilnong.top/blog/sf-1190000019410216/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 09 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019432855/https://www.lilnong.top/blog/sf-1190000019432855/事情发生在上周（2019-06-06）团队技术分享的时候。 起因在于一个问题：vue 中多个组件如何使用同一个变量，我们叫这个变量为 baseConfig 吧。 说实话我没想到那么多人不理解其中的知识。今天我整理一下发出来。Sun, 09 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019403486/https://www.lilnong.top/blog/sf-1190000019403486/前天，快下班的时候，一朋友发来一个战绩图。 这是要约我上分？（这兄弟一手 C 位吊打亲友）。我果断拒绝三连。 结果，小韭菜问我，右边那个图怎么做？那好了，事情从这里开始Wed, 05 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019407019/https://www.lilnong.top/blog/sf-1190000019407019/写这个文章，是因为在今天早上，有两个兄弟找我要源码。有图有真相。 我震惊于都 9102年了，身为了一个正（xie）经（xin）前端er，还不会看控制台？Wed, 05 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019371484/https://www.lilnong.top/blog/sf-1190000019371484/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 02 Jun 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019315765/https://www.lilnong.top/blog/sf-1190000019315765/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 27 May 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019306002/https://www.lilnong.top/blog/sf-1190000019306002/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 26 May 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019189186/https://www.lilnong.top/blog/sf-1190000019189186/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Tue, 14 May 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019158835/https://www.lilnong.top/blog/sf-1190000019158835/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 12 May 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019164089/https://www.lilnong.top/blog/sf-1190000019164089/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 12 May 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019135939/https://www.lilnong.top/blog/sf-1190000019135939/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Thu, 09 May 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019117812/https://www.lilnong.top/blog/sf-1190000019117812/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 08 May 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019121492/https://www.lilnong.top/blog/sf-1190000019121492/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 08 May 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019122714/https://www.lilnong.top/blog/sf-1190000019122714/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Wed, 08 May 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000019112572/https://www.lilnong.top/blog/sf-1190000019112572/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Tue, 07 May 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000018954580/https://www.lilnong.top/blog/sf-a-1020000018954580/### 解答思路 这种写法是可行的：在循环体内创建 Promise，将 resolve 放到 img.onload 回调中，再用 await 阻塞循环，直到图片加载完成后 Promise 被 resolve，循环才会进入下一次迭代。 ### 示例代码 ```js async function a() { for (leMon, 22 Apr 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000018710007/https://www.lilnong.top/blog/sf-1190000018710007/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 31 Mar 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000018646029/https://www.lilnong.top/blog/sf-1190000018646029/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 24 Mar 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000018605820/https://www.lilnong.top/blog/sf-1190000018605820/Ajax 即 Asynchronous Javascript And XML （异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。在无需重新加载整个网页的情况下，能够更新部分网页的技术。一般我们使用 XMLHTTPRequest、Fetch API、ActiveXObject（低版本 Thu, 21 Mar 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000018567074/https://www.lilnong.top/blog/sf-1190000018567074/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Mon, 18 Mar 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000018462647/https://www.lilnong.top/blog/sf-1190000018462647/前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。Sun, 10 Mar 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000018416160/https://www.lilnong.top/blog/sf-1190000018416160/本着提升技术水平，打牢基础知识的中心思想。前端内部开始小课堂啦（本人凭借身高优势，人群中多看了我一眼，稳稳拿到第一课）。Wed, 06 Mar 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000018228846/https://www.lilnong.top/blog/sf-a-1020000018228846/### 解答思路 不需要精确计算高度的一半，只要把 border-radius 设置成一个足够大的数值（远超过元素实际高度），浏览器会自动把它截断到「高度的一半」，效果等同于胶囊形状。 ### 示例代码 ```css .toast { border-radius: 999999px; } ``` ### 详细说明 CSWed, 20 Feb 2019 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000016811831/https://www.lilnong.top/blog/sf-a-1020000016811831/### 解答思路 点击一次却触发多次回调，通常是因为同一个元素被重复绑定了多次相同的 `click` 事件（比如在某个会被多次执行的初始化逻辑里反复调用了 `.on("click", ...)`），解决方法是在重新绑定之前先用 `.off()` 解绑，避免事件重复累加。 ### 示例代码 ```js // 问题代码：如Thu, 25 Oct 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000016332887/https://www.lilnong.top/blog/sf-a-1020000016332887/### 解答思路 回答者首先指出这个需求本身在交互上不太合理：`textarea` 是让用户编辑内容的控件，如果给它设置省略号效果，用户在继续输入时会看不到已经被截断隐藏的部分文字，容易变成盲打，体验很差；更合理的做法是区分编辑态和浏览态——编辑时用原生表单控件，浏览展示时切换成普通的 `div` 之类的元素来实现省略Sun, 09 Sep 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000016310381/https://www.lilnong.top/blog/sf-1190000016310381/锻炼自己的能力，让自己更加熟悉各个api的使用。 下面是javascript版本的leetcode题目（字符串入门题组）解法。leetCode地址。Thu, 06 Sep 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000016304482/https://www.lilnong.top/blog/sf-a-1020000016304482/### 解答思路 计算“相差 x 年 x 月 x 天”并没有一个官方的标准算法，因为不同的业务场景对进位规则的理解不完全一致；作者给出的思路是：先比较年份，再看月/日是否需要借位调整，逐级从大单位到小单位处理，遇到不够减的情况就向上一级借位（类似列竖式减法）。 ### 详细说明 - **年份计算**：先用“结束年 - Thu, 06 Sep 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000016211779/https://www.lilnong.top/blog/sf-a-1020000016211779/### 解答思路 核心思路是用一个哈希表（`Map` 或普通对象）存下每个节点的引用，遍历一次数组，把每个节点按 `pid` 挂到对应父节点的 `children` 数组下，这样只需要遍历一次就能利用对象引用把树连起来，不需要写真正的递归函数。 ### 示例代码 ```js // 方案一：使用 Map var rr =Wed, 29 Aug 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000015849866/https://www.lilnong.top/blog/sf-1190000015849866/刚才某人问了我一个问题。map怎么遍历，我刷刷刷就是一顿写。遍历么，forEach么，妥妥的。Tue, 31 Jul 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000015815478/https://www.lilnong.top/blog/sf-1190000015815478/对于H5页面来说二次分享还是蛮重要的，毕竟qq还是微信发出去之后习惯性的使用自带的分享功能。和PC端不同，PC直接复制地址了。前两天在做请柬，踩了不少的雷，个人开发和公司开发还是不一样，各种问题，其他问题放在一个请柬的后记里面说吧。我们开始正题。Sun, 29 Jul 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000015751705/https://www.lilnong.top/blog/sf-1190000015751705/好久没有写Vue了，略有生疏，这个东西还是得多用。 下午看到一个需求，选择相册图片作为轮播图显示。接口返回相册列表，用户选一下再扔回去。 直到我看到e.target.className我就知道这个事情不简单。。Mon, 23 Jul 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000014752954/https://www.lilnong.top/blog/sf-a-1020000014752954/### 解答思路 `<input type="file">` 的 `change` 事件是根据“值是否发生变化”来判断是否触发的；如果两次选择的是同一个文件，浏览器认为 `input` 的值没有变化，因此不会再次触发 `change`。解决办法是在每次处理完文件后，主动把该 `input` 的 `value` 清空。 Sun, 06 May 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000014234901/https://www.lilnong.top/blog/sf-1190000014234901/书写是为了更好的记忆。Sat, 07 Apr 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000013846049/https://www.lilnong.top/blog/sf-a-1020000013846049/### 解答思路 `currentListeners.slice()`（不传参数）会返回一个和原数组内容相同、但引用完全独立的新数组；如果直接写 `nextListeners = currentListeners`，两个变量会指向同一个数组地址，后续对 `nextListeners` 的增删操作会同时影响到 `currMon, 19 Mar 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000013617994/https://www.lilnong.top/blog/sf-a-1020000013617994/### 解答思路 问题的根源在于路由模式和参数获取方式不匹配：如果项目使用的是 hash 模式路由（`#` 开头），实际参数是拼接在 `location.hash` 里的，而提问者却用 `location.search` 去获取，自然拿不到值，一直是 `null`。 ### 详细说明 - Vue Router 默认（或Thu, 08 Mar 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000013593974/https://www.lilnong.top/blog/sf-a-1020000013593974/### 解答思路 这类“点击左侧菜单，右侧内容区切换”的后台管理系统，常见的实现方式大致可以分为三类：`iframe` 嵌入、Ajax 局部刷新、以及基于单页应用（SPA）框架的路由切换。 ### 详细说明 1. **`iframe` 引入**：每个菜单项对应一个独立的页面地址，切换菜单时改变某个 `iframe` 的Wed, 07 Mar 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000013517850/https://www.lilnong.top/blog/sf-a-1020000013517850/### 解答思路 在嵌套循环中删除元素时要注意“你要删除的是哪一层”：如果用 `splice` 直接操作内层数组，需要格外小心索引错位的问题；更稳妥的做法是外层用 `map` 生成新数组，内层用 `filter` 按条件筛选出需要保留的元素，两者组合既能避免索引错乱，又能直观表达“筛选”这个语义。 ### 示例代码 `Sun, 04 Mar 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000013518365/https://www.lilnong.top/blog/sf-a-1020000013518365/### 解答思路 `setInterval` 一旦启动，间隔时间确实无法再动态修改；但可以换用 `setTimeout` 递归调用自身的方式实现定时器，每次调用时都可以重新传入一个新的（可变的）延时值，从而实现“间隔时间可变”的效果。 ### 示例代码 ```js var speed = 5000; function Sun, 04 Mar 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000013524720/https://www.lilnong.top/blog/sf-a-1020000013524720/### 解答思路 `$(".t1")` 这类选择器的作用是“在调用的那一刻”找到当前 DOM 中所有匹配的元素，并把事件直接绑定在这些具体的 DOM 节点上；后续再修改 class 或新增符合 `.t1` 的元素，都不会自动补上这个事件，因为绑定动作早已完成。要让动态元素也能响应事件，需要使用事件委托的写法。 ### Sun, 04 Mar 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000013417502/https://www.lilnong.top/blog/sf-a-1020000013417502/### 解答思路 `{ ...to }` 使用的是 ES2015（ES6）引入的对象展开运算符，作用是把 `to` 对象上的所有可枚举属性“平铺”复制到一个新的对象字面量里；如果后续不对这个新对象做任何修改，效果和直接传 `to` 是一样的，但如果需要在展开的基础上覆盖或新增字段，两者就会产生差异。 ### 示例代码 Mon, 26 Feb 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000013339869/https://www.lilnong.top/blog/sf-1190000013339869/刚才回答了一个H5游戏的问答。心血来潮，就想写写碰撞检测，废话不多说，直接怼。Thu, 22 Feb 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000013335248/https://www.lilnong.top/blog/sf-a-1020000013335248/### 解答思路 使用 `document.querySelectorAll` 配合 CSS 子选择器 `>`，可以精确获取某个元素下的直接子元素。 ### 示例代码 ```js document.querySelectorAll('#uu>li'); ``` ### 详细说明 `#uu>li` 是一个 CSS 子选择Thu, 22 Feb 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000013325602/https://www.lilnong.top/blog/sf-a-1020000013325602/### 解答思路 分析一个页面用了哪些技术，最直接的方式就是打开浏览器开发者工具，从 Console、Sources、Network 等面板入手排查，动画效果和第三方插件基本都能通过这种方式定位到。 ### 详细说明 - **动画效果**：这个页面的动画是用 CSS3 实现的，核心用到了 `transform: traWed, 21 Feb 2018 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000012402367/https://www.lilnong.top/blog/sf-1190000012402367/前段时间在网上看到一个网址，好奇之下进去看了看。胜利的条件是你录入一个串，让其调用prompt(1) 。发现里面有好多想不到的东西，今天终于悠闲了来这里说说XSS。Tue, 12 Dec 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000011789491/https://www.lilnong.top/blog/sf-1190000011789491/先来介绍一下我们的主角download让我们有一个简单认识,图中我们可以看到a标签的download属性，他是用来指定可以下载，值是filename。图片来源Mon, 30 Oct 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000011724461/https://www.lilnong.top/blog/sf-a-1020000011724461/### 解答思路 问题的根源通常是页面缺少（或写错）文档类型声明 `<!DOCTYPE html>`；IE 在没有检测到有效 DOCTYPE 时，会回退到怪异模式渲染页面，其渲染行为会模拟非常老旧版本浏览器（表现类似 IE5），导致布局和样式和预期不符。 ### 详细说明 `<!DOCTYPE html>` 的作用是告Wed, 25 Oct 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000010541546/https://www.lilnong.top/blog/sf-1190000010541546/设计模式这种东西说起来都有一个怪怪的名字，但是使用率还是蛮高的。简单介绍一下单例模式，只实例化一次，在一些弹框啊，提示啊什么上面会用到，尤其是在使用了数据驱动视图这种写法，控制起来还是比较难的，之前jquery直接$('.popover').hide()就都隐藏掉不太一样。Sun, 06 Aug 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000010321471/https://www.lilnong.top/blog/sf-1190000010321471/一个网页由三层组成（html 结构，js 行为，css 表现），一切的东西其实都建立在html上，html里面的dom提供了一些事件，然后通过js封装，我们可以用js去调用dom上的事件。事件有很多，有我用过的有我没用过的，今天我想分析一番。Sun, 23 Jul 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000010251116/https://www.lilnong.top/blog/sf-1190000010251116/HTML5已经从一个新的名词变成了我们在项目中经常用到的东西了，今天我们就来分析一番其中contenteditable 。Tue, 18 Jul 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000010229169/https://www.lilnong.top/blog/sf-a-1020000010229169/### 解答思路 回答用一句调侃点出了核心原因：前端开发者如果长期使用高性能设备和新版浏览器开发调试，很容易忽略真实用户环境（尤其是老旧浏览器、低版本 IE）中页面的实际兼容情况。 ### 详细说明 门户网站通常面向非常广泛、包含大量老旧设备和浏览器（比如低版本 IE）的用户群体，而 Flexbox 在这些环境下支持不Mon, 17 Jul 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000009957931/https://www.lilnong.top/blog/sf-a-1020000009957931/### 解答思路 当写成 `128.toString()` 时，JavaScript 解析器会把 `128.` 识别成一个带小数点的数字字面量（即 `128.0`），而不是“数字 128 后面跟一个属性访问”，因此直接在后面写 `.toString()` 会因为语法歧义而出错。 ### 详细说明 常见的三种规避方式： Tue, 27 Jun 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000009934851/https://www.lilnong.top/blog/sf-a-1020000009934851/### 解答思路 可以监听 `input` 或 `change` 事件来感知值的变化，两者触发时机不同；对于需要兼容旧版 IE 的场景，还需要额外处理 `propertychange` 事件；更通用的做法是引入“数据绑定”的思想，用 getter/setter 统一管理数据变化。 ### 详细说明 - `input` Sun, 25 Jun 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000009865287/https://www.lilnong.top/blog/sf-a-1020000009865287/### 解答思路 JavaScript 变量（以及某些场景下直接当作标识符使用的名称）命名规则中不允许使用连字符 `-`，把 `-` 换成下划线 `_` 即可解决报错，例如把 `add-button` 改成 `add_button`。 ### 详细说明 JavaScript 标识符的命名规则是：只能以字母、下划线 `_Tue, 20 Jun 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000009684271/https://www.lilnong.top/blog/sf-a-1020000009684271/### 解答思路 `setTimeout` 设置的毫秒数并不是“精确的执行时间”，而是“多久之后可以被放入任务队列等待执行”；只有当前同步代码（包括被 `alert` 阻塞的那段）全部执行完毕，JS 引擎才会去看队列里有没有到时间的回调可以执行。 ### 示例代码 ```js for (var i = 0; i < 5Tue, 06 Jun 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000009450503/https://www.lilnong.top/blog/sf-a-1020000009450503/### 解答思路 这种现象通常是浏览器默认的文本选择行为被触发（比如快速点击、拖动式点击），可以通过 CSS 禁止该元素及其周边内容被选中来解决。 ### 示例代码 ```css .no-select { user-select: none; } ``` ### 详细说明 给触发点击的元素（或其外层容器）加上 `useTue, 16 May 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000009355985/https://www.lilnong.top/blog/sf-a-1020000009355985/### 解答思路 单行文本省略号效果可以用三条 CSS 属性组合实现：隐藏溢出内容、禁止换行、用省略号替代溢出部分。 ### 示例代码 ```css .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ``` ###Tue, 09 May 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000009265090/https://www.lilnong.top/blog/sf-1190000009265090/好久没有写文章，不知道写什么好。突然想到拖动这个API。之前使用 jQuery UI 实例 - 排序（Sortable）去实现了一个拖动排序，也有用jquery.gridly.js实现的一个拖动排序。Mon, 01 May 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000009047107/https://www.lilnong.top/blog/sf-a-1020000009047107/### 解答思路 JavaScript 引擎在代码执行前会先做语法/词法分析，此时会把变量声明和函数声明“提升”到作用域顶部；函数声明（`function fn(){}`）会连同函数体一起提升，而函数表达式（`var fn = function(){}`）只会提升变量名 `fn`，赋值部分不会提升。 ### 示例代码 Wed, 12 Apr 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000008692844/https://www.lilnong.top/blog/sf-a-1020000008692844/### 解答思路 跨域请求默认不会携带 Cookie，需要显式开启凭证（credentials）选项，并配合服务端的 CORS 响应头才能生效。 ### 示例代码 ```js var xhr = new XMLHttpRequest(); xhr.open("POST", "https://target-domain.Mon, 13 Mar 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000008147819/https://www.lilnong.top/blog/sf-a-1020000008147819/### 解答思路 回答从几个子问题展开：如何找到被点中的单词、如何展示翻译结果，以及排版上的取巧办法，核心思路是“预先分词 + 定位 + 覆盖层展示”。 ### 详细说明 1. **定位单词**：可以按空格、标点符号等作为分词边界，将文本切分成一个个单词；结合鼠标点击位置计算出点在哪个单词范围内，取出对应的单词后，用 Mon, 16 Jan 2017 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000007827724/https://www.lilnong.top/blog/sf-a-1020000007827724/### 解答思路 `Array.prototype.push()` 的返回值不是新增的元素，而是执行 `push` 之后数组的最新长度。 ### 示例代码 ```js var nums = [1, 8, 9, 3]; var num = nums.push(6); console.log(num); // 5 consThu, 15 Dec 2016 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000007808518/https://www.lilnong.top/blog/sf-a-1020000007808518/### 解答思路 原始问题描述不够具体，回答者先指出需要明确到底是哪种效果，然后分别给出三种常见方案的核心思路。 ### 详细说明 1. **瀑布流**：一种图片布局方式，一般做法是先计算每张图片的高度，统计出每一列当前的总高度，再用 `position: absolute` 把新图片放到最矮的那一列下面。 2. **Wed, 14 Dec 2016 16:00:00 GMThttps://www.lilnong.top/blog/sf-a-1020000007747428/https://www.lilnong.top/blog/sf-a-1020000007747428/### 解答思路 本质上就是统计“这段构造代码被执行了几次”，最简单可靠的方式是给构造函数增加一个计数器，每次实例化时自增。 ### 示例代码 ```js function Person(name) { Person.count = (Person.count || 0) + 1; this.name = name; Thu, 08 Dec 2016 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000007301762/https://www.lilnong.top/blog/sf-1190000007301762/1.做搜索框的时候你使用什么事件？change?blur?keyup？你想要的效果是什么？ 2.scroll事件怎么就触发？是滚一段距离触发一次？还是滚一圈触发一次？还是滚一次触发一次？你想要那种？ 3.mouseover事件是怎么触发呢？Wed, 26 Oct 2016 16:00:00 GMThttps://www.lilnong.top/blog/sf-1190000007281165/https://www.lilnong.top/blog/sf-1190000007281165/这是我写的第一篇文章，想想还有点小激动呢。本着助人为乐的思想，认识了一些前端的初学者，帮助他们更快的步入到前端这个一个行业。今天呢，我想要说的主题是：工作中的前后端交互。Tue, 25 Oct 2016 16:00:00 GMT