使用 Ext JS 编写的代码的模块化和重用答案

【问题标题】：Modularization & reuse of code written using Ext JS使用 Ext JS 编写的代码的模块化和重用
【发布时间】：2026-02-02 09:55:01
【问题描述】：

我需要清楚地了解如何模块化我的利用 Ext JS 的 JavaScript 代码。我的目标是创建扩展 Ext JS 小部件的自定义类，在多个 JavaScript 文件（.js 文件）之间分发代码。

我查看了Ext.Loader 上的文档，但我并没有完全遵循确保类依赖解析的方法。鉴于代码顺序化是根据依赖关系，我在单个 JavaScript 文件中的代码可以正常工作。但是，一旦我在几个 JavaScript 文件中破坏代码并想在多个页面中使用，我的依赖关系就会变得混乱，因为我的所有页面都需要具有不同依赖关系的不同类。

考虑到我在常规后端编码中很容易实现代码分离和重用，这让我感到困惑。请帮忙输入。我正在使用 Ext JS 4.1.1

【问题讨论】：

标签： javascript extjs dependencies reusability modularization

【解决方案1】：

要在创建自定义组件时启用依赖关系解析，请使用 Ext.define 的 requires 参数。它看起来像这样：

Ext.define("My.custom.Widget", {
    alias: "widget.mywidget",
    requires: [
        "My.custom.TextField",
        "My.custom.ComboBox",
        "My.custom.Store"
    ],
    constructor: function(config){}
    /* ... */
});

有关更多信息，您应该阅读 Sencha 网站上的Dynamic Loading and New Class System。它更详细地介绍了动态加载的工作原理。一旦你掌握了它，它实际上真的很酷。

差点忘了。您可以在需要时显式调用Ext.require 来加载某些文件。它支持通配符、别名等。还有Ext.exclude可以防止某些文件加载。

【讨论】：

这里要注意的是，如果启用了 Loader，如果您使用指南中描述的命名约定和 MVC 模式，则不必显式使用 requires 或 require 方法。

【解决方案2】：

Sencha 有一些非常棒的指南可以帮助您掌握框架。 http://docs.sencha.com/ext-js/4-1/#!/guide

一个好的开始是这个：http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture 应用程序架构。本指南清楚地向您展示了如何模块化您的代码以及 Loader 所期望的文件夹结构。请看一下。

【讨论】：