javascript - Ember.JS:Ember-Objects 及其导出到的位置

Question

我正在尝试掌握 Ember.JS 的底层系统。这些 Ember-Objects 被导出到哪里去了？它们是如何使用的？

组件:

export default Ember.Component.extend({ ... });

Controller :

export default Ember.Controller.extend({ ... });

模型:

export default DS.Model.extend({ ... });

路线:

export default Ember.Route.extend({ ... });

...它们都遵循相同的结构:它们扩展了一些对象并导出了一些东西。

有人知道更多吗？谢谢!

Answer 1

我认为您在这里对 export 关键字的解释有误。

这并不意味着文件以不同的格式写入其他地方，但是:

if a module (= file) is imported, then things in that file that are exported are available to the importer.

将其视为使某些部分可供其他模块使用，简称为公共(public) API。

Ember 文件通常只导出一个东西，因为有一个强大的命名约定使 Ember 引擎以这种方式工作。
这就是为什么如果你声明一个 /user 路由，它会尝试使用你的 routes/user.js, controllers/user.js,和 templates/user.hbs 文件(如果存在)，您无需指定任何内容。以类似的方式，这就是使组件在模板内可用的原因。

因此，您可以在这些文件中找到一行 export default Ember.Something.extend({ ... });。

但是，您可以在单个文件中拥有包含多个 export 语句的模块(= 文件)，这是完全有效的。

// Example from babel website

// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
    return Math.exp(x);
}
// app.js
import exp, {pi, e} from "lib/mathplusplus";
console.log("e^π = " + exp(pi));

Learn ES2015 Babel 网站上有几个示例，您可以在 MDN 上阅读有关 export 语句的更多信息.

在 Ember 应用程序中，根据我的经验，您会发现具有多个导出的文件主要位于某些目录中，这些目录意味着被应用程序中的多个模块使用，或者未绑定(bind)到 Ember 引擎自动导入，例如一些 utils .

以下示例显示了 Ember.Controller 导入从另一个模块导出的变量:

// utils/messages.js
export var hello = 'Hello!';
export var bye = 'Good Bye!'

// controllers/hello.js
import { hello } from "utils/messages";

export default Ember.Controller.extend({
  firstName: 'David',

  helloString: Ember.computed('firstName', function(){
    return `${hello} ${this.get('firstName')}`;
  })
});