简介
ember-js-modules 是 Ember.js 的一个 npm 包，它提供了一种使用 JavaScript 模块定义（AMD）和 ES6 的方式来组织 Ember.js 应用程序代码的方式。使用 ember-js-modules 能够更加方便地组织你的代码，并且使你的代码更加可维护。
在本文中，我们将学习如何使用 ember-js-modules 去组织你的代码，并对比它与 Ember.js 的默认组织方式的不同之处。
安装
ember-js-modules 可以通过 npm 进行安装：
npm install ember-js-modules --save-dev
使用
目录结构
使用 ember-js-modules 组织你的代码需要有一个特定的目录结构，它如下：
-- -------------------- ---- ------- ---- ----------- ------------ ------- ------- ------- ---------- ------ -------
在这个目录结构中，你可以将你的组件、控制器、混合器、模型、路由、模板和工具等代码划分到各自的文件夹中。与 Ember.js 原生目录结构不同的是，文件夹名称是小写的，而且 main.js 文件是必须的。
main.js
main.js 文件是你的应用程序的入口点，它应该包含你的应用程序实例化并开始运行的代码。这个文件应该像下面这样：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ----------------- ------ ---------------- ---- -------------------------- ------ ------ ---- ----------------------- ----- --- - -------------------------- ------------- -------------------- ---------------- ----------------------- --------- --- --------------------- --------------------- ------ ------- ----
在这个文件中，我们导入了 Ember.js、Resolver 和 config。然后我们创建了一个 App 实例，并将它的 modulePrefix 和 podModulePrefix 属性设置为 config 对象中的值。我们还调用了 loadInitializers() 方法，它将加载我们应用程序中的所有初始化器。最后，我们将 App 实例导出为默认的 export。
组件、控制器和模型
将你的组件、控制器和模型划分到它们对应的文件夹中。每个文件都应该只包含一个模块定义，并且模块名称应该与文件名相同。例如：
app/components/my-component.js：
import Ember from 'ember';
export default Ember.Component.extend({
// ...
});路由
将你的路由文件也划分到 routes 文件夹中，每个文件也应该只包含一个模块定义，并且模块名称应该与文件名相同。例如：
app/routes/index.js：
import Ember from 'ember';
export default Ember.Route.extend({
// ...
});模板
将你的模板划分到 templates 文件夹中，它们应该与对应的组件或路由拥有相同的文件名。例如：
app/templates/my-template.hbs：
{{! My Template }}混合器
将你的混合器划分到 mixins 文件夹中。每个文件应该只包含一个模块定义，并且模块名称应该与文件名相同。例如：
app/mixins/my-mixin.js：
import Ember from 'ember';
export default Ember.Mixin.create({
// ...
});Ember.js 默认组织方式与 ember-js-modules 的不同
在 Ember.js 的默认目录结构中，所有的组件、控制器、混合器、模型、路由、模板和工具代码都在同一个目录下。此外，默认的目录结构还包含了 initializers/和 helpers/ 文件夹和一个名为 resolver.js 的文件。
使用 ember-js-modules 能够更方便地组织你的代码，并且允许你更容易地重用和测试你的代码。另外，它也更加符合 AMD 和 ES6 相关规范。
示例
为了更好地理解 ember-js-modules 的使用方式，我们可以尝试创建一个简单的例子应用程序。假设我们要创建一个列表，这个列表可以用来存储书籍信息。
首先，我们需要创建一个书籍的模型定义，它本质上是一个 Ember Data 模型：
app/models/book.js：
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr(),
author: DS.attr(),
});接下来，我们可以创建一个用于显示书籍列表的组件：
app/components/book-list.js：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ------------------------
------ -----
------ -
--------------------------
----------------- -----------------------------------
--
---在这个组件中，我们使用了 Ember.Componet 的 init() 方法，它会在实例被创建后立即执行。我们在 init() 方法中通过 store.findAll() 方法从服务端获取书籍列表，并将其存储在组件的 books 属性中。
与此同时，我们也可以创建一个用于添加新书籍的组件：
app/components/add-book.js：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ------------------------
------ -----------------------
-------- -
--------- -
----- ------- - -----------------
--------------------- -----
-------
-------- -- ----------------- ------------------------------------
--
--
---在这个组件中，我们使用了 Ember.componet 的 actions 属性，它定义了我们可以在组件中使用的行为和事件。在这个组件中，我们定义了一个 add() 方法。当这个方法被调用时，它会创建一个新的书籍记录，并将其存储在 store 中。在新的书籍被保存之后，我们又从 store 中获取了所有书籍，并将其存储在组件的 books 属性中。
最后，我们可以创建一个路由文件来定义路由行为：
app/routes/books.js：
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.get('store').findAll('book');
},
});在这个路由中，我们通过定义 model() 方法来获取所有的书籍，并将其作为路由的模型返回。
最后，我们需要将这些组件和路由组成一个完整的应用程序。我们可以通过修改 main.js 文件来实现这一点：
app/main.js：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ----------------- ------ ---------------- ---- -------------------------- ------ ------ ---- ----------------------- ----- --- - -------------------------- ------------- -------------------- ---------------- ----------------------- --------- --- --------------------- --------------------- ------ ------- ----
以上是一个使用 ember-js-modules 的 Ember.js 应用程序的简单示例。对于一个更加复杂的应用程序，你可以将更多的组件、路由文件等划分到不同的文件夹中进行管理，实现更高效的开发过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e18a563576b7b1ecb7c