Ember 工程基本配置

在上一篇中，我们基本简单搭建了一个工程。如上文所说，ember-cli插件，是基于broccoli.js 来进行资源管理以及目录结构管理的，所以说，了解目录结构对我们来说有很重要的意义，此外我们还是说道一些常用的配置。

ember工程目录结构

在使用ember new <project-name>的时候，会将你的目录结构打出来，如下：

简单来说，如下所示，其中比较重要（或者说需要修改）的文件，用红色标出：

这里着重介绍2个文件
environment.js以及ember-cli-build.js
以及顺带说一下.jshintrc，route.js

environment.js

这个文件，顾名思义，主要用来配置和环境相关的内容，初始内容如下：

/* jshint node: true */
module.exports = function(environment) {var ENV = {modulePrefix: 'ember-demo',environment: environment,rootURL: '/',locationType: 'auto',EmberENV: {FEATURES: {}},APP: {}};if (environment === 'development') {}if (environment === 'test') {// Testem prefers this...ENV.locationType = 'none';// keep test console output quieterENV.APP.LOG_ACTIVE_GENERATION = false;ENV.APP.LOG_VIEW_LOOKUPS = false;ENV.APP.rootElement = '#ember-testing';}if (environment === 'production') {}return ENV;
};

（1）environment
环境，有三个值:production development test，
（2）rootURL
根路径，默认为’/’，
（3）locationType
用来表示url的规则，有4中规则hash history auto none。

既然说到了这里，可以顺带说一下route.js。这个文件，是用来做路由管理的，其中的有两个变量localtion rootUrl，一般，我们都会在这里，配置一下。如下：

import Ember from 'ember';
import config from './config/environment';const Router = Ember.Router.extend({location: config.locationType,rootURL: config.rootURL
});
Router.map(function() {});
export default Router;

可以看到这里的配置就是取自environment.js。
简单说一下locationType的几个值的意思。
以以下路由为例：

Router.map(function() {this.route('posts', function() {this.route('new');});
});

意思就是路径post下有一个自路径new
- hash，url为/#/post/new
- history，url为/posts/new
- none，这个情况比较特殊，是指url永远都不会变，即时跳转了，也就是说，ember不会保存应用的路由状态，这个一般情况下测试的时候会用
- auto，ember会选择浏览器最支持的方式，一般为hash或者history，例如在ie9以下，会选择hash。

（4）EmberENV
EmberENV下有一个重要的属性FEATURES，这个主要用来控制新的特性，只有配置了才能使用，关于这里的配置，老夫也不是很了解。根据官方文档上的解释，个人是这么理解的：
在features.json里有所有新的feature的状态，但是他们不都是可以直接用的，他们的状态分为一下几种：

false，即不存在也不能用，不管怎么样，都不会再正式构建中出现
true，存在且能直接用，可以直接在正式构建中出现
null，存在但是不能直接用，需要收到打开，仅限于金丝雀版本以及beta版本

对于那种存在但是不能直接用null的特性，我们就需要手动去使用他，就是在属性FEATURES里面。
举例：

var ENV = {EmberENV: {FEATURES: {'link-to': true}}
};

有一个方式，可以直接打开所有就是把ENV.EmberENV.ENABLE_ALL_FEATURES设置为true。

这一部分，老夫也不能完全理解，大家可以看原文档:ember feature

（5）APP
在这里传一些配置项，举例而言，如果异步请求的域名不一致，那么可以在这里配置:

APP:{serverDomain:'http://you.domain'
}
if (environment === 'development') {ENV.APP.serverDomain='http://you.domain:8080';
}
if (environment === 'test') {ENV.APP.serverDomain='http://you.domain:8080';
}
if (environment === 'production') {ENV.APP.serverDomain='http://you.domain:8080';
}

用的时候只要引入一下就好了:

import ENV from 'your-application-name/config/environment'
let result = Ember.$.getJson(ENV.APP.serverDomain).then((result) => {return result});

ember-cli-build.js

这个文件，主要用来管理三方资源的。
先来看一下基础的配置，构建时的配置项：
默认为：

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults){var app = new EmberApp(defaults,{});
}

