局外人LZ的博客

本文主要讲解react native项目构建，在构建项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、react native、React Native Elements、Emotion、Metro和redux。

CSS函数是预定义的功能模块，通过动态计算属性值（如calc()、rgb()、linear-gradient()、rotate()等）增强样式灵活性，支持颜色处理、布局调整、动画变形和滤镜效果，结合变量（var()）和响应式设计，实现高效、动态的网页样式控制。三、数学函数函数说明示例calc()动态计算值calc(100% - 20px)min()取最小值min(100px, 50vw)max()取最大值max(200px, 30vh)clamp()

CSS选择器是用于精准定位HTML元素并施加样式规则的核心工具，通过多样化的匹配模式实现灵活控制。基础选择器包括元素选择器（如div）、类选择器（.class）、ID选择器（#id）和通用选择器（*），分别按标签名、类名、唯一ID或全局匹配；组合选择器通过层级关系增强精确性，例如后代选择器（nav a）匹配嵌套元素，子选择器（ul > li）限定直接子级，相邻兄弟（h1 + p）和通用兄弟（h2 ~ p）则控制同级元素。属性选择器（如[href^=“https”]）依据属性值匹配，而伪类（:hover、:n

localStorage是浏览器提供的本地存储API，常用于持久化保存客户端数据。然而，其原生的事件监听机制存在一个关键限制：storage事件仅在跨页面（同源的不同标签页或窗口）修改localStorage时触发，而当前页面自身的修改则完全无法被监听到。这种设计缺陷导致开发者无法直接监测同一页面内的存储变更，形成典型的"灯下黑"现象。虽然通过定时轮询可以勉强实现监听，但这种方式会持续消耗系统资源，且存在监听延迟和遗漏风险。为解决这一核心痛点，业界已探索出多种高效解决方案，这些方法都能在页面内实现精准的实时

