javascript - 如何在大型应用程序中避免许多 "$routeProvider.when"

Question

有没有办法编写一个方法来解析即将到来的 $location.path 并加载特定的 html 模板或应用 $route。目前，我的应用程序有这个长长的“时间”列表，完成后将增加一倍或三倍。

 .config(['$routeProvider',
 function ($routeProvider) {
  $routeProvider.
      //Home
      //User/Tenant/Register
   when('/register', { templateUrl: 'pages/Auth/register.html' }).
   when('/login', { templateUrl: 'pages/Auth/login.html' }).
      //User
   when('/user', { templateUrl: 'pages/User/list.html' }).
   when('/user/new', { templateUrl: 'pages/User/new.html' }).
   when('/user/:userId', { templateUrl: 'pages/User/detail.html' }).
   when('/user/edit/:userId', { templateUrl: 'pages/User/new.html' }).
         //Role
   when('/role', { templateUrl: 'pages/Role/list.html' }).
   when('/role/new', { templateUrl: 'pages/Role/new.html' }).
   when('/role/:roleId', { templateUrl: 'pages/Role/detail.html' }).
   when('/role/edit/:roleId', { templateUrl: 'pages/Role/new.html' }).
   when('/roleassign', { templateUrl: 'pages/Role/assign.html' }).
   when('/roledefine', { templateUrl: 'pages/Role/define.html' }).
        //Permissions
   when('/permission', { templateUrl: 'pages/Permission/list.html' }).
   when('/permission/new', { templateUrl: 'pages/Permission/new.html' }).
   when('/permission/:permissionId', { templateUrl: 'pages/Permission/detail.html' }).
   when('/permission/edit/:permissionId', { templateUrl: 'pages/Permission/new.html' }).
   when('/permissionassign', { templateUrl: 'pages/Permission/assign.html' }).
      //Counter
   when('/X', { templateUrl: 'pages/Counter/list.html' }).
   when('/X/new', { templateUrl: 'pages/Counter/new.html' }).
   when('/X/:counterId', { templateUrl: 'pages/Counter/detail.html' }).
   when('/X/edit/:counterId', { templateUrl: 'pages/Counter/new.html' }).
      //Company
   when('/Y', { templateUrl: 'pages/Y/list.html' }).
   when('/Y/new', { templateUrl: 'pages/Y/new.html' }).
   when('/Y/:companyId', { templateUrl: 'pages/Y/detail.html' }).
   when('/Y/edit/:companyId', { templateUrl: 'pages/Y/new.html' }).
      //Product
   when('/Z', { templateUrl: 'pages/Z/list.html' }).
   when('/Z/new', { templateUrl: 'pages/Z/new.html' }).
   when('/Z/:productId', { templateUrl: 'pages/Z/detail.html' }).
   when('/Z/edit/:productId', { templateUrl: 'pages/Z/new.html' }).
   otherwise({
       redirectTo: '/index',
       templateUrl: 'pages/dashboard.html'
   });
  //$locationProvider.html5Mode(true);
  }])

Answer 1

解决方案一:分离配置脚本

您可以拥有多个，而不是只有一个配置。如果这有助于可维护性，我会将各个组分成自己的组，这样就可以一次管理一个子集并使事物模式易于管理。您的应用程序似乎使用文件夹来分隔特定的功能组。这些配置脚本文件也可以这样做。它们可以包含在他们的脚本组中。

解决方案 2:DRY 代码

您的代码中似乎有很多 when 共享一些可以重构的通用约定，因此只为所有代码运行一个 block ，而无需一遍又一遍地重复相同的代码。

angular.foreach([
        "user",
        "permission",
        "role",
        "X",
        "Y",
        ...
    ], function(value) {
    $routeProvider
        .when("/" + value, { templateUrl: "pages/" + value + "/list.html" })
        .when("/" + value + "/new", { ... })
        .when("/" + value + "/:" + value + "Id", { ... }),
        .when("/" + value + "/edit/:" + value + "Id", { ... })
});

但由于我通常在 Javascript 中实现一个简化的 string.prototype.format 函数来帮助进行字符串连接，所以我将这些行写为:

angular.foreach([
        "user",
        "permission",
        "role",
        "X",
        "Y",
        ...
    ], function(value) {
    $routeProvider
        .when("/{0}".format(value), { templateUrl: "pages/" + value + "/list.html" })
        .when("/{0}/new".format(value), { ... })
        .when("/{0}/:{0}Id".format(value), { ... }),
        .when("/{0}/edit/:{0}Id".format(value), { ... })
});

对于那些定义额外路由的组，我可以看到一个类似的模式，也可以重构(即。roles 也有 define 和 assign).在我之前的代码示例中，我只提供了一个字符串值数组。这些可以更改为提供属性设置为数组的对象，以及它们需要的额外操作，并在迭代器函数中处理这些操作。

angular.forEach({
    user: [],
    role: ["assign", "define"],
    permission: ["assign"],
    ...
}, function(actions, key) {
    // same 4 as above by using "key" instead of "value"
    $routeProvider
        .when("/{0}".format(key), { ... })
        ...;
    // if element has additional actions, configure those as well
    angular.forEach(actions, function(action) {
        $routeProvider.when("/{0}{1}".format(key, action), { ... });
    });
});

简化的string.prototype.format实现

String.prototype.format = String.prototype.format || function () {
    ///<summary>Replaces placeholders in string with provided parameters.</summary>

    "use strict";

    var args = arguments;

    return this.replace(/{(\d+)}/g, function (match, index) {
        return typeof (args[index]) != "undefined" ? args[+index] : "";
    });
};