javascript ExtJS：需要的重点是什么？

ExtJS: What's the point of requires?

提问by incutonez

I've been trying to figure out what requires does in Ext JS 4, and I can't seem to come up with a reasonable answer. Let's say I have the following code:

我一直在试图弄清楚 Ext JS 4 中的 requires 功能，但我似乎无法想出一个合理的答案。假设我有以下代码：

app.js

应用程序.js

Ext.Loader.setConfig({
  enabled: true
});

Ext.Loader.setPath('Ext.ux', 'examples/ux');

Ext.application({
  name: 'Test',
  appFolder: 'app',
  controllers: ['TheController'],
  requires: ['Test.Utils', 'Test.Utils2'],  // I don't think this does anything... couldn't find this option for Ext.application
  launch: function() {
    Ext.create('Ext.Viewport', {
      layout: 'border',
      items: [{
        xtype: 'thegrid',
        region: 'center',
        title: 'blah!'
      }]
    });
  }
});

app/controller/TheController.js

应用程序/控制器/TheController.js

Ext.define('Test.controller.TheController', {
  extend: 'Ext.app.Controller',
  models: ['TheModel'],
  stores: ['TheStore'],
  views: ['TheGrid'],
  init: function() {
  }
});

app/view/TheGrid.js

应用程序/视图/TheGrid.js

Ext.define('Test.view.TheGrid', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.thegrid',
  requires: ['Test.store.TheStore'],
  store: 'TheStore',
  columns: [
    {header: 'Name', dataIndex: 'name'},
    {header: 'Phone', dataIndex: 'phone'},
    {header: 'Hello', dataIndex: 'hello'}
  ]
});

app/store/TheStore.js

应用程序/商店/TheStore.js

