萌新梦-CSDN博客

原创 BOM 操作：浏览器对象模型核心方法

BOM 核心围绕window对象展开，核心操作覆盖窗口控制、地址栏、历史记录、存储、定时器五大场景，是前端操作浏览器的基础；（跳转）、（存储）、（定时）、（前端路由）；实际开发中需注意兼容性和浏览器权限限制，优先使用标准化方法，避免依赖非标准 BOM 属性。掌握这些 BOM 操作方法，就能实现前端对浏览器的核心控制，从页面跳转、数据存储到异步定时，覆盖 90% 以上的前端交互场景。

2026-01-26 08:14:07 831

核心差异<link>是 HTML 标签，同步加载、可动态操作、全兼容；@import是 CSS 语法，异步加载、静态不可改、兼容有限；选型原则：首屏核心样式用<link>，非核心 / 模块化样式可谨慎用@import；性能关键@import易导致样式闪断，生产环境尽量减少使用，优先通过<link>并行加载 CSS。记住这几点，就能根据场景精准选择引入方式，既保证页面渲染体验，又兼顾样式管理的灵活性。

2026-01-26 08:13:53 599

原创解析 Axios 核心特性：为什么它是前端异步请求的首选？

Axios 核心优势集中在易用性、可扩展性、兼容性：极简的 API 降低上手成本，拦截器 / 取消请求 / 并发请求满足复杂业务需求，双环境支持适配全场景；拦截器 > 自动数据转换 > Promise 异步 > 请求取消 > 并发处理，掌握这些就能覆盖 90% 的前端请求场景；相比原生 AJAX，Axios 大幅减少重复代码，提升开发效率，是前端异步请求的首选工具。

2026-01-25 16:26:09 550

原创 jQuery 选择器：9 类核心选择器

基础选择器（ID / 类 / 标签）是首选，性能最高，覆盖 80% 场景；过滤选择器（内容 / 可见性 / 表单）是 jQuery 扩展核心，适合动态交互；性能优化：优先 ID、缓存结果、减少层级，避免全局通配符；语法兼容：jQuery 选择器兼容 CSS 语法，学完可复用 CSS 选择器知识。掌握这 9 类选择器，就能搞定 jQuery 所有元素定位场景 —— 从简单的 “选中按钮” 到复杂的 “筛选表单状态”，一套选择器体系全覆盖。

2026-01-25 16:22:50 549

原创 CSS 元素垂直水平居中的 8 种方法

首选方案：Flex 布局（万能、简洁、兼容现代浏览器），90% 的场景用它足够；老项目兼容：定位 + transform（IE9+）、Table 布局（IE6+）；文本居中：单行用，多行用 Flex 或 Table 布局；现代高级场景：Grid 布局（代码更极简，适合新一代浏览器）。所有方法的核心逻辑都是 “水平 + 垂直” 双方向控制，记住：未知尺寸选 Flex/transform，已知尺寸选 margin:auto，文本选 text-align+line-height，就能搞定所有居中需求。

2026-01-25 16:19:10 786

原创网络传输七层协议

物理介质：网线（双绞线、光纤）、无线射频、串口线等；传输规范：电压高低、信号频率、接口类型（RJ45、RJ11）、传输速率、引脚定义；核心动作：将数字信号转换为电 / 光 / 无线信号（发送端），或将接收到的物理信号还原为数字信号（接收端）。OSI 七层模型从下到上为物理层、数据链路层、网络层、传输层、会话层、表示层、应用层，核心是分层各司其职，层间标准化交互；底层 3 层（物理、数据链路、网络）负责网络硬件的传输和路由，解决 “数据如何在网络中传输”；中间 1 层（传输层）是核心，负责。

2026-01-25 08:16:36 616

原创微信小程序获取手机号

2026 年微信小程序获取手机号的核心是通过code（手机号凭证）替换旧版的加密数据，流程更简洁、安全；小程序端需通过用户主动点击按钮获取code，后端调用微信官方 SDK 换取手机号；开发时需注意隐私授权提示、基础库版本兼容、code 有效期等关键细节，避免审核被拒或接口调用失败。

2026-01-25 08:13:23 1013

原创数组排序方法

需求：按「状态（优先显示已完成）→ 时间（最新在前）」排序：javascript运行// 先按状态排序：done 优先于 pending-1 : 1;// 状态相同，按时间降序（最新在前）});// 结果：id3（done+最新）→ id2（done）→ id1（pending）基础规则sort()默认按字符串 Unicode 排序，数字 / 对象排序必须传比较器；实战优先：对象数组排序是前端核心场景，记住「多条件排序先判断主条件，再判断次条件」；性能优化。

