- 博客(158)
- 收藏
- 关注
RSS订阅原创 前端工程化之模块化开发 & webpack
常用的构建工具：webpack，vite，rollup，esbuild，rspack初始化参数运行一个脚本传入相关参数，给到 webpack.config.js 文件当中，最终创建 webpack 实例化，会初始化参数，初始化参数后，会进行，将当前脚本的参数和webpack参数进行合并，得出开始编译通过上一步得到的 options，触发 Compiler 实例，new Compiler(options)，进行，相当于调用插件的 apply 方法，添加对某些事件的监听执行Compiler的 run 方
2025-04-05 01:21:10
686
原创 前端工程化之前端工程化详解 & 包管理工具
前端工程化 = 前端 + 软件工程软件工程：系统和软件工程层面上的方法、规范，技术手段提升开发的效率，软件工程来自于实体行业类似建筑行业的方法论，将建筑行业的方法论运用到软件领域上，软件领域的相关方法论又延伸到前端上前端工程化 = 将工程化的方法系统化应用到前端开发中Clean Code 代码整洁指导基于业务诉求 => 产出架构设计 又快又好又稳 <= 系统 演进 可量化的方法。
2025-03-15 18:15:51
1000
原创 Vue进阶之Vue3源码解析（三）
从if (isDef(data) && isPatchable(vnode)) 这句开始就比较重要了。第二，不需要那么多的属性attribute，只针对当前所希望获取到的那部分属性去消费就好了。因此这里通过 虚拟对象(虚拟VDOM) 来进行判断，判断到底该用什么，怎么用它。前面所作的事情：将oldNode节点上的事件全都挂载到新的上处理。这个过程才是真正的双端比较，双端比较的过程就是所谓的。第三步，如果以上情况都没匹配到，就只能是纯找了。老新：头头，尾尾，头尾，尾头的情况。也是当前的子节点进行双端比较。
2025-03-06 17:35:38
1101
原创 Vue进阶之Vue3源码解析（二）
vue的创建入口src/vnode.ts.tsvnode处理src/renderer.ts进行一系列 ast 的动作，然后交由给patch，进行diff比较，针对diff处理完成后，最后将其转化为dom，dom是交由runtime-dom去做的runtime-dom根据vnode节点，其实是要转换成dom结构的，根据 ast 和 vnode节点 来区分 web 和 weex的节点，创建好vnode后，拿着这个节点把他转换成真实能够消费的属性调用到原生的API去进行dom维度的操作
2025-03-06 17:33:48
501
原创 Vue进阶之Vue3源码解析（一）
所有的点文件夹都是或中的内容完整的编译的核心，packages/compiler-core这三点是现在作为主流开发方式都是基于ts去做的types是作为ts的入口module是作为ECMAScript module(esModule)，正常通过 import xxx from xxx，引用的就是这个路径main 默认引用这个包的时候，作为UMD的方式去引用最后引用的路径npm上@vue/compiler-core包这个就是在 package.json 中就算是，怎样去具体约束 exports导出
2025-03-06 11:26:31
1047
原创 前端工程化之前端进阶之AST
compiler - 编译器将一种代码，转换为另外一种代码输入代码，也可以叫 源代码目标代码(浏览器识别代码)：js / cssts / vue / jsx / tsx / coffeescript(JS基础上，JS超集) -> jseslint / tslint 语法检查首先要先将源代码变成可识别的代码对浏览器无法识别的代码，进行转换 -> es5很多支持 es6，但是不会转 es6，因为es5更安全，具备更大的兼容性。
2025-03-06 08:45:18
988
原创 React进阶之前端业务Hooks库（六）
有了AI后，做一个产品出来是非常简单的，横向要做的是，针对不同领域，不同方向，有一套统一的代码产出标准，或者作为前端，用AI能力生成一些后端的功能，表，库，高并发的设计。开发中想进行一些定制，通过插件化的思路去设计了一套请求中插件化的系统，与axios的区别在于：支持更多插件化的拓展，像日志请求异常上报，当前请求处理，通过插件化的方式去集成，也能在业务开发使用中做更多的定制。对于异常处理，会封装一个onError的方法，axios的来说，会使用catch方式进行拦截，重点是怎么将这种异常进行一个返回。
2025-03-04 10:14:18
207
原创 Vue进阶之Vue2源码解析
runtime和compiler区分：runtime，vue本身真正能够运行的部分，compiler，将vue2的模板语言写法，转化成vue能够直接识别的语法。vue-cli 引用的项目中，在 webpack配置里，引入了 vue-loader，就会把vue模板给做这件事，vue本身是不会做这件事的。vue2.6之后的版本都做的是兼容Vue3的内容，2.6版本前的内容才是纯vue2的内容，这里看的V2.6.14版本代码。使用函数去做的话，就可以通过 Vue的原型Vue.prototype给他去注入，
2025-02-28 15:13:26
1076
原创 React进阶之前端业务Hooks库（五）
class组件过程中，能很好的表达出属性，但是状态之间的逻辑是很复杂的，为了解决这个问题才使用了hook，hook能针对整个react函数的场景中，添加了一些动作，state，触发，保证代码执行的时候，去进行添加一些指定的副作用。首先 ，在workInProgress fiber上，创建fiber，fiber上的默认值，取的是memoziedState，并且还要创建对应的hook。涉及到if，涉及到else，涉及到条件判断，就不执行，那么对于下一个的状态的下标不确定了，通过链表的方式去累加的。
2025-02-27 22:58:44
308
原创 React进阶之前端业务Hooks库（四）
一般是在当前的页面后的时候，一直请求最新的数据，但是在页面前的时候，也可以获取实时的数据，只不过在页面后的时候，没有必要进行这么复杂的执行，可以在页面前的时候，visible的时候，再动态的去获取。像懒加载，当对应的dom内容，当快滑动到页面底部时候，无限滚动，接触到下一屏的元素了，再去进行加载，一般是适用于性能优化的方式。监听当前dom是否发生变化的，当dom树发生变化(当前的宽度，当前的元素发生变化)自定义业务功能，自定义请求封装，业务属性加载，业务上webSocket能力的使用。
2025-02-27 22:58:24
209
原创 Vue进阶之AI智能助手项目（五）——ChatGPT的调用和开发
permission中和上面类似src/views/chat/layout/sider/index.vuesrc/views/chat/layout/sider/List.vue这里也是触发它对应的方法，触发它对应的动作src/views/chat/layout/sider/Footer.vue这里做的都是加载的，都是符合上述所说的规范的setting组件也就是这个页面：Message/index.vue这里页面上显示的是这块内容：相当于这里也是基于会话的维度做了一层封装
2025-02-25 22:55:54
210
原创 Vue进阶之AI智能助手项目（四）——ChatGPT的调用和开发
这里的接口和上述service服务端的接口是映射起来的src/utils/request/index.tspost方法这里做的就是调用httphttphttp也就是这里的axiossrc/utils/request/axios.ts这里的service就是axiosLayout布局页面-viewsviews/pages 模板home 首页user 用户页list 列表页detail 详情页exception 异常页目录结构：使用的是 tailwind css
2025-02-25 22:55:26
264
原创 Vue进阶之AI智能助手项目（二）——项目评审与架构设计
针对所有的路由进入之前，通过自定义的接口，进行用户身份session的有效期的校验，当用户session无效的时候，都会清除掉用户的有效token，并且通过路由守卫在beforeEach的阶段进入到我们的无效页面。如果要做骨架屏，需要做接口渲染之前，页面骨架屏的渲染的话，就可以像这样把 layout 基本层级创建出来，这样，在数据渲染之前，会展示一个兜底的加载态。这种方式，是主应用给子应用去下发功能，主应用作为我们的基座，它能够对外暴露的场景。一些初始的设置，中文，英文，暗色，亮色等都在这里创建好。
2025-02-25 22:50:34
347
原创 React进阶之React核心源码解析（三）
newChildren和oldFiber都遍历完了，针对单一节点标记mutation，需要发生变化的元素记录在render阶段中，加update更新。也就意味着，由于优先级，先执行的是u2，然后再执行一次 u1 和 u2。这都是在render中做的，进入到commit阶段后，不管是谁，都不能被中断了，因为都已经在视图中了。newChildren剩下了，oldFiber没剩下，意味着新增了。因此，说的 异步可中断，说的都是在内存中能够做到的事情。要更新的节点中，去触发它的state。
2025-02-25 22:24:08
317
原创 React进阶之前端业务Hooks库（三）
所以说，对于外面count的变化，这里useEffect定义的hook，当前存储的hook的memoizedState，没有任何东西导致它的变化，所以这里存储的state一直为0，从而浏览器中看到的也一直是0。当没有依赖更新的前提下，setInterval是不受到影响的，只是在初始化的时候去执行，那么组件的更新，count+1时候，是不会触useEffect hook执行的。setState会导致组件的re-render，组件的re-render后会更新hook，通过合适的方式创建合适的hooks。
2025-02-25 22:07:51
175
原创 React进阶之前端业务Hooks库（二）
pnpm run test 执行成功后，会有一个对应的回调，如果失败的话，意味着单测失败，一般会发布到线上的环境。针对git的workflow，git的阶段，commit,push,pull,PR,不同的阶段要触发不同的节点，这个节点就是我们对应的钩子。-> react19里提供的，哪些东西该通过useMemo，useCallback，memo等包裹住的，没有包裹住的，就要通过它进行优化。xx.yml -> 命令行的缩进表达序列化的展示，类似json，只是一种文档后缀的格式，可视化表达的功能。
2025-02-21 15:37:02
694
原创 React进阶之React核心源码解析（二）
newChildren和oldFiber都遍历完了，针对单一节点标记mutation，需要发生变化的元素记录在render阶段中，加update更新。但是 上述例子中，如果是针对第一个元素<li>之前进行添加的话，会将所有的子列表全部销毁掉，重新创建，这都是在render中做的，进入到commit阶段后，不管是谁，都不能被中断了，因为都已经在视图中了。这是不同类型元素的展示，在Fiber中，定义当前组件类型不一致的时候，是需要将当前树全部销毁重建的。因此，说的 异步可中断，说的都是在内存中能够做到的事情。
2025-02-13 23:26:42
1185
原创 React进阶之React核心源码解析（一）
cline + deeseek => AI工具，上手成本非常低，非常便宜cursor 编辑器带着问题学源码学习方法论：由大到小 对比回答问题。
2025-02-13 14:32:37
979
原创 React进阶之React Router&SSR
APP 渲染页面的结构，form表单Layout 布局，整体页面，html是在这里绘制的ErrorBoundary 目前还没用上这里 Route的根路径，算是最新版本的特性，指代当前 router的类型，这里的 ./+types/root 使用的是 tsconfig.json中的 rootDirs[1]的值，完整是 .react-router/types/app/+types 这个路径用的就是这个文件......是前端应用中常见的绘制的部分url";
2025-02-12 10:16:07
1253
原创 React进阶之React状态管理&CRA
通过一个参数，parentId 传递给下面的child，他们之间有一个关联的脐带：contextId，找到roots之间的关联方式。scrollIntoView，打开某个页面后，翻到某个位置，重新刷新后，还能够定位到上次翻到的那个位置上，实现锚点效果。有限状态自动机：各种各样的状态管理，通过事件触发一个行为，行为是固定的，相同的输入指向相同的输出，类似于纯函数。ref 不会重新渲染，与视图无关的时候使用，如果与视图相关的使用ref，则不会达到想要的效果。不会更新重新渲染，一般是在与视图更新无关的时候使用。
2025-02-10 17:20:21
1046
原创 React进阶之高阶组件HOC、react hooks、自定义hooks
类似：这种形式的就叫做自定义hook自定义hook中使用reactive中已有的hook本质上是：用已有的hooks做相同某种功能的聚合，聚合后能够在其他某个地方取消费}, []);保证代码是相对独立的}, [])return pos// 用法</div></div>
2025-01-22 16:22:38
1175
原创 React进阶之react.js、jsx模板语法及babel编译
react官网团队中选型时候，如果没有历史包的话，就选择最新的react，如果有历史包的话，选择不影响历史包升级的版本但是最新的也容易踩到坑在React19中，主要看新特性和带来的提升即可新特性：form类似于这里的use可以理解为，添加响应式的逻辑性能上的提升：ref可以作为props，平常项目中使用的是improveAPI去关联，而无法用props来关联。
2025-01-17 11:14:19
1311
原创 Vue进阶之Vue3后台系统
在pages下 —> Build and deployment =>这里就是部署我们的 github pages的，比如说，在github下注册了“xxx”仓库，针对于这个仓库，能够在站点的网址上有“xxx.github.io”这样的内容，就是通过这里Build and deployment，部署的话，就可以选择刚刚代码中部署的分支，然后选择根目录，把我们这样的静态资源（gh-pages分支上打包的产物）部署到 xxx.github.io上。因此，一般要么是放在同一的目录下，要么是在hooks下创建。
2025-01-15 17:12:51
1027
原创 Vue进阶之AI智能助手项目（三）——ChatGPT的调用和开发
先进行clean清空，清空完成后会重新打包找到入口 src/index.ts，然后找到tsconfig.json文件，通过下面的代码，就能找到配置的文件encode-bundle.config.ts:根据这些配置的文件，通过src/index.ts作为入口，我们就能打包，打包之后的产物之后就会放到build下express cors类似的抽离的config文件的目录：上述内容中所涉及的方法：=> fetchUsage():上述的第三方的请求也就是Open-ai的这个请求：上述这个请求也就
2025-01-13 10:26:03
892
2
原创 Vue进阶之AI智能助手项目（一）——项目评审与架构设计
从vue的角度出发，怎么借助ai的场景去体现vue的专精度从前端的视角分析，当面对中大型场景下，怎么搭建一个项目AI+前端。
2025-01-08 16:11:17
1449
原创 Vue进阶之Vue Router&SSR
hash和history的区别点并不多，开始是对base进行处理，后面都直接调用用webhistory，对事件的监听，事件方法的处理进行了统一，只是对路径做了区别。现在：访问一个url，也都会向服务器拉一个页面回来，但是由于spa工程，服务器返回的都会在nginx层进行一个转发，都转发到根目录了。有这么一种情况，针对不同id的用户，路由的前面路径是同样的，但是后面会针对不同人的id从而路径是不同的，这里会有一个问题，让首屏加载的资源越少，节点更少，组件异步，则首屏渲染的更快，加载的更快。
2024-12-23 15:43:12
739
原创 Vue进阶之Vue CLI服务—@vue/cli-service & Vuex
平常npm run serve，npm run dev就是执行的是 vue-cli-service serve 和 vue-cli-service dev，最终真正执行的是 node bin/vue-cli-service.js run serve，本质上也就是Commander。下面的这个就是通过vue-cli创建的默认的模板，里面有标识符，就是ejs模板化语言，在开发中称之为生成模板的过程，使用的就是ejs(嵌入式的js)还是先看cli-service的package.json找到bin的入口文件。
2024-11-27 09:51:17
2010
1
原创 Vue进阶之Vue CLI
cli：commander+inquirer commander：cmd输入命令，inquirer：交互式选择器 通过问答的方式获取的是 options 然后去消费options，添加代码模板。上述的vue --version输出的是vue-cli版本而不是vue的版本的原因是什么呢？这里的pkg和刚刚创建的test的项目中的package.json的内容是对应着的。看一个脚手架，先看脚手架的入口文件(bin的vue)这段代码使用的是lib下的create的指令。
2024-11-27 00:27:09
1124
原创 Vue2进阶之Vue3高级用法
hooks最重要的特点：对于我们来说，不需要关心内部的逻辑，而且与Vue2相比，提供了一个非常合理的方式，使用Vue2的option API很容易写出三五千行的代码，但是对于函数式编程来说，按照逻辑功能拆分下来，一个文件至少包含一个功能，其他功能引用即可。
2024-11-05 09:12:16
812
原创 Vue进阶之Vue无代码可视化项目（九）
登录注册真这么简单吗？针对普通的table，数据量特别大的时候，要怎么做呢？Canvas是没有事件机制的，因此这个事件(鼠标点击事件等)需要我们自己代理去做，把这个事件计算，拿到位置等后处理选中单元格现在smooth-dnd属于是年久失修的一个状态了，因为目前已经不支持vue3的这部分内容了，所以我们使用的时候，需要先在他基础上拓展一下将拖拽的逻辑提取出来DndContainer.js文件，做封装DndContainer.js
2024-08-02 00:51:26
1188
原创 Vue进阶之Vue无代码可视化项目（八）
将components/RightPanel.vue 移到components/RightPanel目录下去这里，只有通过computed、watch、将他的api这些语法全部连接起来，它才会有一个响应式的表现，如果不这样做，只会在初始化进来的时候操作一次，后续的话，是不会再走的，这也是跟React很大的一个区别。之前探讨过更细颗粒度的更新，更细粒度的管理，在React中是通过信号的方式来进行状态的维护的。TextSetting.vueImageSetting.vueChartSetting.v
2024-07-29 17:28:39
578
原创 Vue进阶之Vue无代码可视化项目（七）
右侧栏配置主要是表单相关的内容，表单处理是开发中用的特别多的场景；今天从架构师的视角来看下这个表单怎么设计，动态表单、复杂表单、表单联动。先将左侧栏复制一份粘到右侧栏上views/LayoutView.vue全部代码：现在的import包是没有按照顺序去排列的，应该有一个排列顺序才对，这里应该安装一个eslint插件来去自动修复的，全部代码：.eslintrc.cjs全部代码：pnpm i安装LeftPanel.vueLayoutView.vueBlockRenderer.
2024-07-18 15:44:31
1047
原创 Vue进阶之Vue无代码可视化项目（六）
接下来要做的是，中间区域Block相关的内容，block相关的内容最重要的就是，数据协议设计和整体渲染器的逻辑渲染器概念：简单点说就是，封装他的组件。比如做了一个图表，可以说封装了一个图表组件，如果做了一个表单校验，可以说做了一个表单校验组件，或者写了一些业务组件，但是这些点要是上升一点，就是，表单渲染 – 表单渲染器，表单渲染组件，表单规则约定 – 表单规则校验器；可以美化这些词语，提高简历数据协议：左边物料区有很多的物料列表，将左边的物料拖到中间编排区进行编排，拖拽之后，这些内容区域就能组装成一个页面，
2024-07-17 18:12:44
1002
1
原创 Vue进阶之Vue无代码可视化项目（五）
全部代码：LayoutView.vue全部代码：stores/debug.ts全部代码：stores/editor.ts跨模块的数据需要存在store中AppNavigator.vue全部代码：全部代码：store/editor.ts全部代码：LeftPanel.vue全部代码：LayoutView.vue全部代码：
2024-06-24 16:42:17
1045
原创 Vue进阶之Vue无代码可视化项目（四）
创建LeftPanelLayoutView.vuebase.css全部代码：LeftPanel.vue分类：流式、自由、grid、retoolpackage.json:创建文件componentsSmoothDndSmoothDndContainer.ts - 容器SmoothDndDraggable.ts - 拖拽对象utils.tsSmoothDndContainer.tsutils.tsSmoothDndDraggable.tsLe
2024-06-05 00:20:12
872
原创 Vue进阶之Vue无代码可视化项目（三）
stores/counter.ts创建editor.ts文件LayoutView.vueicon-park githubicon-park官网store/debug.ts创建debug.ts文件src/components/AppNavigator.vuesrccomponents_test_AppNavigator.tsAppNavigator.vueAppNavigator.ts:AppNavigator.vue:theme样式创建rese
2024-06-02 16:41:04
1201
1
原创 Vue进阶之Vue无代码可视化项目（二）
创建ActionsView、DataSourceView、LayoutView三个文件。删除示例文件AboutView、AboutAboutView、HomeView三个文件。
2024-06-01 22:04:29
955
原创 Vue进阶之Vue无代码可视化项目（一）
eslint跑起来的过程中需要指定一个env环境，这个千万不要忘记了。除了已有的基础架子之外，还要在这基础上再加一些规范化的产物。.vue,.js相关的内容用eslint做规范检查。git commit -m “规范化相关内容”全程参与了 - 把控/管控App的生命周期。创建stylelint.config.cjs。创建custom-words.txt。stylelint检查样式相关的。像这样就是暂时没大问题了。设置npm官方下载源。
2024-05-31 00:51:59
943
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人