Question

我有一个带有shared目录的AngularJS项目，其中有几个共享组件。

- shared
    - index.js
    - alert
        - index.js
        - alert.component.js
        - alert.controller.js
        - alert.tpl.html
        - alert.scss
    - logging
        - index.js
        - logging.component.js
        - logging.controller.js
        - logging.tpl.html
        - logging.scss

代码在ES6中以模块化方式编写。因此，例如alert.component.js可能如下所示：

import controller from './alert.controller'
export const Alert = {
    controller,
    templateUrl: 'shared/alert/alert.tpl.html'
};

我想有一个名为shared的AngularJS模块，其中定义了两个组件。我的问题是我应该在什么级别实际定义组件。它应该在组件目录（shared/alert/index.js）内还是在共享目录（shared/index.js）内。

在第一种情况下，文件shared/alert/index.js看起来像这样：

import { Alert } from './alert.component';
angular.module('shared').component('Alert', Alert);

在第二种情况下，文件看起来像这样：

export { Alert } from './alert.component';

然后两个组件都将在shared/index.js：

中定义

import { Alert } from './alert';
angular.module('shared').component('Alert', Alert);

import { Logging } from './logging';
angular.module('shared').component('Logging', Logging);

第一种情况对我来说似乎有点奇怪，因为我有点让组件将自己添加到应用程序中。在第二种情况下，如果我有许多共享组件，我最终会得到一个巨大的index.js文件。所以我想知道这些方法的其他方面是什么，以及是否有最佳实践？

Answer 1

与任何“最佳实践”一样，最好的方法是从这种情况下可能出现的问题中推断出来。

angular.module('shared')模块getter通常是反模式，特别是在模块化环境中。在使用angular.module('shared', [])模块设置器定义模块后，应对其进行评估。相反的做法会导致竞争条件和错误。

在第一种情况下，在测试或其他模块中导入shared/alert/index.js将导致错误，因为尚未定义shared模块。

在第二种情况下，不存在此类问题，但仅在shared中定义了shared/index.js模块时才会出现。

与ES模块配合良好的方法是one module per file。结果是高度模块化的应用程序，具有相对较少的样板代码。优点是可重用性和可测试性，子模块可以相互依赖，但不与share耦合。

如果某些子模块包含影响整个应用程序的项目 - 装饰器，配置/运行块，包含它们的第三方模块（路由器），这是一个重要的考虑因素。

AngularJS最佳实践：组件是否应该将自己添加到AngularJS模块中

1 个答案: