- 博客(23)
- 收藏
- 关注
RSS订阅原创 自动化构建、测试、部署（下）
在规定的条件下对程序进行操作，以发现程序错误，衡量软件质量，并对其是否能满足设计要求进行评估的过程。也可以这样理解：测试的作用是为了提高代码质量和可维护性。
2025-12-07 18:57:19
616
原创 自动化构建、测试、部署（上）
最直接的分析方法就是去阅读 Webpack 输出的代码，但由于 Webpack 输出的代码可读性非常差而且文件非常大，这会让你非常头疼。为了更简单直观的分析输出结果，社区中出现了许多可视化的分析工具。例如，在将 ES6 + 代码转换为 ES5 兼容代码的常见任务中，SWC 通常能够比 Babel 更快地完成转换操作，尤其是在处理大型项目的大量代码时，这种性能差异更加显著。Rollup 更专注于 ES Modules 的打包，利用 ESM 的特性可以构建出结构更扁平、性能更出众的类库。
2025-12-06 17:11:43
750
原创 React状态管理
前面存储变量的对象，我们给他一个确切的定义——状态仓库（store），不同于对象操作的是：任何时候你都不能直接去更改状态仓库（store）中的值，而是需要使用。它的设计灵感来源于 Flux 架构，但摒弃了繁琐的样板代码，结合 React Hooks 的现代开发模式，提供了更自然的开发体验。当我们的状态过多，需要统一组织，我们只需要将状态定义为一个对象，然后在 reducer 中定义变更指定对象属性值的方法（action），即可优雅实现状态的主观意识更新。定义后，所有后代元素都能消费他的数据；
2025-12-01 19:53:14
488
原创 React 高级用法
简单点说，就是组件作为参数，返回值也是组件的函数，它是纯函数，不会修改传入的组件，也不会使用继承来复制其行为。使用一个函数接受一个组件作为参数传入，并返回一个继承了该传入组件的类组件，且在返回组件的 render() 方法中返回 super.render() 方法。反向继承：从“继承”角度出发，从内部操作wrappedComp，可以操作组件内部的state，生命周期和render等，功能能加强大；开发友好，可扩展性强，抽离公共的方法或组件，Hook 使你在无需修改组件结构的情况下复用状态逻辑；
2025-09-14 12:50:42
1031
原创 TS详解
面向项目 TS - 面向解决大型复杂项目的，架构以及代码维护较为复杂;TS 是 JavaScript 的一个超集，在原有的语法基础上，添加了可选静态类型和基于类的面向对象编程;类型检测 TS - 弱类型，支持类型检测，并且可以进行编译时提示；JS - 弱类型，无静态类型选项；运行流程 TS - 依赖编译，依靠编译打包实现浏览器的运行；了解TS的概念，基础类型，以及接口，交叉类型，断言，类型守卫，泛型，装饰器的用法；自主检测 TS - 编译时，主动发现并纠正错误;对行为的抽象，具体的行为由类来实现。
2025-08-10 19:12:11
1371
原创 浏览器内置 JS 对象详解 浏览器事件模型详解
因为在没有满足pool阶段的结束条件前，就无法进入下一次事件循环的timers阶段；length：历史记录的数量，可以用于检测当前页面是否用户历史记录的第一页；assign: 打开新的ULR，并且会在浏览器的历史记录中生成一条新的记录；Dom事件的事件句柄，在js中为dom添加onclick方法(addEventListener);location对象：导航功能，即时window对象属性，也是documetn的对象属性；go()：前进n页，如果n<0，则表示后退；back()：后退一页；
2025-08-05 04:44:29
440
原创 Promise规范及+事件循环
js本身是单线程的，为了处理异步任务，宿主环境（浏览器/v8）会将其交给其他线程处理，执行js的线程则会立即结束当前任务而去执行后续代码；渲染进程启动后，会开启一个渲染主线程，它是浏览器中最繁忙的线程，它需要处理很多任务;处理网站的数据请求和响应，网络进程内部也会开启多个线程，以实现网络请求的异步处理；主要是解析html，css，和js等其他资源，并生成渲染树，执行布局，和绘制；宏队列排队宏任务操作任务（dom操作回调，定时器回调，ui绘制）；除了微队列外，队列的种类和数量均可能不同，这取决于浏览器厂商；
2025-07-30 06:06:49
328
原创 Promise规范及应用
是一个类，当通过new创建Promise实例,需要传入一个回调函数，我们称之为executor，这个回调函数会被立即执行，并传入两个回调函数的参数(resolve, reject)，当调用resolve回调函数时， 会执行Promise对象的then方法传入的回调，当调用reject回调函数时， 会执行Promise对象的catch方法传入的回调；Promise是一个状态机，分为3种状态；pending: 待定状态，执行了executor后，处于该状态；
2025-07-24 19:30:54
973
原创 js基础-作用域/闭包/函数提升
每当一个函数被执行时，都会创建一个新的执行上下文，并形成一条作用域链。这意味着如果在一个函数内部尝试访问某个变量，首先会在自己的作用域中寻找，若找不到，则会沿着作用域链逐级向上搜索直到全局作用域。作用域定义了如何查找变量的位置，即确定当前执行上下文中变量和其他资源的作用范围。JavaScript中的作用域主要分为全局作用域和局部作用域（或称函数作用域）。而局部作用域则仅限于特定函数内部使用，当该函数执行完毕后，其内部声明的变量就会被销毁。闭包是一种特殊的对象，它结合了一个函数以及创建该函数时所在的作用域。
2025-07-22 06:08:57
197
原创 工程化开发小程序
编写设置环境的脚本：通过cross-env设置NODE N EV，并将其写入env.js根据环境动态加载配置：Eindex.js中读取env.js的值，加载对应的环境配置；每个分包都可以拥有自己的package.json，在构建时，他们各自的依赖都不会被打进主包，而是分别打进对应的分包产物中，从而进一步减小主包体积，实现依赖的模块化管理。自动遍历整个项目中的子目录，查找存在的package.json的目录，并在其中执行npm in staI l ,确保每个模块的依赖都被正确安装；
2025-07-19 09:44:16
1102
1
原创 vue3项目实战
定义了 "dev" "vite"、"build" "vite build"、"preview" "vite preview" 等脚本命令。：有 "@faker-js/faker" "^8.4.1"、"@vitejs/plugin-vue" "^5.1.2" 等开发依赖。：包含 "@element-plus/icons-vue" "^2.3.1"、"axios" "^1.7.7" 等多个依赖包。了解Vue3 项目实战的前置准备，包括适用于性能监控 sdk 的前端应用所需的技术栈、环境以及相关配置等内容。
2025-06-09 04:05:07
765
2
原创 vue3源码
Vue3.x可用reactive和ref定义数据。ref创建包含响应式数据的引用对象；reactive定义对象类型的响应式数据，不能代理基本数据类型。我们可以将一些公共逻辑封装成一个 hook, 我们约定这些「自定义 Hook」以 use 作为前缀，和普通的函数加以区分。Teleport和SuspenseTeleport可将组件渲染内容传送到指定位置；Suspense是带插槽组件，有default和fallback两种状态。
2025-06-04 06:25:21
492
1
原创 vue源码（四）
既然是写在模板里面，那么它就会被编译，会被编译成渲染函数字符串，然后在挂载的时候会执行渲染函数，从而就会使过滤器生效。可以看到，无论是使用哪一种方式定义的指令它都是将定义好的指令存放在指定的地方，而并不能让指令生效。就会帮我们把组件保存在内存中，而不是直接的销毁，这样做可以保留组件的状态或避免多次重新渲染，以提高页面性能。了解vue生命周期，实例方法，全局api，过滤器，指令，内置组件；选项中定义专为该组件使用的局部指令，这种方式定义的指令会被存放在。来定义全局指令，这种方式定义的指令会被存放在。
2025-05-19 16:58:52
967
原创 vue源码学习（下）
父组件给子组件的注册事件中，把自定义事件传给子组件，在子组件实例化的时候进行初始 化，而浏览器原生事件是在父组件中处理的。也就是说，实例初始化阶段调用initEvents实际上 初始化的是福组件在模版中使用v-on或@注册的监听子组件内触发的事件。当 HTML 解析器解析到文本内容时会调用4个钩子函数中的 chars 函数来创建文本型的 AST 节点，并且也说了在 chars 函数中会根据文本内容是否包含变量再细分为创建含有变量的 AST 节点和不包含变量的 AST 节点。
2025-05-19 16:27:11
401
原创 vue源码（中）
另外，文本信息和标签属性信息却又是存在于HTML标签之内的，所以在解析整个模板的时候它的流程应该是这样子的：HTML解析器是主线，先用HTML解析器进行解析整个模板，在解析过程中如果碰到文本内容，那就调用文本解析器来解析文本，如果碰到文本中包含过滤器那就调用过滤器解析器来解析。解析器，顾名思义，就是把用户所写的模板根据一定的解析规则解析出有效的信息，最后用这些信息形成。的HTML解析器，还应该有解析文本的文本解析器以及解析文本中如果包含过滤器的过滤器解析器。与生命周期相关的实例方法有4个，分别是。
2025-05-13 06:18:22
331
原创 vue源码
虚拟dom的作用：在视图渲染之前，把写好的template模版先编译成VNode并缓存下来，等到数据发生变化需要重新渲染的时候，我们把数据发生变化后生成的Vnode和缓存的Vnode进行对比，找出差异，然后有差异的Vnode对应的真实Dom节点就是我们需要重新渲染的节点，最后根据有差异的VNode节点创建出真实的DOM节点插入到视图中，完成一次视图更新。以新的VNode为基准，改造旧的oldVNode使之成为和新的VNode一样，这就是patch过程要做的事情，包括创建节点，删除节点，更新节点；
2025-05-07 20:20:15
362
原创 从vue-cli学习从0到1开发前端脚手架
讨论了从vue-cli学习前端脚手架从0到1开发的相关内容，介绍了Vue CLI的作用、CLI服务和插件，阐述开发CLI脚手架的项目搭建要点及优势；
2025-04-29 06:41:42
329
原创 性能优化 & TS详解
了解性能优化和 TypeScript（TS）详解的相关内容，涵盖网页性能衡量、前端性能优化方向、浏览器层面优化、页面性能纬度体系、MVVM 框架性能优化、大厂可视化性能监控方案，以及 TS 的概念理论、编译运行机制等。TS 基础：介绍 TS 概念、基础类型、类型认知、进阶知识如泛型、装饰器等，以及编译运行机制。MVVM 框架性能优化：从基础类、框架设计思路、第三方工具利用及技巧类等方面进行优化。大厂可视化性能监控：通过埋点上报、数据处理、可视化展现、告警处理等流程实现性能监控。
2025-04-14 15:24:32
263
原创 TS进阶课程-元编程与编译原理
课程目标了解TS进阶课程中的元编程与编译原理相关内容，介绍了代理和反射的概念、应用，TS中的元数据与reflect-metadata库的使用，以及TS编译过程。知识要点代理是一个对象，用于自定义基本操作的行为。通过代理，我们可以拦截并定义一些基本操作的自定义行为，如属性的读取、设置、函数的调用等。代理对象通过Proxy构造函数创建。
2025-04-14 15:20:26
194
原创 VUE同构渲染
了解Vue.js的同构渲染相关内容，介绍了客户端渲染（CSR）、服务端渲染（SSR）的流程、优缺点，阐述了同构渲染的流程、案例、要点，还提及创建同构应用的方法及服务器端优化措施。服务器端优化：进行服务器端测试，采用多进程优化、内存溢出处理、未捕获异常处理、心跳包检测、子进程自动重建等措施，可用PM2部署。同构渲染流程：先服务端渲染应用快照并生成初始数据，再客户端激活，建立真实DOM与虚拟DOM联系，添加事件绑定。同构渲染要点：避免状态单例、特定平台API访问，不在服务端生命周期执行全局副作用代码。
2025-04-14 15:09:51
244
1
原创 课程标题 VUE状态管理工具和VUEX
组件触发事件 --> Action (处理异步逻辑) --> Mutation (修改状态) --> State (存储数据) --> View (渲染 UI)掌握Vue.js应用开发的状态管理模式与库Vuex包括状态管理背景，Vuex基本概念，Vuex的使用，当一个组件需要获取多个状态的时候，我们可以使用mapState辅助函数帮我们生成计算属性。Vuex的属性，Vuex相关对比，Vuex的严格模式，以及Vuex在组件中的使用。在 Vuex 中，数据的流动是单向的，遵循。
2025-04-14 15:02:38
238
1
原创 课程标题 面向对象编程-韶音
箭头函数中的this(不会创建新的this上下⽂，⽽是捕获外层作⽤域中的this)class Bank { #balance;将构造函数的作⽤域赋给新对象(this指向新对象)事件处理程序中this,this通常指向触发元素的对象。执⾏构造函数中的代码。基于函数的⾯向对象实现。了解js中的this。
2025-03-12 13:44:04
245
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人