angular 2 模块和 Javascript ES6 模块之间的区别

Difference between angular 2 modules and Javascript ES6 modules

Angular 2 个模块允许应用程序分为多个模块,每个模块用于不同的目的。

但这不正是 ES6 模块应该做的吗?两者有什么区别?

摘自angular.io:

Angular 模块 class 在三个关键方面不同于 JavaScript 模块 class:

  1. 一个 Angular 模块边界仅可声明 class。可声明对象是唯一对 Angular 重要的 classes。

  2. 不是在一个巨大的文件中定义所有成员 classes(如在 JavaScript 模块中),我们在 class 中列出模块的 classes =10=]列表.

  3. Angular 模块只能导出它拥有的可声明的 classes 或从其他模块导入。它不声明或导出任何其他类型的 class.

ES 模块与 Angular 模块:

  1. ES 模块是导入或导出某些内容的代码文件,而 angular 模块将应用程序组织成内聚的功能块。

  2. ES 模块组织我们的代码,而 angular 模块组织我们的应用程序。

  3. ES 模块将我们的代码模块化,而 angular 模块将我们的应用程序模块化。

  4. ES 模块促进代码重用,而 angular 模块促进应用程序边界。

取自此来源:Angular Modules vs ES6 Modules

ES Modules:

  1. ES6 modules represent a single file.
  2. The ES6 module syntax is a standardized construct of the ECMAScript language specification.

On the other side:

  1. Angular Modules are an Angular-specific construct.
  2. Angular Modules logically group different Angular artifacts such as components, pipes, directives, etc.
  3. Angular Modules in the form of the @NgModule decorator provide metadata to the Angular compiler which in turn can better “reason about our application” structure and thus introduce optimizations.
  4. Important features such as lazy loading are done at the Angular Module level.

我找到了解释差异的好文章 here,以下是主要差异:

ES6 模块:

  • ES6 模块,也称为 JS 模块或 JavaScript 模块或 ECMAScript 模块是 JavaScript 语言的一部分。
  • JS 模块存储在一个文件中。每个文件只有一个模块,每个模块只有一个文件。
  • 这些模块包含一小部分独立的、可重用的代码。他们导出一个值,可以在其他模块中导入和使用。

    ES6 模块的用途:

  • 避免代码泄露到全局命名空间,

  • 封装代码以隐藏实现细节,

Angular 模块:

  • Angular 模块是 Angular 特定的结构。

  • Angular 模块在逻辑上将不同的 Angular 工件分组,例如组件、管道、指令等

  • Angular @NgModule 装饰器形式的模块为 Angular 编译器提供元数据,编译器反过来可以更好地“推理我们的应用程序”结构,从而引入优化.

    Angular 模块的用途:

  • 将 Angular 应用程序部分组织成内聚块

  • 有助于保持关注点分离