AngularJS 遗留项目的升级改造之路(一) (2)

第三: AngularJS 1.5 新增了组件API,有助于改造遗留代码的风格。不论是在代码风格上还是在组件的生命周期上,其都比较像 Angular 中的等价物,在此基础上将代码升级到 Angular 时会更容易。


(3)引入 TypeScript

这里所说的引入 TypeScript,并不会像官网案例中那样引入了 TypeScript 后就将所有文件直接改为 .ts 文件,而是依旧采用渐进式的升级改造方式。可以通过借助 webpack 打包工具,让项目同时支持 .js 和 .ts 两种文件格式,有针对性的使用相关插件,最终统一生成 js 的目标文件。这样就可以不用一次性将全部文件改为 .ts 文件,把改造的影响降到最低,只需要在后续改造中一步步将 .js 替换为 .ts 文件即可。


另外,在现有遗留项目中,针对 js 文件有用 eslint 进行代码风格检查与约束。现在添加了 TypeScript,针对 ts 文件同样也可以使用 eslint。从 eslint 6.0 之后可以根据不同的文件后缀使用不同的规则,这样就可以同时支持 js 和 ts 两种文件。


(4)引入 angular-ts-decorator(可选)

在将 AngularJS 升级到 1.5+ 之后,可以通过引入 angular-ts-decorator 以 Angular 2 的代码风格对遗留代码进一步改造或直接编写新业务。angular-ts-decorator 的原理很简单,其实就是借助装饰器,将 AngularJS 模块声明、指令、控制器声明全部包装了一层,其内在实质没有变化。


简而言之,可以通过使用 angular-ts-decorator 将 AngularJS 的代码风格改为如同 Angular 2 代码风格,在享受 Angular 风格的代码带来的便利性的同时,也方便后续的升级改造。


到这一步,你或许会有所疑惑,因为按照官网的升级改造,似乎完全没有必要进行这一步。在必要的代码风格改造 + 引入 TypeScript 后,其实就可以直接进入到开启 AngularJS + Angular 的混合模式了。然后就可以快乐地用高版本的 Angular 的写组件,新功能完全用高版本写,至于涉及到 AngularJS 的部分,利用组件的升/降级方案,可以在 AngularJS 和 Angular 两边混用组件 ,一切看起来似乎很美好,但实际情况会有这么简单和容易吗?


一方面, 需要考虑“改旧增新”开发新功能会占据主要时间,技术升级改造的时间相对较少且不连续。而在项目中引入 angular-ts-decorator 库的工作量是极小的,基本上可以开箱即用,只需要写一两个样例,整个团队就可以按照新风格来写 AngularJS 。这将直接提升团队整体的开发体验,同时新写法与升级后的 Angular 组件很类似(除了 html 依旧是 AngularJS 写法),除了方便后续的升级改造,也更易于维护。


另一方面, 升/降级组件其实都没有想象中那么简单。这里的不简单主要受限于过滤器/管道、属性指令以及第三方 UI 组件库这三个方面(具体在后面遇到的难点中详谈)。如果能够较好的解决这三个问题,那么升级 AngularJS 的组件为 Angular 的组件相对来说就比较容易。


也因此,虽然这一步是可选的,但结合项目的具体情况,其也可能变成是必要的。


(5)启用 AngularJS + Angular 混合模式

开启混合模式本身很简单,只需要引入 Angular 相关的库,然后在 Angular 中引导 AngularJS 模块加载启动即可。


(6)逐步升级替换 AngularJS

第一: 引入 HttpClient 来处理 Http 请求,并配置好相关的 Http Intercepters 。这会与 AngularJS 中的 $resource 以及配置的 $httpProvider 相关的策略相对应。


第二: 引入 RouterModule,使用相邻出口配置 Angular 的路由策略,让混合应用同时支持 AngularJS 和 Angular 的两种路由。


第三: 如果遗留项目中用了第三方的 AngularJS 的 UI 组件库(比如 angular-ui-bootstrap),首先考虑是否能够升级到对应的 Angular 的版本。如果不能或工作量实在太大,那么则需要考虑是否有可替代的 Angular 版的 UI 组件库,当然这会使得项目中存在 AngularJS 和 Angular 两套第三方 UI 组件库,需要考虑的样式和交互上的一致性。


第四: 全新的功能和页面,可以完全采用 Angular 组件和路由来写,而涉及到 AngularJS 的部分,如果不能一次性升级改造完,则可以采用临时的升/降级组件和服务,来实现混用。(总体原则:优先用高版本 Angular 组件或服务实现相关业务功能)


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsfxpg.html