在JQ老项目中嵌入新框架迭代开发

Question

问题描述

接手了一个已经四五年的电商老项目，使用的JQ+easy-ui搭建的前端工程一直再迭代，现在开发非常吃力
目标是希望把angular6框架嵌入项目中，在不改变老项目功能的基础上，新版需求全部利用angular6完成后嵌入使用。

问题出现的环境背景及自己尝试过哪些方法

大背景是后台接口服务器庞大且复杂，前端代码混乱，准备另起炉灶快速完成新需求的情况下逐步迁移老代码；
目前所想的方法是利用iframe嵌入，但风险评估不足。(包括打包问题,iframe路径问题等如何解决适应多环境变更/开发/测试/线上)

请大佬们赐教更好的嵌入方式或评估一下风险并大致说明解决办法，万分感谢！

Answer 1

你这方案看上去像是在给自己挖深坑啊……
这种深度jQ项目，能上个轻后端语音（比如php，nodejs这种）就最好，先用模板一点点拆，看看有什么能复用的（页头页脚），或者可以用模板逻辑来渲染的（比如判断客户端的逻辑），一点点分离原来的逻辑，然后后端的接口你也可以做类似处理，一些页面渲染逻辑的直接放视图层，功能类的逻辑可以保留原有的请求方式，或者用php/nodejs代理请求都行（我自己更喜欢后一种，因为自己给前端写接口会更灵活，同时后端对后端请求亦是）。
或者Ag更熟的话也行，就直接重构吧，别加iframe了，否则还得踩坑，更不划算。

Answer 2

讲道理，4 5年的技术债要还不是一天两天的事情，既然项目在线同时又在不断迭代，风险最低、最稳重的方式还是依照旧的技术栈进行开发。

并不推荐渐进式的过渡，不说别的，如果一个项目使用的是 angularjs，过渡到 angular 都够你折腾个一年半载的了，更别提这种老项目了，如果真的这么做了，我目测过渡过程不亚于重写。

如果并不是局限于 angular 的话，引入 vue 是不错的解决方案，因为 vue 可以直接通过 script 引入，并不需要繁杂的前端工程化体系，在这个基础下，还能享受到类似双向绑定、组件化开发的便利，算是一种折中方案吧。

还有一种方式就是直接另起一个新的项目，慢慢从头做，每完成一个模块就在旧项目中通过重定向的方式指向到新项目即可，不过这其中可能会涉及一些状态持久化的问题。

Answer 3

你angular自带路由啊，和你原来jq的方式不一样啊，还不如直接开发一套新的基于angular前端

Answer 4

感觉使用iframe嵌入不大好。新页面里新功能，使用ng写；老页面里的新功能，还是用jq那套接着干完把。
如果有时间，就把简单又恶心的页面重构，然后是复杂恶心的，然后是...
估计你没时间重构

Answer 5

重构吧，喊老板招人啊，一边维护更新，一边做新版本。这不是通用操作吗

Answer 6

建议另起炉灶重新搞，新功能放到新系统，通过链接的方式链过去用，逐步迁移。我之前就是这样做的。