寻求基于AngularJS简化JavaScript时间函数的改写建议

先看看你提供的原生JS时间代码片段：

function startTime() { var today = new Date(); var D = today.getDate(); var M = today.getMonth() + 1; var Y = today.getFullYear(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); // add a zero in front of numbers<10 m = checkTime(m); s = checkTime(s); if (document.getElem...

这段代码用原生JS直接操作DOM，在AngularJS项目里我们可以利用框架的特性，让代码更清晰、更易维护，完全避免手动操作DOM。下面是改写方案：

核心思路 #

• 用AngularJS的$interval替代原生setInterval，自动触发视图更新
• 把补零逻辑封装成自定义过滤器，在视图中直接复用
• 控制器中只负责数据处理，视图通过数据绑定展示内容，遵循MVVM模式

完整实现代码 #

1. HTML 部分 #

<div ng-app="timeApp" ng-controller="TimeController">
  <!-- 用AngularJS内置日期过滤器快速格式化 -->
  当前时间：{{ currentTime | date:'yyyy-MM-dd HH:mm:ss' }}
  
  <!-- 若需要完全自定义格式，用我们的自定义过滤器 -->
  当前时间（自定义格式）：{{ currentTime | customFormatDate }}
</div>

2. JavaScript 部分 #

// 定义AngularJS模块
angular.module('timeApp', [])
// 自定义时间格式化过滤器
.filter('customFormatDate', function() {
  // 封装补零工具函数
  const padZero = num => num < 10 ? `0${num}` : num;
  
  return function(date) {
    if (!(date instanceof Date)) return '';
    
    const year = date.getFullYear();
    const month = padZero(date.getMonth() + 1);
    const day = padZero(date.getDate());
    const hours = padZero(date.getHours());
    const minutes = padZero(date.getMinutes());
    const seconds = padZero(date.getSeconds());
    
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };
})
// 时间控制器
.controller('TimeController', ['$scope', '$interval', function($scope, $interval) {
  // 更新时间的核心函数
  const refreshTime = () => {
    $scope.currentTime = new Date();
  };
  
  // 初始化显示当前时间
  refreshTime();
  
  // 每秒更新一次时间，$interval会自动触发AngularJS脏检查更新视图
  const timeInterval = $interval(refreshTime, 1000);
  
  // 页面销毁时清除定时器，避免内存泄漏
  $scope.$on('$destroy', () => {
    $interval.cancel(timeInterval);
  });
}]);

为什么这样改写？ #

• 告别DOM操作：原来的代码里document.getElem...直接操作DOM，AngularJS通过数据绑定让视图自动更新，代码更简洁
• 复用性拉满：自定义过滤器customFormatDate可以在任何需要格式化时间的地方复用，不用重复写补零逻辑
• 符合框架规范：利用依赖注入（$scope、$interval）和控制器职责单一原则，代码更易维护和测试
• 内存更安全：在控制器销毁时清除$interval定时器，避免无用定时器占用内存

如果你的需求有特殊调整（比如只显示日期或者只显示时间），只需要修改过滤器或者视图中的绑定表达式就可以啦！

内容的提问来源于stack exchange，提问作者user8163136