Ext.define('Test.store.TheStore', {
  extend: 'Ext.data.Store',
  requires: ['Test.model.TheModel', 'Test.Utils'],
  model: 'Test.model.TheModel',
  data: [
    {name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()},
    {name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'},
    {name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'}
  ]
});

app/model/TheModel.js

应用程序/模型/TheModel.js

Ext.define('Test.model.TheModel', {
  extend: 'Ext.data.Model',
  fields: [
    {name: 'name', type: 'string'},
    {name: 'phone', type: 'string'},
    {name: 'hello', type: 'string'}
  ]
});

app/Utils.js

应用程序/Utils.js

Ext.define('Test.Utils', {
  singleton: true,
  requires: ['Test.Utils2'],
  getText: function() {
    return Test.Utils2.hello + 'world';
  }
});

app/Utils2.js

应用程序/Utils2.js

Ext.define('Test.Utils2', {
  singleton: true,
  hello: 'hello'
});

I realize this is a really long example, but I needed to make sure I fully portrayed what I was doing. Utils relies on Utils2 because it needs to call Utils2's hello variable. The rest of the code is setting up a grid and calling the Utils.getText function in TheStore. Firebug throws a Test.Utils is undefinedon line 6 in TheStore.js, and at that point in time, Test.Utils obviously doesn't exist, but Test.Utils2 does.

我意识到这是一个很长的例子，但我需要确保我完全描绘了我在做什么。Utils 依赖于 Utils2，因为它需要调用 Utils2 的 hello 变量。其余代码是设置网格并调用 TheStore 中的 Utils.getText 函数。FirebugTest.Utils is undefined在 TheStore.js 的第 6 行抛出 a ，在那个时间点，Test.Utils 显然不存在，但 Test.Utils2 存在。

My question is... why does Utils2 exist, but Utils doesn't? I thought requires brought in the classes that I needed, thus allowing me to use them, but I guess I'm wrong. I've read the Sencha docs and a multitude of threads, but nothing really made sense, and it doesn't really explain this example. Can anyone shed some insight here? I'd appreciate it.

我的问题是……为什么 Utils2 存在，而 Utils 不存在？我认为需要引入我需要的类，从而允许我使用它们，但我想我错了。我已经阅读了 Sencha 文档和大量线程，但没有什么真正有意义的，它并没有真正解释这个例子。任何人都可以在这里发表一些见解吗？我会很感激的。

**Also, I realize I'm doing some dumb things here, but it's merely for an example, so I'm not looking to combine the global Utils or not use globals at all... I'm just trying to figure out the requires option.

**另外，我意识到我在这里做了一些愚蠢的事情，但这只是一个例子，所以我不想结合全局实用程序或根本不使用全局变量......我只是想弄清楚需要选项。

UPDATE

更新

Thanks to Izhaki's answer below, I figured something out. If I want to use a required class in a class I'm defining, I would have to wait for the object to get created (IE, use initComponent), so my store and grid code changes to:

感谢 Izhaki 在下面的回答，我想出了一些办法。如果我想在我定义的类中使用必需的类，我将不得不等待对象被创建（IE，使用 initComponent），所以我的商店和网格代码更改为：

app/store/TheStore.js

应用程序/商店/TheStore.js

Ext.define('Test.store.TheStore', {
  extend: 'Ext.data.Store',
  requires: ['Test.model.TheModel'],
  model: 'Test.model.TheModel'
});

app/view/TheGrid.js

应用程序/视图/TheGrid.js

Ext.define('Test.view.TheGrid', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.thegrid',
  requires: ['Test.store.TheStore'],
  store: 'TheStore',
  columns: [
    {header: 'Name', dataIndex: 'name'},
    {header: 'Phone', dataIndex: 'phone'},
    {header: 'Hello', dataIndex: 'hello'}
  ],
  // This is the change that works
  initComponent: function() {
    this.callParent();
    this.store.loadData([
      {name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()},
      {name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'},
      {name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'}
    ]);
  }
});

This works, but my last question is... do I have to have the requires for TheModel in TheStore, and/or TheStore in TheGrid? It seems like TheController is taking care of all of those requires because I can use Test.Utils in TheGrid, but TheGrid doesn't specifically state that it requires Test.Utils.

这有效，但我的最后一个问题是......我是否必须在 TheStore 中拥有 TheModel 和/或 TheStore 中的 TheStore 需求？似乎 TheController 正在处理所有这些要求，因为我可以在 TheGrid 中使用 Test.Utils，但 TheGrid 没有明确说明它需要 Test.Utils。

Also, this examplefrom the Sencha docs makes me more confused because I'm clearly not using Test.Utils until TheStore is created, but this example seems like it can use the Child class without having to wait for it to initialize (using initComponent).

此外，来自 Sencha 文档的这个示例让我更加困惑，因为我显然在创建 TheStore 之前没有使用 Test.Utils，但是这个示例似乎可以使用 Child 类而无需等待它初始化（使用 initComponent） .

采纳答案by Izhaki

This is actually not a dumb question at all.

这实际上根本不是一个愚蠢的问题。

You can look at requires as a way to tell ExtJS:

您可以将 requires 视为告诉 ExtJS 的一种方式：

"When you construct an object of this class, please make sure to dynamically load the required scripts first".

“当你构造这个类的对象时，请确保首先动态加载所需的脚本”。

You are right about this line:

你是对的这条线：

requires: ['Test.Utils', 'Test.Utils2'],

not being needed in app.js, reason being is that the application already has:

中不需要app.js，原因是该应用程序已经具有：

controllers: ['TheController'],

which is the same as saying you require the js script in which TheControllerresides (any model/view/controller/store definition also mean that the related scripts are required, ie will be dynamically loaded).

这与说您需要TheController驻留的 js 脚本相同（任何模型/视图/控制器/商店定义也意味着需要相关脚本，即将被动态加载）。

TheControllerhas:

TheController拥有：

requires: ['Test.model.TheModel', 'Test.Utils'],

which will load these dynamically - this is why the same requiresis not needed it app.js;

这将动态加载这些 - 这就是为什么requires不需要它的原因app.js；

The reason you get Firebug throwing Test.Utilsis undefined is that you give a config (hello) with a reference to an object that is not yet dynamically loaded - there's no Test.Utilsin the scope until TheStoreis constructed.

您抛出 Firebug 的原因Test.Utils是未定义的，因为您提供了一个 config ( hello) ，其中包含对尚未动态加载的对象的引用 -Test.Utils在TheStore构造之前，范围内没有。

回答by Neil McGuigan

1. HasMany relationships simply don't work without it

2. It helps JSBuilder know which files to include. For example, if your Viewport uses border layout, it will incorrectly not be included, and you have to use uses or requires to include it.

1. 没有它，HasMany 关系根本无法工作

2. 它帮助 JSBuilder 知道要包含哪些文件。例如，如果您的 Viewport 使用边框布局，它将错误地不被包含，您必须使用 uses 或 requires 来包含它。