Embeer.js Application initializer()用法及代码示例

Ember.js 是一个利用 component-service 模式的 JavaScript Web 框架。它是Open-Sourced。 Ember Js 应用程序启动时可以使用初始化程序来设置用户的环境及其函数。

用法:

ember generate initializer <initializer-name>

属性：Initializer 对象有四个属性用于定义其执行过程：

1. name:这用于定义初始化程序的名称。这一定是独一无二的。
2. before:这用于确保当前初始化程序在给定初始化程序之前运行
3. after:这用于确保当前初始化程序在给定初始化程序之后运行
4. initialize:这用于调用初始化对象的initialize()函数。

方法：

• initialize():它是指定在此初始化程序过程中运行的代码的函数。

创建一个 Ember 应用程序：现在我们需要创建一个 Ember 应用程序。转到要保存应用程序的目录并运行命令：

ember create my-app

创建 Ember 应用程序

示例 1：我们将创建一个初始化程序‘first’，它将是应用程序启动后第一个被调用的初始化程序。

运行命令：

ember generate initializer first

在初始化命令中的命令创建的first.js文件中添加以下代码。

import { debug } from '@ember/debug'; 
  
export function initialize() { 
  debug('This is The First initializer!'); 
} 
  
export default { 
  name: 'first', 
  initialize 
};

输出：

This is The First initializer!

示例 2：如果我们愿意，我们可以只使用一个初始值设定项，但在某些情况下，我们可能需要多个初始值设定项。然后我们需要定义哪个初始化程序按什么顺序执行。现在，为了使用‘before’和‘after’的函数，我们将创建另外两个初始化程序‘start’和‘second’。

运行命令：

ember generate initializer second
ember generate initializer start

现在将以下代码粘贴到 secondary.js 中。

import { debug } from '@ember/debug'; 
  
export function initialize() { 
  debug('This is The Second initializer!'); 
} 
  
export default { 
  name: 'second', 
  after: 'first', 
  initialize 
};

现在将以下代码粘贴到 start.js 中：

import { debug } from '@ember/debug'; 
  
export function initialize() { 
  debug('This is The Starting initializer!'); 
} 
  
export default { 
  name: 'start', 
  before: 'first', 
  initialize 
};

由于我们在start.js中使用了before属性，因此它在first.js之前执行，而second.js在first.js之后执行，因为我们使用了after关键字。

运行命令：

ember server

输出：转到 localhost:4200 并打开控制台以查看所需的行为。

初始化器输出