0

我正在开发一个需要不同视图的应用程序，具体取决于用户角色。最初，我设法使用包含 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，但后来我注意到文件变得过于臃肿：

  • 必须对主路由器和子路由器进行更改，并删除低级别用户声明的路由
  • 每个页面的单独视图（admin.html、employee.html）都共享相同的视图模型，其中包含员工永远不会使用的功能

然后我想出了另一个结构。和以前一样，只是每个角色都有自己的文件夹：

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

当应用程序加载时，我只需根据角色设置根目录就可以了。

优点

  • 更易于单独维护
  • 除了应用程序启动之外没有角色检查
  • 角色特定的代码，没有为其他角色搞砸的风险

缺点

  • 更多文件
  • 作为一个群体更难维持。例如，如果我重写一个在所有角色之间共享的函数，我必须为每个角色替换该代码

我对第二种结构感觉更舒服，但我想知道你们的想法。或者，如果您有更好的角色处理方式。

4

1 回答 1

0

有很多不同的方法可以解决这个问题（例如自定义viewLocator.convertModuleIdToViewId方法浮现在脑海中），但我认为只要你没有在“相同”视图/视图模型之间为每个不同的视图重复太多代码，你所拥有的就可以了角色。

我唯一不喜欢的是，你最终会得到“数百个”名为“index.js”和“index.html”的文件，如果你使用的是 R#，就很难找到它。

为了解决“作为一个群体更难维护”的问题，您可以相当轻松地将公共代码重构为“全部​​”角色，然后将其用于特定角色。所以像：

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;
});
于 2014-02-21T05:16:09.313 回答