2026-01-23 09:29:23 590

原创前端适配必备：7 种常用长度单位详解

rpx 是 uni-app（及微信小程序）专属的响应式像素单位，以屏幕宽度为 750 等分作为基准（即无论设备屏幕宽度是多少，都被划分为 750 个 rpx 单位）。示例：屏幕宽度 375px（iPhone6/7/8），1rpx = 375/750 = 0.5px；屏幕宽度 750px（安卓大屏），1rpx = 1px。px 是屏幕物理像素的最小单位，属于绝对单位，设置后在不同设备上显示尺寸固定（忽略屏幕像素密度差异时）。示例：设置。

2026-01-23 09:27:29 584

原创 JavaScript 循环

JS 循环分为传统基础循环（for/while/do...while）和现代迭代器循环（for...in/for...of/ 数组方法），核心是根据场景选择合适的类型；遍历数组优先用 for...of（语义化）或普通 for（高性能），遍历对象用 for...in+hasOwnProperty；数组专用方法（map/filter/reduce）适合函数式编程，但无法中断循环；异步循环优先用 for...of+async/await。掌握循环的核心逻辑和选型技巧，能让你的代码既简洁又高效。

2026-01-22 19:28:15 685

原创前端路由守卫：掌控页面跳转的 “守门人”

导航守卫是前端路由系统的核心能力，它让开发者能够精准掌控路由跳转的每一个环节。无论是 Vue Router 还是 React Router（通过等钩子实现类似功能），导航守卫的设计思想都是一致的 ——在生命周期中植入钩子，实现业务逻辑的灵活介入。掌握导航守卫的分类和执行顺序，就能轻松应对权限控制、数据预加载等常见需求，让单页应用的路由跳转更安全、更智能。

2026-01-22 19:24:48 526

原创 Vue 中 v-for 与 v-if 优先级

核心规则v-for优先级高于v-if，同一元素使用会导致先循环后过滤，引发性能 / 逻辑问题（Vue3 会抛出警告）。正确写法过滤列表数据：用计算属性提前过滤，再循环；控制列表显示：在外层（<template>/ 普通元素）加v-if，再循环；单个项局部判断：将v-if写在循环项的子元素上。性能优化：计算属性缓存、唯一 key、大数据用虚拟列表，避免循环中调用方法。

2026-01-21 14:26:25 511

原创 React 类组件与函数式组件

<p>计数：{this.state.count}</p>

2026-01-21 14:23:36 587

原创 React 高阶组件

高阶组件并非 React API 的一部分，而是基于 React组合特性衍生出的设计模式，其官方定义为：高阶组件是参数为组件，返回值为新组件的函数。是函数，不是组件：HOC 的本质是纯函数，没有副作用，输入相同的组件和参数，必然输出相同的新组件。接收一个组件作为参数：这个传入的组件通常被称为 “被包装组件（Wrapped Component）”。返回一个新的组件：新组件会对被包装组件进行增强，比如注入 props、添加生命周期逻辑、修改渲染结果等。

2026-01-21 14:21:06 662

原创微信小程序生命周期

小程序生命周期的核心是“时机把控”——应用生命周期管全局初始化与状态切换，页面生命周期管单个页面的渲染与资源释放。掌握以下核心原则，可大幅提升开发效率：首次初始化逻辑放onLaunch（全局）、onLoad（页面），仅执行1次；状态刷新、定时器启停放onShow/onHide，适配前后台切换；DOM操作、组件初始化放onReady，确保页面渲染完成；资源释放、定时器清除放onUnload，避免内存泄漏。合理运用生命周期钩子，既能保证代码的执行效率，又能提升页面交互体验，是小程序开发的必备基础技能。

2026-01-21 14:16:14 511

原创单点登录（SSO）

同域名多系统 → 选择Cookie+Session 方案；前后端分离、跨域名多系统 → 选择JWT Token 方案；第三方系统集成 → 选择OAuth2.0/OIDC 方案。作为前端开发，掌握单点登录的原理和对接方式，能帮助我们更好地应对复杂的系统集成场景，提升用户体验。

2026-01-21 14:12:01 756

原创 Vue 页面跳转 / 路由跳转

