Javascript 如何使用用户角色构造视图和视图模型？

我正在开发一个应用程序，根据用户角色的不同需要不同的视图。最初，我设法使用包含ajax请求操作和模型的单独文件夹来分离与API的交互，以避免在VM中重复代码

app/controllers/-包含每个对象的GET、POST、PUT、DELETE操作和模型 然后我有了应用程序其余部分的结构：

app/building/ [route:building/]
  - shell.html
  - shell.js
  - /offices (list of offices)
    - index.html
    - index.js
  - /equipment (list of equipments)
    - index.html
    - index.js

app/offices/ [route:offices/:id]
  - shell.html
  - shell.js
- /employees (list of employees)
  - index.html
  - index.js
- /details (office details)
  - index.html
  - index.js

app/employees/ [route:employees/:id]
  - shell.html
  - shell.js
  - /report (individual employee data)
    - index.html
    - index.js
  - /details (empoyee details)
    - index.html
    - index.js

这将是管理员角色。如你所见，有很多外壳、子外壳、子路由器和路由。需要进行更改，因为并非所有角色都可以访问相同的路由

起初，我尝试了viewURL方法，在会话开始时保存角色，并使用viewURL提供适当的视图，但后来我注意到文件变得太多：

had必须对主路由器和子路由器进行更改，并为较低级别的用户删除已声明的路由 每个页面的单独视图admin.html、employee.html都共享相同的视图模型，其中包含员工永远不会使用的函数 然后我想出了另一个结构。与以前相同，只是每个角色都有自己的文件夹：

app/roles/admin/
  - building/
    - ...
  - offices/
    - ...
  - employees/
    - ...
app/roles/employee
  - building/
    - ...
  - offices/
    - ...
  - employees/
    - ...

当应用程序加载时，我只是根据角色设置根，就完成了

优势 易于单独维护 应用程序启动后无角色检查 特定于角色的代码，不会给其他角色带来混乱的风险 缺点 更多文件 作为一个群体很难维持。例如，如果我重写了一个在所有角色之间共享的函数，我必须为每个角色替换该代码

---

我觉得第二种结构更合适，但我想知道你们的想法。或者如果你有更好的处理角色的方法。

有很多不同的方法可以实现这一点，例如定制viewLocator.convertModuleIdToViewId方法，但是我认为如果你没有为每个不同的角色在同一个视图/视图模型之间重复太多代码，你所得到的是可以的

我唯一不喜欢的是，你最终会得到数百个名为index.js和index.html的文件，这使得你很难找到你是否在使用R

为了解决难以作为一个组进行维护的问题，您可以相当容易地将公共代码重构为一个All角色，然后将其用于特定的角色。比如：

app/roles/all/
  - building/
    - buildingCore.js
  - offices/
    - officesCore.js

那么对于buildingCore.js，显然我只是在这里编写方法：

define([], function() {
    var someCommonBuildingFunction = function() {
        // whatever
    }

    return {
        doSomething: someCommonBuildingFunction
    }
});

然后在admin/building/building.js中：

---

谢谢你的回答。索引的事情很烦人，我得做点什么，可能会放弃一些文件夹。关于重复的代码，我的虚拟机中的大多数函数都处理诸如添加/编辑/删除之类的操作，它们只调用控制器文件夹中的函数。但我肯定会使用你的“核心”方法来进一步减少重复。再次感谢！

define([
    "roles/all/buildingCore"
],

function(buildingCore) {
    var viewModel = {
        activate: function() {
            buildingCore.doSomething()
        }
    }

    return viewModel;
});