zxz86的博客

原创 Js随堂笔记2025-12-13

Js特点: 是解释型编程语言，不需要手动编译，通过解释器(引擎)，边编译边执行，无论是浏览器还是node.js都需要遵循ES标准。单线程、面相对象(将一组功能统一封装到一个对象中，现代编程语言基本都是面相对象得编程语言)扩展ES(ECMAScript只是定义了最基本的语法，比如运算符、流程控制语句，为了使js可以适用于不同场景，在不同的解释器中还给我们提供了不同的扩展增强其功能，比如浏览器的DOM和BOM使得我们可以通过浏览器操作网页和浏览器，node.js的fs模块可以操作计算机系统中的文件)

原创 前端入门：html+css

硬件:cpu中央处理器(运算器 控制器) 存储器 （内存:暂时性存储，读取速度快， 硬盘）输入设备（键盘鼠标） 输出设备（音响 显示器）软件:系统软件（windows linux mac harmony） 应用软件(ao many)1996年IETF不再负责Html,改为W3C制定Html规范。7.html:超文本标记语言(超级文本 内容更丰富，标记:)1993年html1.0（IETF机构）1995年html2.0（IETF机构）1997年1月html3.2(W3C)2000年xhtml1.0(W3C)

原创 常用词汇整理

adj.定期的；有规律的；合格的；整齐的；普通的n.常客；正式队员；中坚分子/ɪkˈspreʃ(ə)n/n.表达，表示；表情，表达式；

原创 常用sdk整理笔记

/ 2025-10-31 // 格式化。Moment.js 是一个功能强大的 JavaScript 日期和时间处理库，广泛用于解析、验证、操作和显示日期和时间。// 输出 Moment 对象,包含各种方法和属性。是一组工具、库、文档和代码示例的集合，旨在帮助开发者更轻松地构建应用程序或集成特定服务。Day.js 是一个轻量级、不可变的 JavaScript 日期和时间处理库,2kB。：包括比较、范围判断等。// 获取格式化时间。

原创 好用工具推荐

mac：fn+f0后截图，截图后选择【贴到屏幕上】悬浮在窗口上，再次双击截图或esc可以去除截图。

原创 大前端学习路线

HTML5：CSS3：JavaScript：渲染机制：事件循环：安全机制：存储方案：HTTP/HTTPS：WebSocket：WebRTC：打包工具：任务管理：代码质量：自动化：部署策略：监控体系：加载优化：运行时优化：渲染优化：React：Vue：Angular：移动端：桌面端：小程序：数据流模式：异步处理：持久化：Node.js基础能力：数据库：API设计：BFF层（Backend For Frontend）聚合层：性能优化：安全控制：函数计算：边缘计算：Web与原生通信：原生功能调用：Hybrid A

原创 前端页面渲染方式梳理

无需SEO，追求极致的交互体验和开发效率。后台管理系统、Dashboard等。内容更新不频繁、对性能要求高。网站，对SEO要求高。

原创 Html相关

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也是如此，类似的将所指向资源嵌入到当前标签内。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前的标签所在位置，在请求src资源时会将其指向资源下载并应用到文档内，例如js脚本、img图片、frame等元素。那么浏览器会识别该文档为css文件，并会并行下载资源并且不会停止对当前文档的处理，这也是为什么建议使用link方式加载css而不是使用import的方式。

原创 heic图片格式转换

HEIC（High Efficiency Image Container）是一种基于HEIF（High Efficiency Image File Format）标准的图像格式，由MPEG（动态图像专家组）开发，苹果公司自iOS 11起将其作为默认照片格式。AVIF（基于AV1编码）因免版税特性更受Web生态青睐（Chrome 85+/Firefox 86+已支持）HEVC编码涉及复杂专利池（如MPEG LA），解码器授权费用高昂，阻碍开源实现。最终采用了heic2any的包解决。

原创 页面跳转和前端路由的区别

跳转到新页面

原创 前端葵花宝典