做 Vue 开发，页面跳转是最基础也是最核心的高频需求，不管是后台管理系统还是各类业务项目，路由跳转都是实现页面切换的核心方式。Vue 作为单页面应用（SPA），核心优势就是「无刷新跳转」，页面切换流畅、体验好，这也是和传统多页面开发最大的区别之一。这篇文章会从零到一，把 Vue 路由跳转的所有用法、场景、注意事项讲透，Vue2 完全兼容、Vue3 单独标注，没有冗余内容，全是项目中能直接用到的实战写法，新手能看懂，老手能查漏补缺。

2026-01-19 08:00:00 2719

原创微信小程序页面跳转

小程序跳转核心是页面栈机制，所有 API 都是对页面栈的增删改，栈最多存 10 个页面；声明式跳转：无逻辑静态跳转首选，写法简单，无需写 JS，适配 80% 的场景；编程式跳转 wx.xxx：有逻辑动态跳转首选，支持先执行业务逻辑再跳转，是小程序的核心跳转方式；传参 + 接收是完整闭环：跳转路径拼接参数，目标页接收参数，必写；tab 栏页面必须用switchTab，且不能传参；层级溢出用reLaunch，无需返回用redirectTo；返回上一页刷新数据，用。

2026-01-19 08:00:00 1463

原创 Vue 单页面应用 (SPA) 与多页面应用 (MPA) 对比

在 Vue 开发中，单页面应用（SPA）和多页面应用（MPA）是前端项目的两种核心架构模式，也是前端面试高频考点、项目选型的核心依据。不管是 Vue2 还是 Vue3，都能同时支持这两种架构模式，二者没有绝对的优劣，只有场景适配性的差异。结合你前面问到的 Vue2/Vue3、Vuex/Pinia 知识点，本文会把「SPA/MPA」和 Vue 生态深度结合，从概念、核心差异、优缺点、适用场景、Vue 中实战配置、SEO 解决方案。

2026-01-18 19:04:32 710

原创 Vue2 与 Vue3 对比 + 核心差异

Vue2：必须是函数返回对象的形式（组件复用防止数据污染）。Vue3：Options API 写法和 Vue2 一致；Composition API 用ref()定义基本类型，reactive()定义引用类型。Vue3 是 Vue2 的全面升级版，解决了 Vue2 的所有核心痛点，同时保留了 Vue 的易用性，性能更强、语法更灵活、生态更完善、TS 更友好。

2026-01-18 19:02:14 870

原创 JavaScript 事件（Event）

事件是浏览器或用户在页面上触发的特定交互行为用户行为：点击按钮（click）、输入文本（input）、鼠标移动（mousemove浏览器行为：页面加载完成（load）、资源加载失败（error事件委托利用事件冒泡的特性，将子元素的事件绑定到父元素上—— 通过父元素监听事件，再判断触发事件的子元素，从而实现批量子元素的事件处理。事件绑定优先使用DOM2 级，支持多函数绑定和事件阶段控制；牢记事件模型的3 个阶段：捕获 → 目标 → 冒泡，默认是冒泡阶段触发；Event 对象的 target。

2026-01-16 11:17:26 640

原创 JavaScript 时间 (Date) 对象方法

Date 对象的核心是创建实例 + 获取 / 设置时间方法，牢记「月份从 0 开始」「时间戳是毫秒级」两个关键点；原生 JS 可通过封装函数实现时间格式化和时间差计算，满足日常开发需求；复杂场景（时区、相对时间）优先使用Day.js等第三方库，提升开发效率。掌握这些知识点，前端时间操作就再也不是难点啦！

2026-01-16 11:14:14 532

原创 JavaScript ES5 + ES6+ 字符串 (String) 所有方法大全

字符串是不可变类型，所有方法不修改原字符串，只返回新结果；includes（替代 indexOf）、、模板字符串，极大提升开发效率；截取字符串优先用slice（支持负数索引），切割转数组用split，判断包含用includes。

2026-01-16 11:10:36 744

原创 JavaScript (ES5)+ES6+jQuery 核心对象方法大全

本文整理了前端开发中所有高频核心原生 JS (ES5)：前端根基，所有语法和方法的源头，兼容性最好，是必学的基础；ES6+：原生 JS 的增强版，语法更优雅、代码更简洁、效率更高，现代开发的标配，能极大提升开发体验；jQuery：封装后的工具库，简化原生 JS 的繁琐操作，解决兼容性问题，适合快速开发、后端模板开发，核心是「DOM 操作 + 事件 + Ajax」。三者并非对立关系，而是相辅相成：原生 JS 是基础，ES6 + 优化原生，jQuery 简化原生。

