依赖已废弃的库（还在用 AngularJS 1.x）

AngularJS 1.x 曾是前端开发的里程碑，但随着现代框架的崛起，许多项目仍深陷对其的依赖。这种技术债不仅影响开发效率，还可能引发安全风险和维护难题。

为什么 AngularJS 1.x 被废弃

AngularJS 1.x 的废弃源于其架构设计上的根本缺陷。双向数据绑定虽然简化了开发，但带来了严重的性能问题。随着应用规模扩大，脏检查机制会导致页面卡顿：

// 典型双向绑定示例
angular.module('app', [])
  .controller('DemoCtrl', function($scope) {
    $scope.items = Array(1000).fill().map((_, i) => ({ id: i }));
    // 当items变化时，整个列表会重新脏检查
  });

Google 官方在 2018 年宣布停止长期支持，主要因为：

• 无法适配现代 Web 组件标准
• 缺乏虚拟 DOM 等性能优化手段
• 模块系统与 ES6 模块不兼容
• 依赖注入机制难以支持 Tree Shaking

仍在使用的典型场景

许多企业级应用由于历史原因难以迁移：

1. 金融行业后台系统：复杂表单逻辑重度依赖 $scope 继承
2. 传统制造业ERP：使用 angular-ui-router 构建的多标签页应用
3. 遗留的混合开发应用：与 jQuery 插件深度耦合的移动端页面

<!-- 典型混合使用案例 -->
<div ng-controller="ReportCtrl">
  <div id="chart" style="width:800px;height:400px"></div>
  <script>
    angular.element(document).ready(() => {
      $('#chart').plot(/* 依赖jQuery插件 */);
    });
  </script>
</div>

依赖废弃库的技术风险

安全漏洞无法修复

AngularJS 1.7.x 最后一个补丁版本存在已知 XSS 漏洞：

// 通过ng-bind-html执行的未过滤内容
$scope.userContent = '<script>恶意代码</script>';

开发效率低下

与现代工具链脱节导致：

• 无法使用 Vue/React 的 HMR 热更新
• Webpack 打包需要特殊配置
• 类型系统支持差（即使使用 @types/angular）

人才断层问题

新手开发者更熟悉现代框架，老员工维护意愿低。招聘要求出现矛盾：

"要求：3年Angular经验"
实际：应聘者只有Angular 2+经验

渐进式迁移策略

混合模式方案

使用 ngUpgrade 实现 AngularJS 与 Angular 共存：

// Angular组件包装AngularJS指令
@Component({
  selector: 'legacy-wrapper',
  template: `<div ng-controller="OldCtrl" old-directive></div>`
})
export class LegacyWrapper {
  constructor(private upgrade: UpgradeModule) {}
}

组件级替换路线

1. 从叶子组件开始替换
2. 使用 Web Components 作为中间层
3. 逐步重构服务层

// 将angular服务转换为纯JS模块
// 旧服务
angular.service('apiService', ['$http', function($http) {
  this.fetch = () => $http.get('/data');
}]);

// 新模块
export const apiService = {
  fetch: () => fetch('/data').then(r => r.json())
};

工具链适配方案

构建工具配置

为 webpack 添加特殊规则处理 AngularJS 的依赖：

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules(?!\/angular)/
    }]
  }
}

静态分析辅助

使用 ESLint 规则检测危险用法：

# .eslintrc.yml
rules:
  angular/no-service-method: 2
  angular/avoid-scope-typos: 2

性能优化技巧

对于必须保留的 AngularJS 代码：

1. 禁用调试信息：

angular.module('app').config(['$compileProvider', function($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

2. 手动控制脏检查：

// 在频繁触发的事件中
$scope.$applyAsync(() => {
  // 批量更新
});

3. 优化监视器数量：

// 避免深度watch
$scope.$watch('object', callback, true);  // 反模式

团队协作应对措施

建立过渡期开发规范：

• 新功能必须用现代框架实现
• 旧模块修改需添加迁移标记
• 文档中明确标注技术栈分层

<!-- 代码注释示例 -->
/**
 * @legacy 订单提交逻辑
 * @migration-target modules/order/new-submit.ts
 * @deprecated 计划2024Q2迁移
 */

测试策略调整

混合架构下的测试方案：

// 新测试框架中加载AngularJS
beforeAll(async () => {
  await import('angular/angular.min.js');
  require('./legacy-app.js');
});

// 使用现代断言库测试旧代码
test('legacy service', async () => {
  const service = window.angular.mock.injector().get('oldService');
  expect(await service.method()).toEqual(/*...*/);
});

依赖管理特别处理

对无法替换的 AngularJS 插件：

1. 锁定版本号
2. 提取关键代码
3. 添加防御性检查

// package.json
{
  "overrides": {
    "angular-ui-grid": {
      "angular": "1.7.9"
    }
  }
}

用户感知控制

迁移过程中的体验保障：

// 加载过渡动画
app.run(['$rootScope', function($rootScope) {
  $rootScope.$on('$routeChangeStart', () => {
    showLoader();
  });
}]);