简单来说就是用JavaScript的===操作符来比较，如果prop的类型是字符串或者数字，只要值相同，那么“浅层比较”也会认为二者相同，但是，如果prop的类型是复杂对象，那么“浅层比较”的方式只看这两个prop是不是同一个对象的引用，如果不是，哪怕这两个对象中的内容完全一样，也会被认为是两个不同的prop。在深层上，模板的原理不同，这才是他们的本质区别：React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。

原创 axios笔记

模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。网络请求库，在服务端它使用原生 node.js。Axios 是一个基于。

原创 服务器配置 + FinalShell + 宝塔

安装完成后会自动弹出登录网址、登陆账号和登录密码，登陆后可以根据提示选择安装模板。1.服务器购买登录选择系统时，可以选带宝塔功能的。

原创 域名相关笔记

域名（Domain Name）是用于在互联网上标识和定位网站、服务器或其他网络服务的字符串（如。），它通过 DNS（域名系统） 将人类可读的名称转换为机器可读的 IP 地址（如。CNAME：指向另一个域名（常用于CDN或子域名）。服务器标识：代替IP地址访问云服务器、API等。A记录：将域名指向IPv4地址（如服务器IP）。二级域（SLD）：用户自定义部分，如。子域名（Subdomain）：例如。访问网站：用户通过域名访问网站（如。电子邮件服务：绑定企业邮箱（如。MX记录：配置邮件服务器。

原创 CI/CD GitHub Actions配置流程

4.在code中新增.githup\workflows文件夹(固定名)，文件夹内新建一个文件，名字随意比如push.yml。（1）Name: REMOTE_HOST, Value: 服务器的ip地址，比如43.155.73.222。2.在服务器中绑定秘钥对（绑定后，服务器不能将不允许密码登录）绑定前先关机服务器，绑定后再开启服务器。（2）Name：PRIVATE_KEY， Value:秘钥内容就是下载到本地的秘钥内容。1.在云服务器上创建SSH秘钥对，下载秘钥到本地。

原创 运维（IT Operations）

Linux（CentOS/Ubuntu/Debian）：用户权限、进程管理、日志分析（journalctl）、文件系统（ext4/XFS）。硬件运维：服务器（Dell/HP/Huawei）、存储设备（NAS/SAN）、网络设备（Cisco/Huawei）的安装、配置与故障排查。网络基础：TCP/IP协议栈、路由交换（OSPF/BGP）、VLAN划分、防火墙规则（iptables/ASA）。公有云：AWS（EC2/S3）、Azure（VM/Storage）、阿里云（ECS/OSS）。

原创 Mobx 和 Redux

Mobx 和 Redux 都是 React 生态中流行的状态管理库，但它们采用了不同的设计理念和实现方式。状态是只读的：只能通过 dispatch action 来修改状态。自动更新：当状态变化时，依赖该状态的组件会自动重新渲染。单一数据源：整个应用的状态存储在一个 store 中。使用纯函数修改状态：reducer 必须是纯函数。自动追踪依赖：自动确定哪些组件依赖于哪些状态。需要良好的可预测性和调试能力。你需要严格的状态管理流程。不想要处理大量样板代码。

原创 React Native学习笔记

安装 Android SDK(针对安卓开发的套件，虽然Android Studio会默认安装最新版本的Android SDK,但是目前编译React Native需要Android10版本的SDK)React Native 是由 Facebook（现 Meta）开发的开源移动应用框架，用于使用 JavaScript 和 React 构建真正的原生移动应用（iOS 和 Android）安装Android Studio（需要翻墙），启动需要安装组件，大概2G,比较慢。配置环境变量：ANDROID_HOME。

原创 ESLint笔记

代码风格强制，统一缩进、引号、分号等（可配置 Airbnb、Google 等流行规范），强制使用单引号、箭头函数替代。"*.{js,ts}": ["eslint --fix"] // 仅检查暂存区文件。"quotes": ["error", "single"], // 强制单引号。"pre-commit": "lint-staged" // 提交前触发。"semi": ["error", "always"] // 强制分号。错误检查，识别语法错误、未定义变量、无效引用等。实时纠错，提升编码效率。

原创 ES6+核心特性

ES6（ECMAScript 2015）是 JavaScript 的革命性更新，引入了等现代编程范式。// 数组解构。