2026-01-16 11:08:04 664

原创 JavaScript 数组 (Array) 常用方法大全 & 详细

是否会修改「原数组」—— 重中之重！开发中最容易踩坑的点，比如误操作修改了接口返回的原始数据，导致后续逻辑出错。是否有「返回值」+ 返回值是什么类型—— 不同方法的返回值不同，这决定了该方法的使用场景（比如是否能链式调用、是否能直接赋值使用）。push()pop()unshift()shift()splice()reverse()sort()fill()JavaScript 数组的原生方法，是前端开发的基本功，也是面试的高频考点。

2026-01-16 11:04:51 682

原创 HTML5 零基础详解

HTML 全称（超文本标记语言），是用来构建网页结构和内容的核心语言，也是前端开发的三大基石（HTML+CSS+JavaScript）之首。✔ HTML 不是编程语言，是标记语言，通过各类标签描述网页的结构（标题、段落、图片、链接、表单等）；✔ 浏览器会解析 HTML 标签，渲染出对应的网页内容，标签不显示在页面中，只负责描述结构；✔ 所有网页的本质，都是以.html.htm为后缀的 HTML 文件。HTML5 是HTML 标准的第五代版本，2014 年由 W3C 正式发布，是目前网页开发的。

2026-01-15 09:40:32 2180

原创 Vue3 响应式原理与响应式属性详解

点我+1

2026-01-15 09:33:04 1031

原创 Vue 状态管理之争：Pinia vs Vuex 详解

在 Vue 项目开发中，我们经常会遇到组件之间共享数据兄弟组件之间传值祖孙组件之间传值跨多级组件共享数据（如用户信息、主题配置）如果用propsemit或者provideinject实现，会导致代码耦合度高、逻辑混乱。此时就需要一个集中式的状态管理工具，把共享数据抽离到全局，统一管理和维护。Vuex：Vue2 时代的官方状态管理库，Vue3 也能使用，但已进入维护模式（不再新增功能，只修复 bug）。Pinia。

2026-01-15 09:29:53 974

原创 Vue3 计算属性 (computed) 与监听属性 (watch)

在 Vue3 中，computed(计算属性) 和watch(监听属性) 是处理响应式数据的两大核心 API，也是 Vue 开发中高频使用的基础知识点。二者都能监听响应式数据的变化，但设计初衷、使用场景、特性完全不同。很多初学者容易混淆它们的用法，比如：什么时候用计算属性？什么时候用监听属性？为什么明明能用 computed 实现的功能，用 watch 会显得臃肿？计算属性衍生新数据，用声明式的方式处理数据，做「数据加工」。监听属性监听数据变化，执行自定义的业务逻辑，做「事件处理」。

2026-01-15 09:26:31 897

原创 VUE3简单实现九宫格点击抽奖

分享一个基于Vue3 + setup 语法糖开发的极简九宫格抽奖组件，无任何第三方依赖，代码简洁易懂、无冗余，修复了抽奖无限转圈的核心 BUG，实现了「点击抽奖→先快后慢减速转动→精准停止→中奖弹窗」的完整业务逻辑，同时做了轻量精致的样式美化，不花哨、颜值在线，可直接 CV 复用在项目中，新手也能轻松看懂和修改。这个九宫格抽奖组件做到了极简、无 BUG、高颜值、易复用，所有核心逻辑都做了优化和修复，代码注释清晰，新手也能轻松理解。

2026-01-15 09:22:30 597

原创 Vuex 与 Redux 深度对比（核心区别 + 选型建议）

在 Vue/React 这类组件化开发框架中，我们会遇到「组件层级嵌套过深」「兄弟组件通信难」「多个组件共享同一套数据」的问题，组件之间的传参（props、emit、事件总线）会变得极度繁琐且难以维护，大型项目中更是会出现「数据流向混乱、bug 定位困难」的致命问题。Vuex和Redux就是为了解决这个痛点而生的集中式状态管理库，核心思想高度一致：✅ 把项目中全局共享的状态（数据）抽离出来，放到一个统一的全局仓库中集中管理；✅ 制定严格的状态修改规则，让数据的「修改 - 更新」流程可追溯、可预测；

2026-01-13 13:37:02 660

空空如也

空空如也