通过Symbol.iterator，我们可以为任何对象定义自己的迭代逻辑。start: 5,end: 1,return {这使得普通对象也能支持for…of循环，极大增强了JavaScript的迭代能力。

/ 标记为可预期的操作错误// 保留原始调用栈// 使用示例try {throw new AppError('用户未找到', 404, { userId: 123 });${}) {// 标记为可预期的操作错误 // 保留原始调用栈 Error . captureStackTrace(this , this . constructor);} } // 使用示例 try {throw new AppError('用户未找到' , 404 , {

沙箱模式(Sandbox Pattern)是JavaScript中一种设计模式，它通过创建一个封闭的环境来执行代码，从而避免对全局命名空间造成污染。沙箱模式的核心思想是提供一个受控的执行环境，在这个环境中运行的代码只能访问特定的资源，而不会影响外部环境。沙箱模式的特点：1.隔离性：沙箱内部定义的变量和函数不会泄露到全局作用域2.安全性：限制代码访问特定资源，防止恶意操作3.模块化：便于组织和管理代码4.可配置性：可以根据需要定制沙箱环境常见应用场景：1.第三方代码执行：安全地运行不受信任的第三

深拷贝(Deep Copy)是指创建一个新对象，完全复制原对象的所有属性，包括嵌套的对象和数组，使得新对象与原对象完全独立，修改新对象不会影响原对象。浅拷贝(Shallow Copy)是创建一个新对象，只复制原对象的第一层属性，如果属性是基本类型则复制值，如果是引用类型则复制引用地址（即共享同一个内存空间）。

对比维度<img>标签直接加载预加载渲染影响同步加载可能造成布局跳动和页面闪烁异步加载，完全不影响页面渲染流程缓存机制遵循浏览器默认缓存策略主动控制缓存，确保资源预先加载适用场景单图页面/少量必须立即显示的图片多图页面/需要懒加载的图库场景加载时机随DOM渲染同步触发请求开发者自主决定的最佳加载时机性能表现可能阻塞关键渲染路径最大化利用网络空闲带宽实现复杂度简单直接，无需额外代码需要编写预加载逻辑和管理机制。

在 JavaScript 开发中，内存管理是影响应用性能的关键因素之一。由于 JS 的自动垃圾回收机制（GC），许多开发者容易忽视内存泄漏问题，直到应用出现卡顿、崩溃时才后知后觉。实际上，不合理的内存使用会导致应用性能下降，甚至引发严重的稳定性问题。本文将从 JS 内存管理机制 入手，深入解析 垃圾回收（GC）的工作原理，并重点剖析 7 种常见的内存泄漏场景，包括闭包滥用、未清理的定时器、DOM 引用残留等高频问题。

例如，对于字符串“oooo”，“o+”将尽可能多地匹配“o”，得到结果[“oooo”]，而“o+?匹配一个单词的边界，也就是指单词和空格间的位置（即正则表达式的“匹配”有两种概念，一种是匹配字符，一种是匹配位置，这里的\b就是匹配位置的）。例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”；“\b1_”可以匹配“1_23”中的“1_”，但不能匹配“21_3”中的“1_”。例如，“o{2,}”不能匹配“Bob”中的“o”，但能匹配“foooood”中的所有o。

本文介绍了JavaScript中的四个进阶技巧：解构赋值、柯里化、防抖和节流、以及记忆化。解构赋值允许从数组或对象中提取值并赋值给变量，提升代码可读性。柯里化将多参数函数拆解为单参数函数，增强函数的灵活性和复用性。防抖和节流用于优化高频函数调用，防抖在事件停止后执行，节流则按固定间隔执行。记忆化通过缓存函数计算结果，避免重复运算，适用于复杂计算和重复请求的场景。这些技巧有助于提升代码性能和可维护性。

本文介绍了如何从简单的 console.log 转向更专业的调试方法，以提升代码排查效率。首先，过度依赖 console.log 会导致控制台信息混杂、定位困难和维护成本高。

作为一名程序员，在国内访问GitHub官网经常会遇到打开过慢或者访问失败的问题，但通过一些技巧可以改善访问体验。GitHub访问问题的根源在于GitHub官网访问不稳定的主要原因在于DNS解析过程。当我们直接访问github.com时，需要通过DNS服务器将域名转换为对应的IP地址。由于某些原因，这个解析过程在国内可能会变得缓慢或不稳定，导致有时能打开，有时无法访问，或者加载速度极慢。4.验证配置是否生效，命令运行窗口，运行命令：ping github.com，如下图说明配置成功。

WXT的前身是vite-plugin-web-extension，vite-plugin-web-extension目前已经不再开发，只做维护，文章中静态js打包、静态js热更新、静态js混淆只是大概将了以下方法。

之前发布了多个前端项目搭建教程，并提供了项目模板的下载通道。为了方便开发者随时获取和使用，本文将集中提供下载链接和教程链接的入口。需要注意的是，由于依赖包的不断更新，之前上传的项目模板可能会出现一些兼容性问题。建议开发者在使用时注意检查依赖版本，或直接下载最新维护的项目模板，有时可能忘记维护依赖包，下载后如遇到启动报错，可在评论区下方评论，会及时更新，后续还会搭建一些服务端项目。前端项目搭建模板，包含Vue移动端、Vue PC端、React移动端、React PC端以及浏览器扩展开发项目。

Pinia 是一个基于 Vue 3 的状态管理库，旨在简化和优化 Vue 应用程序的状态管理。它提供了一种简单且强大的方式来管理应用程序的状态，并且与 Vue 3 的响应性系统紧密集成。以下是 Pinia 的一些特点和优势：1.基于 Vue 3：Pinia 是专为 Vue 3 设计的状态管理库，充分利用了 Vue 3 的 Composition API 和响应性系统。2.类型安全：Pinia 支持 TypeScript，并且在状态管理过程中提供了类型检查和推断，帮助开发者避免潜在的类型错误。

ESLint 是一个用于识别和报告 JavaScript 代码中潜在问题的静态代码分析工具。它可以帮助开发人员和团队维护一致的代码风格，减少错误，并确保代码质量。以下是 ESLint 的一些关键特点和功能：1.静态代码分析：ESLint 通过扫描 JavaScript 代码并应用一组配置的规则来进行静态代码分析。它可以检测代码中的潜在问题，例如语法错误、不一致的代码风格和常见的错误模式。2.可配置性：ESLint 允许开发人员根据其项目需求和偏好定制规则集。

2.要解决上述办法需要把全局的@import换成@use，局部的换成@forward，可以看到下图中把全局导入的iframe使用@use，iframe.scss文件中的导入使用了@forward，再次运行项目@import报错已经消失。4.重复编译开销：由于 @import 允许嵌套导入，同一文件可能会被多次加载和编译，这不仅增加了编译时间，还导致了不必要的资源浪费，尤其是在大型项目中，这一问题会显著拖慢开发效率。4.@forward导入scss，如果不同文件内存在相同变量，会报错。

【代码】vs code常用配置settings.json。

开发chrome插件总体的项目搭建与前端vue项目搭建差不多，只是把vue单页面应用换成了多页面应用，在开发chrome插件时也可使用pinia功能，也可以使用ts卡法，可以参考之前的vue项目搭建教程按需集成。

它提供了一个简单易用的框架，在个人设备上部署和运行这些模型，而无需依赖云端服务，官网：https://ollama.com/内置多种AI模型，可通过ollama下载模型，也可配置对应的AI的api-key使用AI模型，官网地址：https://www.continue.dev/2.下载deepseek-r1、deepseek-coder模型，分别搜索deepseek-r1、deepseek-coder，点击模型查看模型信息，在模型信息中可选择模型版本，复制命令，打开cmd运行命令即可下载。

10.render()：render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。1.constructor()：React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。4.componentWillUnmount ()：组件的卸载和数据的销毁。

react-i18next 是一个用于在 React 应用中实现国际化（Internationalization，简称 i18n）的库，它是基于 i18next 的 React 封装版本。国际化是指将应用程序设计成能够适应不同语言和文化习惯的过程，使得应用能够在不同地区和语言环境下使用。react-i18next 提供了一种简单且强大的方式来实现 React 应用的国际化，它支持以下主要特性：1.多语言支持： 可以轻松地在应用中集成多种语言的支持，使用户能够切换不同的语言版本。

React 路由缓存是指在使用 React Router 或其他路由管理库时，通过一些技术手段来缓存已经加载的页面组件，以便在用户再次访问这些页面时能够更快地呈现内容，提升用户体验和性能。

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用程序（SPA）。它允许你在 Vue 应用中实现客户端端的路由功能，通过管理应用的不同视图之间的导航和状态。以下是 Vue Router 的一些主要特点和功能：1.声明式路由配置：Vue Router 允许你使用声明式的方式定义应用的路由规则，将路径映射到组件。2.嵌套路由：你可以定义嵌套路由，使得不同级别的路由可以对应不同的组件，从而构建复杂的页面结构。

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页面应用程序（SPA）。Vue.js 的设计目标是通过简单、灵活的 API 提供高效的数据驱动视图层渲染。本文主要针对script setup讲解以下是 Vue.js 的一些特点和优势：1.简洁易用：Vue.js 的 API 简单易懂，容易上手，使开发者能够快速构建交互性强、动态的用户界面。

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页面应用程序（SPA）。Vue.js 的设计目标是通过简单、灵活的 API 提供高效的数据驱动视图层渲染。本文主要针对script setup讲解以下是 Vue.js 的一些特点和优势：1.简洁易用：Vue.js 的 API 简单易懂，容易上手，使开发者能够快速构建交互性强、动态的用户界面。

react-router 是一个用于处理 React 应用程序中路由管理的库，它提供了一种简单而强大的方式来实现单页面应用程序（SPA）中的路由控制。通过 react-router，可以轻松地定义应用程序的不同路由，使用户能够在应用程序中浏览不同的页面或视图。数据路由器比普通的路由器支持加载器、操作、提取器等功能。

react-router 是一个用于处理 React 应用程序中路由管理的库，它提供了一种简单而强大的方式来实现单页面应用程序（SPA）中的路由控制。通过react-router，可以轻松地定义应用程序的不同路由，使用户能够在应用程序中浏览不同的页面或视图。

React Redux 是一个用于 React 应用程序的状态管理库。它帮助您管理应用程序的状态并使状态在应用程序中的组件之间共享和访问变得更容易。以下是 React Redux 的一些主要概念和工作原理：1.状态管理：React 应用程序中的状态通常存储在组件的本地状态中。但是，当应用程序变得复杂时，需要共享状态并使其在多个组件之间保持同步。React Redux 允许您将应用程序的状态存储在一个全局的状态树中，称为 Store。2.Store：Store 是应用程序中存储状态的单一来源。

React 是由 Facebook 开发的一款用于构建用户界面的 JavaScript 库。它主要专注于构建单页面应用程序（SPA）中的用户界面，采用组件化的开发方式，使得开发者能够更轻松地构建交互式、动态的前端界面。本文主要将[email protected]版本，由于React 官方文档通常更倾向于推荐函数组件和 Hooks 的使用，这这里主要介绍函数组件以下是 React 的一些主要特点和优势：1.组件化开发：React 鼓励开发者将界面拆分成独立的组件，每个组件负责管理自己的状态和 UI 显示。

本文只是大致讲了下react移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。

本文只是大致讲了下react移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。

本文只是大致讲了下react移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。

本文只是大致讲了下react移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。

本文只是大致讲了下vue3 pc端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。

本文只是大致讲了下vue3移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。

本文只是大致讲了下vue3 pc端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。

本文只是大致讲了下vue3移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。