ChatGPT 辅助重构：老旧 jQuery 项目迁移到 React 的协作日志

"代码是逻辑的诗篇，架构是思想的交响"摘要作为一名开发领域深耕多年的技术实践者，我曾经参与过一个极具挑战性的项目：将一个拥有多年历史、代码量超过3万行的jQuery项目完全重构为现代化的React应用。 整个重构过程历时6周，最终成功将项目从jQuery 1.12迁移到React 18，不仅保持了所有原有功能，还实现了40%的性能提升和60%的代码量减少。 } + Bootstrap 3- 目标：迁移到React 18 + TypeScript + Ant Design请在后续对话中保持这个上下文，并提供专业的技术建议。 重构工作量分布饼图 - 展示各阶段工作量占比四、关键技术难点突破4.1 复杂业务逻辑迁移在ChatGPT的协助下，我成功解决了最复杂的权限控制逻辑迁移：// 原jQuery权限控制逻辑（复杂且难以维护） ChatGPT协助的jQuery到React重构项目，我深刻体会到AI协作在现代软件开发中的巨大价值。

从 jQuery 到 Vue3 的快捷通道

当初使用 jQuery 做了几个简单的项目，算是有一点点了解，现在学习Vue3，发现了一个可以快速转换思维的通道 —— 使用CDN的方式模拟 Vite 建立的项目！ CDN方式 jQuery的使用非常方便，用 script 引入 js文件即可，然后找到DOM即可开始操作。 --加载 vue3 --> <script src="https://unpkg.com/vue@3.2.33/dist/vue.global.js"></script> <! 项目可以分模块开发，稳定且基础的模块可以打包、发布到CDN里面使用。 源码和演示 源码：https://gitee.com/naturefw-project/vue3-cnd 演示：https://naturefw-project.gitee.io/vue3-cnd/ 补充

React Router3到5 升级小记

现在都 React Router 5 了，你是不是还在用v3呢？ 不光是你在用，我们很多项目也在用，懒得升级，感觉改动太大，升级了后谁知道会出什么问题，别没事找事。 毕竟v4是两年前的了，再不升级真的就有点说不过去了，直接拿一个小项目开刀，直接3-5吧，整体来说还好，v5版完全向下兼容react15，所以如果你的 react 是15的话没啥影响。 导入的包变了 //V3 下 npm i react-router //V5 下 npm i react-router-dom react-router为核心库，运行于浏览器端就用react-router-dom 所以Link组件的导入也变了,同时增加了属性 replace 表示是否替换掉原地址 //v3 import {Link} from react-router; //v4 v5 import { Link index.js'), loading:loadingComponent }); // 和路由结合 <Route path="/home" component={Home}/> 小结 v3到

jQuery笔记(3)