原创 Promise(async、await)

由于 JavaScript 是单线程语言，当阻塞操作执行时，整个程序会"冻结"，无法响应其他事件或执行其他任务。.finally(() => console.log("清理资源"));.catch(err => console.error(err)) // 错误捕获。.then(data => console.log(data)) // 成功处理。同步 I/O 操作：指 js执行线程必须等待操作完成才能继续执行的输入/输出任务。：操作成功完成（履行）/fʊlˈfɪld/// 异步操作（如 API 请求）

原创 什么是PostCSS

PostCSS是基于 JavaScript 的 CSS 转换引擎，通过插件系统对 CSS 进行现代化处理，如同 Babel 之于 JavaScript，输入 CSS → 插件处理 → 输出优化后的 CSSPostCSS 本身，所有功能由插件实现（插件化架构是其灵魂）cssnano发展进程：2015：Less/Sass 主导2019: PostCSS 插件实现预处理器功能2023: Vite 默认集成 PostCSS2025: 78%新项目弃用 Less/Sass。

原创 CI/CD简介(持续集成和持续部署)

代码提交后自动触发构建、静态检查、单元测试，确保代码质量。：通过流水线将测试通过的代码自动发布到测试/生产环境，减少人工操作失误。

原创 开发相关术语

原创 移动端开发知识点整理

手机页面响应click比较慢，因为点击事件click触发后，手机会等待300毫秒，检测是否有第二次点击，如果有属于双击，没有则为单击，但是大部分的浏览器的双击是放大视口，弹出辅助框等功能，所以手机页面展示一般不用click,而是使用touch touch分为三个事件： touchstart:触摸开始，这个事件在每次触摸都只会触发一次。touchend:触摸结束，手指抬起 touch事件不需要等待300毫秒，只要触发立即执行。touchmove:触摸移动，手指在手机屏幕上移动。

原创 前端面试热门知识点总结

浏览器先查找本地DNS缓存列表，看缓存里面是否存在这个ip,如果有则进入第4步，如果缓存中不存在这个ip地址，就再向浏览器默认的DNS服务器发送查询请求，同时缓存当前这个ip到DNS缓存列表中。在事件触发时，开始计时，在规定的时间（delay）内，若再次触发事件，将上一次计时（timer）清空，然后重新开始计时。保证只有在规定时间内没有再次触发事件之后，再去执行这个事件。浏览器会先根据这个URL查看浏览器缓存-系统缓存-路由器缓存，若缓存中有，直接跳到第6步操作，若没有，则按照下面的步骤进行操作。

原创 Linux常见命令

rm-r 删除一个文件夹爱 rm-r src 删除目录。rm - rf / 删除电脑中全部文件!touch 新建一个文件 后边直接跟文件名字。ls() 列出当前目录中的所有文件。rm 删除一个文件 后边直接跟名字。mkdir 新建一个目录(文件夹)pwd 显示当前所在目录路径。reset 清屏 初始化终端。history 查看命令历史。cd.. 回退上一个目录。

原创 Express笔记

所以express为了路由的模块化管理功能，通过express.Router()方法创建路由模块化处理程序，可以将不同业务需求分开到不同的模块中，从而便于代码的维护和项目扩展。中间件（middleware）可以理解为业务流程的中间处理环节，请求之后，响应之前，由于其在两者之间，所以被称之为中间件，中间件可以有多个，也可以有一个，也可以没有，中间件的作用是处理数据。app.use('/static', express.static('public')) //前缀前面的“/”必须要加，否则就错。

原创 Jest入门

1.下载：npm install --save-dev jest。来检测两个值是否完全相同。

原创 前端工程化

前端工程化是指通过系统化的方法、工具和流程，将前端开发升级为可维护、高效、协作的工业化生产过程。代码规范：ESLint + Prettier统一代码风格，Husky拦截不规范的git提交，统一的分支管理，必要的Code Review管理。组件化：基于React或Vue框架，将UI和逻辑封装为可复用组件，通过webpack或vite来实现代码分割和按需加载组件。自动化：构建工具Webpack、Vite、Rollup实现代码编译、打包和优化。前端应用复杂度高，比如框架、状态管理、构建工具、多环境配置；

