在应用程序启动时预加载 Ext JS 和自定义 JavaScript 文件

Posted 2023-02-26

【中文标题】在应用程序启动时预加载 Ext JS 和自定义 JavaScript 文件

【英文标题】：Preloading Ext JS & custom JavaScript files at application boot time

【发布时间】：2012-08-30 03:53:13

【问题描述】：

我正在创建一个 Intranet 应用程序，其 UI 主要使用 Ext JS 4.1.1

我创建了几个自定义 javascript 类，扩展 Ext JS 控件和其他用于 UI、验证、通信等的代码。

鉴于我的代码不是很大，并且我的应用程序将部署在一个受控且众所周知的环境中，我理想情况下希望在应用程序调用（启动）时预先加载所有 .js 文件。我想知道一种方法来实现这一点，主要来自 Ext JS 的领域。

【参考方案1】：

你想做的事真的很平常。查看部署部分，了解如何使用 Sencha SDK 创建一个文件，其中包含所有扩展 extjs 组件的自定义 javascript 类here

希望对你有用；）

【参考方案2】：

截至本月，Sencha（测试版）发布了改进的构建工具。实际上，它是用 Java 完全重写的（我相信）。 Sencha Cmd是名字，前任应该是这样的！

编译时间已缩短至其前身的十分之一，并且包/构建现在使用强大的命令处理器进行配置。

与其他构建框架和 CI 服务器的集成现在是重中之重，并通过将工具与 ANT 集成来实现。

我刚刚花了几个小时将一个项目从旧的Sencha SDK Tools 迁移到新的Sencha Cmd。我特别喜欢新的编译器。

文档已经很不错了。

Blog post 介绍了Sencha Cmd Official SDK documentation - 共有 10 篇关于该主题的文章，不要错过，尤其是 Compiler documentation

对于遵循 Sencha 建议的标准（单页）模式的小型项目，实际上有一系列更高级的命令来管理整个应用程序的创建和构建过程。

此外，Sencha 现在有一个multi-page applications 的模式。

而且您始终可以直接使用编译器并在其之上实现您自己的构建过程。这就是我们在项目中所做的。

【参考方案3】：

有一个类叫Ext.Loader

【参考方案4】：

这更像是一个服务器端问题，而不是 Ext JS 问题。您想预先包含所有页面吗？获取一个 JavaScript 压缩器来将您的文件连接在一起，缩小整个包，并为您的网络应用程序的每个页面添加一个 <script> 标记。

我还开发了一个大量使用 Ext JS（3 和 4）的 Intranet Web 应用程序，但我们有相当大的代码库。由于我们使用 Tomcat，因此我们有一个 Java 类，其中包含每个页面上的标准文件，以及该页面所需的任何文件组或单个文件。类似的东西也可能对你有用。

您可以在需要时使用Ext.Loader 进行动态加载，但这听起来不像您想要的。不过，如果您的代码库扩展并且您需要更好的解决方案，这仍然是一个选择。

编辑：正如 cmets 中所述，我的原始答案未能解决 Sencha SDK Tools。我觉得将我的回复作为修改后答案的一部分会更有益。

虽然这个任务可能正是 Sencha SDK 的设计目的，但我觉得该产品对于生产环境来说还不够成熟。在撰写本文时，当前版本是 2.0.0 Beta 3. Beta，这意味着它仍在开发中，它显示。文档几乎不存在，官方论坛上充斥着声称该产品根本不起作用的主题。在这一点上，它只不过是一个可以玩的玩具。我见过的最有用的文档是Sencha SDK Tools 2.0 and ExtJS4: The Missing Docs，作者甚至以“SDK 工具需要大量工作”结尾。

当我为生产环境选择产品时，我想要稳定、可靠、具有良好文档和质量支持的产品。 Sencha SDK 工具不是这些东西。然而。

【讨论】：

不确定如何谈论 Ext4、缩小、Ext.Loader 而不提及 Sencha SDK？ OP 正在描述使用 Sencha SDK 创建缩小的单文件 javascript 文件的最佳方案。抱歉，因为没有指出明显的解决方案而被否决。

我删除了反对票。但是，我不同意您的结论，即 Sencha SDK 工具“只不过是一个玩具”。 我们目前在构建过程中成功地使用了该工具，我认为许多其他人也这样做了。是的，文档可以改进，并且获得工作设置可能不会像应有的那样防故障。每个工具都涉及一个学习过程。如果您准备阅读所需的内容并接受初始设置可能比从命令行运行两个命令更复杂，那么我相信您可以使用它。

回想起来，“玩具”这句话是没有必要的。我知道很多团体都在使用它，我很高兴它对你有用。但我想说的是，这些工具仍然会发生相当多的变化，在这一点上可能不值得投资，而不是找到一个或多或少可以工作的现有工具——盒子。

Sencha 的 SDK 工具实际上使用 yuicompressor 进行缩小 - 所以这里没有惊喜或测试版的东西。 SDK 工具添加了两个重要功能：(1) 确定依赖关系并创建所需 javascript 文件的列表 (2) 支持从生产构建中删除调试代码（标记为 // .. // )。

啊，这就是 // 语句的用途。我已经看到它们分散在 Ext JS 源代码中，但我不知道它们是用于自动删除代码的。有趣。