这里需要注意，如果你在打包后，需要上传到cdn的话，那么就要加一些配置：

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults){var app = new EmberApp(defaults,{//你的cdn地址，注意，这个，只有在生产环境才会生效，也就是在构建的时候使用ember build --productionprepend: 'http://path',//是否用md5，如果为null就是不用，那么生产的文件就是your-application-name.js,vendor.js以及your-application-name.css,vendor.css,如果为一个字符串，那么就是那个名字，否则，md5，生成的文件类似于: your-application-name-dc477601773d4043b0c461b2a0ae8aef.js,不一一列举。customHash: null});
}

在ember中，推荐的包管理工具为bower，例如，如果我们引入一个三方包，以最常用的bootstrap为例，
bower install bootstrap
除了这种方式，还可以直接把文件放到vendor目录下。

在把包下载或者是拷贝过来后，还没有完事，必须要在ember-cli-build.js中进行配置：

    app.import('vendor/package/package/a.css');app.import('bower_component/bootstrap/dist/css/bootstrap.min.css');

以上就可以在构建的时候，自动构建到build/asserts目录下。

下面主要说一下目录的结构

app

这个文件夹，使我们最重要的文件夹，其中我们的代码都会放在它下面，他的目录结构如下所示：

如上文所说，ember是基于broccoli.js做目录结构的管理的，所以说，结构也很清晰。

各种文件夹

components controllers helpers models routes 分别对应于ember中的对应的概念，也就是component controller helper model route 。其中，template中放的是模板文件，结构和上述类似，当使用ember-cli 命令行工具创建components 以及 routes的时候，会在对应的目录下，创建模板文件，其他的则没有。
例如，当使用
ember g component a/b，那么会创建components/a/b.js template/components/a/b.hbs。其他的同理。

app.js&resolver.js

这两个文件一般不需要进行更改
resolver.js 主要就是引用了ember-resolver的Resolver,就是用ES6重写了一下resolver。
app.js主要用来构建的，能够自动引入构建后的文件。
这两者我都不是十分了解，有大神能够解释一下也是极好的。

index.html

这个文件，就是就是最外层的父模板，也就是根dom，这个模板中有几个部分需要注意一下。

第一点为：其中有几个引入的文件，分别为vendor.css、 <project-name>.css、vendor.js、<project-name>.js，这个几个文件也就是编译后生成的文件。其中{{rootUrl}}也就是environment·js中的那个变量，默认为/ 不需要变动。如果是上传到cdn的话，在ember-cli-build.js 中配置后，在生产环境会进行替换。

第二点为：{{content-for}}。这里有一个helper {{content-for}}，{{content-for}}为一个供插件使用的钩子，使得插件可以向其中插入元素。在ember-cli的文档中是这么写的:

The app/index.html file lays the foundation for your application. This is where the basic DOM structure is laid out, the title attribute is set, and stylesheet/javascript includes are done. In addition to this, app/index.html includes multiple hooks - {{content-for ‘head’}} and {{content-for ‘body’}} - that can be used by addons to inject content into your application’s head or body. These hooks need to be left in place for your application to function properly however, they can be safely ignored unless you are directly working with a particular addon.

以{{content-for 'head'}}而言，ember-cli就会在其中加入<meta name="appname/config/environment">这个head，如果你删除了这个helper，那么会报错。

同理，{{content-for 'body'}}这个，会将app\templates\application.hbs插入进去。也就是body，使我们主要关注的内容。

app\templates\application.hbs

关于这个文件，有必要多说两句。如上所述，这个文件其实就是body，我们所有的模板都渲染在这里，要实现这样的动态的渲染，我们还需要安装一个插件liquid-fire liquid-fire.
首先是安装：npm install --save-dev liquid-fire
安装完成后，新增文件app/transitions.js。这个文件，定义了渲染规则。同时，也新增了一些helper，为liquid-if liquid-with liquid-outlet link-to。因为正常的helper没有渲染这个概念。
举例，我们可以这么写我们的application.hbs

{{liquid-outlet class="body-class"}}
//or {{liquid-box class="body-class"}}

那么，我们以后每一个生成的route，就都会渲染在这里。
app/transitions.js定义了如何渲染，比如说一下的内容：

export default function(){this.transition(this.fromRoute('route.route1'),this.toRoute('route.route2'),this.use('toRight'),this.reverse('toLeft'),);
}

当从路由route1 变化到 route2时，会有一个从左到右的动画，反之，子路由route2 变化到 route1时，会有一个从右到左的动画。这个如果不写的话，那么就是直接替换。当然还有一些高级的规则，自己可以看文档。

其他内容

例如想要修改端口(默认为8000)，那么只需要修改.ember-cli文件，如下：
{"port":8080}
取消原型链集成，ember中的Array string 都是集成了原有的原型链，会有一些额外的方法以及属性，默认是继承的，也就是说，你采用以下方法创建的都是一样的东西

let a = [1,2,3];
let b = Ember.A([1,2,3]);a.includes(1);//true
b.includes(1);//true

禁用方式如下，修改config/environment.js

ENV = {EmberENV: {EXTEND_PROTOTYPES: false//全部禁用/*** 部分禁用EXTEND_PROTOTYPES: {String: false,Array: true}*/}
}

注意，如果禁用了的话，那么就不会享受到一些双向绑定的好处了，比如使用{{#each}}来遍历Array的话，如果变化了就没法感知了。在此建议，全部使用Ember.A来初始化数据，同时不要禁用继承。

https://guides.emberjs.com/v2.11.0/configuring-ember/configuring-your-app/
https://guides.emberjs.com/v2.11.0/configuring-ember/configuring-ember-cli/
https://guides.emberjs.com/v2.11.0/configuring-ember/disabling-prototype-extensions/
https://guides.emberjs.com/v2.11.0/configuring-ember/specifying-url-type/
https://www.airpair.com/ember.js/posts/animations-in-emberjs-with-liquidfire
https://ember-cli.com/user-guide/