jQuery元素操作 主要是遍历,创建,添加,删除元素操作 遍历元素each() jQuery隐式迭代是对同一类元素做了相同的操作,如果想要给同一元素做不同的操作,就需要用到遍历 语法1: domEle){xxx;}) each()方法遍历匹配的每一个元素.主要用DOM处理.each每一个 里面的回调函数有2个参数,index是每个元素的索引号,domEle是每个DOM元素对象,不是jQuery 对象 所以想要使用jQuery方法,需要将这个DOM元素转换成jQuery对象 $(domEle) 语法2: $.each(object, function(index, element){ element.empty() 删除匹配的元素集合中所有的子节点 element.html("") 清空匹配的元素内容(注意里面不能是空的,要加引号) 将匹配的子节点清空 本文由“壹伴编辑器”提供技术支持 jQuery 尺寸 本文由“壹伴编辑器”提供技术支持 jQuery位置 位置主要有三个: offset(),position(), scrollTop()/scrollLeft()(可以获取+设置) (真的好多啊

【前端架构】从 JQuery 到 React、Vue、Angular——前端框架的演变及其差异

DOM API && jQuery 过去开发网页时，主要是通过浏览器提供的DOM API来操作DOM。 但是 DOM API 比较繁琐，在不同的浏览器中存在兼容性问题。 为了简化dom操作和兼容不同的浏览器，jQuery开始流行起来。在那个时候，jQuery可以说是前端开发者必学的技术。 React JSX 与 Vue 模板 React 和 Vue 在描述视图层时给出了不同的解决方案。React 选择扩展 JavaScript 并引入 JSX。 Vue2 使用了 Object.defineProperty ，而 Vue3 使用了 Proxy。 另一方面，React 采取了不同的策略。 本文https://jiagoushi.pro/jquery-react-vue-angular-evolution-frontend-frameworks-and-there-difference讨论

mysql 迁移3

Configuration File for keepalived global_defs { router_id LVS_slave01 } vrrp_instance VI_3 { state MASTER interface eth0 virtual_router_id 3 priority 85 advert_int 1 authentication

迁移Hexo到halo

准备工作 建立交换空间 bash 1dd if=/dev/zero of=/var/swapfile bs=1M count=1024 2mkswap /var/swapfile 3swapon /var add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" 3sudo json 1{ 2 "registry-mirrors": ["http://hub-mirror.c.163.com"] 3} COPY 重启 Docker 使配置生效 bash 1service 因为我们需要绑定域名以申请SSL证书，所以你需要在 docker-compose.yaml 文件中修改以下配置： docker 1 halo: 2 restart: always 3 image bash 1docker-compose up -d 2docker pull ruibaby/halo COPY 停止与重构 bash 1#停止容器运行： 2docker-compose stop 3#

mysql 迁移3

n .2 ip a 使用给新master keepalived 升优先级重载的方式切IP 使用 watch 来观察ip变化 ---- 从两边密切监控观察检查应用与数据库状态 使用netstat 观察到数据库的连接比如

迁移Wordpress到Docker

现在我的博客早已迁移到了 github ，女儿也长大了，博客好几年没有更新，准备停掉 linode 服务器，将女儿博客迁移到本地。 迁移有三个步骤： 1、备份原博客数据； 2、本地部署 wordpress； 3、还原。 备份 1、将服务器 wwwroot 目录中的文件拷贝到本地。 2、将 mysql 数据库进行备份。 docker-compose 的方式，wordpress 使用的是最新版本，mysql 和之前 linode 服务器使用的同一版本，docker-compose.yml 文件内容如下： version: '3' 1、在构建的数据库中创建一个名为 wordpress_bak 的库，将备份的数据库还原到这个库中。 backup.sql 2、构建成功后，默认的 wordpress 库中的表有些示例数据，使用下面语句将示例数据删除： DELETE FROM wp_posts DELETE from wp_terms 3、

迁移 VPS 到 Vultr

为什么要迁移 趁着中秋节之前总算是把我的 VPS 迁移到了 Vultr，域名也换了一个 .me 结尾的，更有个人网站的感觉，但是一年下来也得多花不少钱，疼死我了。 迁移过程 这里不是为了做教学，只是记录一下，不会说的太详细。因为首先我记不住，其次我不想专门为了演示重新走一遍整个过程，实在是太费神了。 把原来的退掉 我的情况比较复杂，简单描述一下：我在去年搞活动时候入手的低价服务器，但前几个月按原价续费了，到退款时有效期还有一年。

迁移 Nginx 到 Envoy

大部分的应用可能还是使用的比较传统的 Nginx 来做服务代理，本文我们将介绍如何将 Nginx 的配置迁移到 Envoy 上来。 我们将学到： 如何设置 Envoy 代理配置 配置 Envoy 代理转发请求到外部服务 配置访问和错误日志 最后我们还会了解到 Envoy 代理的核心功能，以及如何将现有的 Nginx 配置迁移到 Envoy $host; proxy_set_header X-Real-IP $remote_addr; } } } 上面的 Nginx 配置有3个核心配置 下面的配置将创建一个新的监听器并将其绑定到 8080 端口上，该配置指示了 Envoy 代理用于接收网络请求的端口。 3. 测试 现在我们已经将 Nginx 配置转换为了 Envoy 代理，接下来我们可以来启动 Envoy 代理进行测试验证。

JQuery Ajax解读(3)

3.使用post方式进行异步请求：$.post (url,[data],[callback],[type]) url(String):请求的html页的url地址 data(Map):发送至服务器的key callback(Callback):载入成功时候回调函数 type：客户端请求的类型（json或者xml等） 4.通过get方式请求并执行一个javascript：$.get(url,[callback]) 5.JQuery

jQuery学习笔记之jQuery的Ajax（3）

代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种. 3、 ()方法 1、load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中。 2、它的结构是: load(url[, data][,callback]) 3、程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 3、serializeArray()方法 该方法作用于一个jQuery对象，可以将DOM元素内容序列化为JSON数据格式。 注：此方法返回的是JSON对象而非JSON字符串。 JQuery 加载并解析 XML 1、JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.

jquery 筛选元素 (3)