原创 什么是HTTP

（HyperText Transfer Protocol）是：基于请求/响应模式：默认不保留通信状态：通过首部字段扩展功能（HTTPS 实现加密）

原创 什么是Express

Express 是基于 Node.js 平台的极简 Web 应用框架，最小化封装，核心代码仅约 1800 行。与传统HTTP模块对比。使用cluster模块。HTTP请求日志记录。

原创 vite学习笔记

现代浏览器项目（Chrome >=61, Firefox >=60, Safari >=11）assetsInlineLimit: 4096, // 4KB以下资源内联。框架新项目（Vue3/React18/Svelte）极速启动：冷启动时间比传统工具快 10-100 倍。闪电热更新：HMR 更新速度不受项目规模影响。智能构建：生产环境使用 Rollup 打包。库开发（利用 Rollup 的纯净打包）.scss/.less 直接导入。微前端子应用（快速加载需求）模拟 CommonJS。

原创 webpack学习笔记

Webpack 是一款现代前端工程化核心工具模块打包器：原生支持ES Modules/CommonJS等模块规范，构建依赖图谱(dependency graph)实现智能打包资源处理器：通过Loader系统处理： JavaScript（Babel转译） 、CSS（Sass/Less编译） 图片/字体（优化/Base64转换） 、 现代框架（Vue/React单文件组件）

原创 vue开发中常用方法笔记

实现响应式，初始化时对已有属性创建 getter/setter，新增属性无法自动获得响应性，直接通过索引修改数组元素无法被检测。this.$set(this.userProfile, 'age', 27) // 正确方式。this.$set(this.items, index, newValue) // 正确方式。this.userProfile.age = 27 // 错误方式（不会触发更新）内部会：检测目标类型（对象/数组），对对象使用。在 Vue.js 2.x 中，1.对象属性动态添加。

原创 单元测试学习笔记

单元测试是软件测试的基础层级，主要针对代码的最小可测试单元进行验证。expect(formatPrice('invalid')).toBe('0.00') // 异常输入处理。expect(formatPrice(null)).toBe('0.00') // 边界值测试。test('格式化金额显示', () => {test('显示加载状态', () => {test('隐藏加载状态', () => {test('计数器功能', () => {// React组件测试。

原创 前端测试简介

进阶提升：Playwright跨浏览器测试 → Puppeteer深度应用 → 微前端测试策略。工具链：Jest（覆盖率统计）+ Testing Library（组件测试）2.集成测试（Integration Testing）组件渲染快照测试（Snapshot Testing）用户行为录制与回放（Cypress Studio）1.单元测试（Unit Testing）3.端到端测试（E2E Testing）Playwright（跨浏览器支持）纯函数逻辑验证（如数据处理函数）Cypress（可视化调试）

原创 React Native简介

React Native 是由 Meta（原 Facebook）开源的跨平台移动应用开发框架，基于 React 和 JavaScript，允许开发者使用同一套代码库构建 iOS 和 Android 原生应用。对于追求 开发效率、代码复用 和 接近原生体验 的团队，它是理想选择。支持 iOS、Android、Web（通过 React Native for Web）甚至桌面端（如 Windows/macOS）。性能提升：启动时间减少 40%，内存占用降低 25%，支持同步原生操作（如文件读写）。

原创 Vue简介

vue2、vue3简介

原创 什么是快应用

快应用是由主流手机厂商（如华为、小米、OPPO、vivo等）组成的快应用联盟共同制定的免安装应用标准。它基于前端技术栈开发，具备原生应用的性能和H5网页的便捷性，用户无需下载安装即可“即点即用”。优势：手机厂商原生支持，系统级流量入口（如全局搜索、语音助手），性能优于传统H5，生态增速显著（2024年开发者大会宣布AI融合战略）。构建手机厂商主导的轻量化应用生态，与小程序形成竞争，使用HTML5、CSS3、JavaScript等前端技术，通过原生渲染提升性能。渲染引擎：各厂商优化底层引擎，确保性能一致性。