EmberJS - 快速指南
EmberJS - Overview
什么是Ember.js？
Ember.js是一个开源的免费JavaScript客户端框架，用于开发Web应用程序。 它允许通过提供包含数据管理和应用程序流的完整解决方案来构建客户端JavaScript应用程序。
Ember.js的原始名称是SproutCore MVC framework 。 它由Yehuda Katz开发，最初于in December 2011 。 Ember.js的稳定版本为2.10.0，于2016年11月28日发布。
Why Ember.js?
请考虑以下几点来理解Ember.js的使用 -
Ember.js是MIT许可下的开源JavaScript框架。
它使用HTMLBars模板引擎提供新的绑定语法，该引擎是HTMLBars模板引擎的超集。
它提供了Glimmer rendering engine来提高渲染速度。
它提供了Command Line Interface实用程序，可将Ember模式集成到开发过程中，并可轻松关注开发人员的工作效率。
它支持data binding以创建两个属性之间的链接，当一个属性更改时，另一个属性将使用新值进行升级。
Ember.js的特点
以下是Ember.js的一些最突出的功能 -
Ember.js用于创建可重用和可维护的JavaScript Web应用程序。
Ember.js将HTML和CSS作为开发模型的核心。
它提供了实例初始化程序。
路由是Ember.js的核心功能，用于管理URL。
Ember.js提供Ember Inspector工具，用于调试Ember应用程序。
如果应用程序的内容发生变化，Ember.js使用有助于自动更新模型的模板。
EmberJS - Installation
在系统中配置Ember.js很容易。 通过使用Ember CLI（命令行界面）实用程序，您可以创建和管理您的Ember项目。 Ember CLI处理不同类型的应用程序资产管理，例如连接，缩小和版本控制，还提供生成组件，路由等的生成器。
要安装Ember CLI，您需要具有以下依赖项 -
Git - 它是一个开源版本控制系统，用于跟踪文件中的更改。 有关更多信息，请查看git的官方网站。 Ember使用Git来管理其依赖项。
Installing Git on Linux :使用此链接在Linux Installing Git on Linux安装Git - http://git-scm.com/download/linux
Installing Git on Mac :使用此链接在Mac OS上安装Git - https://git-scm.com/download/mac
Installing Git on Linux :使用此链接在Windows Installing Git on Linux安装Git - https://git-scm.com/download/win
Node.js and npm - Node.js是一个开源的，用于开发服务器端和网络应用程序。 它是用JavaScript编写的。 NPM是一个节点包管理器，用于安装，共享和管理项目中的依赖项。 Ember CLI使用Node.js运行时和npm来获取依赖项。
Bower - 用于管理HTML，CSS，JavaScript，图像文件等组件，可以使用npm进行安装。
Watchman - 此可选依赖项可用于监视文件或目录，并在更改时执行某些操作。
PhantomJS - 此可选依赖项可用于运行基于浏览器的单元测试以与网页交互。
安装Ember CLI
Ember CLI将Ember模式集成到开发过程中，并轻松关注开发人员的工作效率。 它用于使用Ember.js和Ember数据创建Ember应用程序。
你可以使用npm安装Ember，如下面给出的命令 -
npm install -g ember-cli
要安装测试版，请使用以下命令 -
npm install -g ember-cli@2.10
要检查Ember的成功安装，请使用以下命令 -
ember -v
执行上述命令后，它将显示如下内容 -
ember-cli: 2.10.1
node: 0.12.7
os: win32 ia32
EmberJS - Core Concepts
Ember.js有以下核心概念 -
- Router
- Templates
- Models
- Components
路由器和路由处理程序
该URL通过在地址栏中输入URL来加载应用程序，用户将单击该应用程序中的链接。 Ember使用路由器将URL映射到路由处理程序。 路由器将现有URL与路由匹配，然后用于加载数据，显示模板和设置应用程序状态。
Route处理程序执行以下操作 -
它提供了模板。
它定义了模板可访问的模型。
如果用户没有访问应用程序特定部分的权限，则路由器将重定向到新路由。
模板(Templates)
模板是最终用户的强大UI。 Ember模板提供使用Handlebars模板语法的应用程序的用户界面外观。 它构建了前端应用程序，就像常规HTML一样。 它还支持正则表达式并动态更新表达式。
Model
路由处理程序将持久保存信息的模型呈现给Web服务器。 它操纵存储在数据库中的数据。 该模型是扩展Ember数据功能的简单类。 Ember Data是一个与Ember.js紧密耦合的库，用于处理存储在数据库中的数据。
组件 (Components)
该组件控制用户界面行为，包括两个部分 -
一个用JavaScript编写的模板
源代码文件，用JavaScript编写，提供组件的行为。
EmberJS - Creating and Running Application
您可以在系统中轻松配置Ember.js. EmberJS安装章节中介绍了Ember.js的安装 。
创建应用程序
让我们使用Ember.js创建一个简单的应用程序。 首先创建一个用于创建应用程序的文件夹。 例如，如果您已创建“emberjs-app”文件夹，则导航到此文件夹为 -
$ cd ~/emberjs-app
在“emberjs = app”文件夹中，使用新命令创建一个新项目 -
$ ember new demo-app
创建项目时，new命令提供以下具有文件和目录的目录结构 -
|-- app
|-- bower_components
|-- config
|-- dist
|-- node_modules
|-- public
|-- tests
|-- tmp
|-- vendor
bower.json
ember-cli-build.js
package.json
README.md
testem.js
app - 它指定模型，路径，组件，模板和样式的文件夹和文件。
bower_components/bower.json - 用于管理HTML，CSS，JavaScript，图像文件等组件，可以使用npm进行安装。 bower_components目录包含所有Bower组件， bower.json包含由Ember，Ember CLI Shims和QUnit安装的依赖项列表。
config - 它包含environment.js目录，该目录用于配置应用程序的设置。
dist - 它包括构建应用程序时部署的输出文件。
node_modules/package.json - NPM是Node.js的节点包管理器，用于安装，共享和管理项目中的依赖项。 package.json文件包含应用程序的当前npm依赖项，列出的软件包安装在node_modules目录中。
public - 它包括图像，字体等资产。
vendor - 这是一个目录，其中前端依赖项如JavaScript，CSS不受Bower控制。
tests/testem.js - 自动化测试存储在tests文件夹下，Ember CLI的测试运行器testem安排在testem.js 。
tmp - 它包含Ember CLI的临时文件。
ember-cli-build.js - 它指定了如何使用Ember CLI构建应用程序。
运行应用程序
要运行该应用程序，请导航到新创建的项目目录 -
$ cd demo-app
我们已经创建了新项目，并且可以使用下面给出的命令运行 -
$ ember server
现在打开浏览器并导航到http://localhost:4200/ 。 您将获得Ember Welcome页面，如下图所示 -
EmberJS - Object Model
在Ember.js中，所有对象都是从Ember.Object派生的。 面向对象的分析和设计技术称为object modeling 。 Ember.Object通过使用类系统支持mixins和构造函数方法等功能。 Ember使用Ember.Enumerable接口来扩展JavaScript Array原型，以便为数组提供观察更改，还使用格式化和本地化方法来扩展String prototype 。
下表列出了Ember.js中不同类型的对象模型及其描述 -
| S.No. | 类型和描述 |
|---|---|
| 1 | 类和实例 类是模板或蓝色打印，具有变量和函数的集合，而实例与该类的对象相关。 您可以使用Ember.Object的extend()方法创建新的Ember类。 |
| 2 | 重新打开类和实例 这只是更新类实现而不重新定义它。 |
| 3 | 计算属性 计算属性将函数声明为属性，Ember.js在需要时自动调用计算属性，并在一个变量中组合一个或多个属性。 |
| 4 | 计算属性和聚合数据 computed属性访问数组中的所有项以确定其值。 |
| 5 | Observers 观察者观察诸如计算属性之类的属性并更新计算属性的文本。 |
| 6 | Bindings 绑定是Ember.js的一个强大功能，它有助于在两个属性之间创建链接，如果其中一个属性发生更改，另一个属性会自动更新。 |
EmberJS - Router
路由器是EmberJs的核心功能，它将URL转换为一系列模板并表示应用程序的状态.Ember使用路由器将URL映射到路由处理程序。 路由器将当前URL与用于加载数据，显示模板和设置应用程序状态的其他路由进行匹配。
路由处理程序执行一些操作，例如 -
它提供了模板。
它定义了模型，模板可以访问它。
如果没有用户访问应用程序特定部分的权限，则路由器将重定向到新路由。
下表列出了Ember.js中的不同路由器及其描述 -
| S.No. | 类型和描述 |
|---|---|
| 1 | 定义路由 路由器将当前URL与负责显示模板，加载数据和设置应用程序状态的路由进行匹配。 |
| 2 | 指定路线的模型 要指定路径模型，您需要一个模板来显示模型中的数据。 |
| 3 | 渲染模板 路线用于将外部模板渲染到屏幕。 |
| 4 | Redirecting 它是一种URL重定向机制，可在未找到请求的URL时将用户重定向到其他页面。 |
| 5 | 防止和重试过渡 transition.abort()和transition.retry()方法可用于在路由转换期间分别中止和重试转换。 |
| 6 | 加载/错误子状态 Ember路由器提供路由加载的信息以及加载路由时发生的错误。 |
| 7 | 查询参数 查询参数在表示为可选键值对的URL中“？”标记的右侧进入视图。 |
| 8 | 异步路由 Ember.js路由器能够使用异步路由处理应用程序中的复杂异步逻辑。 |
EmberJS - Templates
模板用于跨多个页面创建standard layout 。 更改模板时，基于该模板的页面会自动更改。 模板提供standardization controls 。
下表显示了有关模板的更多详细信息 -
| S.No. | 类型和描述 |
|---|---|
| 1 | 把手基础知识 Handlebars模板库允许通过包含静态HTML和动态内容来构建丰富的用户界面。 |
| 2 | 内置助手 助手为模板提供额外的功能，并将模型和组件的原始值修改为适合用户的格式。 |
| 3 | Conditionals Ember.js定义了两个有助于控制程序流的条件语句。 |
| 4 | 显示项目列表 您可以使用#each帮助程序显示数组中的项列表。 |
| 5 | 显示对象中的键 您可以使用#each-in helper在对象中显示键。 |
| 6 | Links {{link-to}}组件可用于创建到路由的链接。 |
| 7 | Actions 可以使用{{action}}帮助程序使HTML元素可单击。 |
| 8 | 输入助手 可以使用Ember.js中的{{input}}和{{textarea}}帮助程序创建常用表单控件 |
| 9 | 发展助手 使用Handlebars和Ember的一些助手可以更容易地模板开发。 |
| 10 | 写帮助者 您可以向模板添加额外的功能，并将模型和组件的原始值转换为适合用户的格式。 |
EmberJS - Components
Ember.js组件使用W3C Web组件规范并提供真正的封装UI小部件。 它包含三个主要规范作为templates ， shadow DOM和custom elements 。 该组件在data-template-name中声明，该名称具有路径名而不是普通字符串，并以“components /”为前缀。
下表列出了行动的行动事件 -
| S.No. | 动作事件和描述 |
|---|---|
| 1 | 定义组件 您可以在Ember.js中轻松定义组件，并且每个组件的名称中都必须包含短划线。 |
| 2 | 组件生命周期 组件生命周期使用某些方法，以便在组件生命周期的特定时间执行代码。 |
| 3 | 将属性传递给组件 组件不直接在模板范围中访问属性。 因此，只需在组件减速时声明属性。 |
| 4 | 包装组件中的内容 您可以使用模板将内容包装在组件中。 |
| 5 | 自定义组件的元素 您可以使用JavaScript中的Ember.Component的子类来自定义组件的元素，例如属性，类名。 |
| 6 | 使用Block Params 组件中传递的属性可以在块表达式中返回结果。 |
| 7 | 处理事件 双击，悬停，按键等用户事件可由事件处理程序处理。 为此，请将事件名称应用为组件上的方法。 |
| 8 | 使用操作触发更改 组件可以使用操作触发更改并与事件通信。 |
EmberJS - Models
Model是一个扩展Ember Data功能的类。 当用户刷新页面时，页面的内容应由模型表示。 在Ember.js中，每条路线都有一个相关的模型。 该模型有助于提高应用程序的性能。 Ember Data可以处理服务器中存储的数据，也可以轻松使用socket.io和Firebase或WebSockets等流媒体API。
核心概念
- Store
- Models
- Records
- Adapter
- Caching
Store
该商店是应用程序中可用的所有记录的中央存储库和缓存。 路径和控制器可以访问应用程序的存储数据。 自动创建DS.Store以在整个对象之间共享数据。
import Ember from 'ember';
export default Ember.Route.extend ({
model() {
return this.store.find();
}
});
Models
Model是一个扩展Ember Data功能的类，它指定与其他对象的关系。 当用户刷新页面时，页面的内容应由模型表示。
import DS from 'ember-data';
export default DS.Model.extend ({
owner: DS.attr(),
city: DS.attr()
});
Records
记录是包含信息的模型实例，该信息从服务器加载，您可以通过其模型type和ID来标识记录。
//It finds the record of type 'person' and an 'ID' of 1
this.get('store').findRecord('person', 1); // => { id: 1, name: 'steve-buscemi' }
Adapter
适配器是一个对象，负责将请求的记录从Ember转换为对特定服务器后端的适当调用。 例如，如果要查找ID为1的人，则Ember将使用HTTP作为/person/1加载URL。
Caching
记录可以由存储自动缓存，并在您第二次从服务器加载记录时返回相同的对象实例。 这样可以提高应用程序的性能，并尽快向用户显示应用程序UI。
下表列出了有关模型的详细信息 -
| S.No. | 模型方式和描述 |
|---|---|
| 1 | 定义模型 Model是一个简单的类，它扩展了Ember Data的功能。 |
| 2 | 寻找记录 您可以使用Ember数据存储检索记录。 |
| 3 | 创建和删除记录 您可以在模型实例上创建和删除记录。 |
| 4 | Relationships Ember.js提供关系类型以指定模型彼此之间的关系。 |
| 5 | 将记录推入商店 您可以将记录推送到商店的缓存中，而无需从应用程序请求记录。 |
| 6 | 处理元数据 元数据是用于特定模型或类型而不是使用记录的数据。 |
| 7 | 自定义适配器 Ember.js适配器指定如何在后端数据存储中保留数据，例如URL格式和REST API标头。 |
EmberJS - Managing Dependencies
Ember使用NPM和Bower来管理在针对NPM的package.json和针对Bower的bower.json中定义的依赖关系。 例如，您可能需要在开发Ember应用程序时为Ember安装的样式表安装SASS。 要实现此目的，请使用Ember Addons共享可重用库。 如果要安装任何CSS框架或JavaScript datepicker依赖项，请使用Bower包管理器。
Addons
Ember CLI可用于使用以下命令安装Ember插件 -
ember install ember-cli-sass
ember install command将所有依赖项保存到相应的配置文件中。
Bower
它是Web的包管理器，用于管理HTML，CSS，JavaScript或图像文件的组件。 它基本上维护和监视所有包并检查新的更新。 它使用配置文件bower.json来跟踪放置在Ember CLI项目根目录的应用程序。
您可以使用以下命令安装项目依赖项 -
bower install <dependencies> --save
Assets
您可以将第三方JavaScript放在项目的vendor/文件夹中，这些JavaScript不是Addon或Bower软件包，而是将自己的资产（如robots.txt，favicon等）放在项目的public/文件夹中。 在开发Ember应用程序时，Ember未安装的依赖项应该包含在清单文件ember-cli-build.js 。
AMD JavaScript模块
您可以将资产路径作为第一个参数，将模块和导出列表作为第二个参数。 您可以将这些资产包含在ember-cli-build.js清单文件中，如下所示:
app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
exports: {
'ic-ajax': [
'default',
'defineFixture',
'lookupFixture',
'raw',
'request'
]
}
});
环境特定资产
通过将对象定义为第一个参数（即环境名称）并且对象的值应该用作该环境中的资产，可以在不同的环境中使用不同的资产。 在ember-cli-build.js清单文件中，您可以包括 -
app.import ({
development: 'bower_components/ember/ember.js',
production: 'bower_components/ember/ember.prod.js'
});
其他资产
将所有资产放入public/文件夹后，它们将被复制到dist /目录中。 例如，如果您复制放置在public/images/favicon.ico文件夹中的图标，则会将其复制到dist/images/favicon.ico目录中。 可以在vendor/文件夹中手动添加第三方资产，也可以通过import()选项使用Bower包管理器。 未使用import()选项添加的资产将不会出现在最终版本中。
例如，考虑以下代码行将资产导入dist/文件夹。
app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf');
上面的代码行在dist/font-awesome/fonts/fontawesomewebfont.ttf创建了一个字体文件。 您也可以将上述文件放在不同的路径上，如下所示 -
app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
destDir: 'assets'
});
它将复制dist/assets/fontawesome-webfont.ttf的字体文件。
EmberJS - Application Concerns
可以使用Ember.Application类扩展Ember应用程序，该类声明和配置有助于构建应用程序的对象。
Application在运行时创建Ember.ApplicationInstance类，用于管理其方面，并充当实例化对象的所有者。 简而言之， Ember.Application类定义应用程序， Ember.ApplicationInstance class管理其状态。
下表列出了有关模型的更多详细信息 -
| S.No. | 模型方式和描述 |
|---|---|
| 1 | 依赖注入 它是一个将一个对象的依赖项提供给另一个对象并由Ember应用程序用于声明和实例化它们之间的对象和依赖项类的过程。 |
| 2 | Initializers 初始化程序用于在应用程序引导时配置它。 |
| 3 | Services Service是一个Ember对象，可以在应用程序的不同部分中使用。 |
| 4 | 运行循环 它是应用程序的大部分内部代码发生的区域。 |
EmberJS - Configuring Ember.js
可以配置Ember.js来管理应用程序的环境。 配置Ember.js包括以下主题 -
| S.No. | 配置方式和说明 |
|---|---|
| 1 | 配置App和Ember CLI 您可以配置Ember App和CLI以管理应用程序的环境。 |
| 2 | 禁用原型扩展并指定URL类型 可以通过将EXTEND_PROTOTYPES标志设置为false并使用Ember路由器选项指定URL类型来禁用原型扩展。 |
| 3 | 嵌入应用程序和功能标志 您可以通过更改根元素将应用程序嵌入到现有页面中，并且可以根据项目的配置启用功能标记。 |
EmberJS - Ember Inspector
Ember检查器是一个浏览器插件，用于调试Ember应用程序。 灰烬检查员包括以下主题 -
| S.No. | 灰烬检查员方式和描述 |
|---|---|
| 1 | 安装Inspector 您可以安装Ember检查器来调试您的应用程序。 |
| 2 | 对象检查器 Ember检查器允许与Ember对象进行交互。 |
| 3 | 视图树 视图树提供应用程序的当前状态。 |
| 4 | 检查路由，数据选项卡和库信息 您可以看到检查器定义的应用程序路径列表，“数据”选项卡用于显示模型类型列表。 |
| 5 | 调试承诺 灰烬检查员根据他们的状态提供承诺。 |
| 6 | 检查对象和渲染性能 使用Container检查对象实例，并使用“渲染性能”选项计算应用程序的渲染时间。 |
