为基于JQuery/JQueryUI的复杂应用程序开发和维护代码的最佳实践

Question

我正在开发我的第一个非常复杂的基于JQuery的应用程序。

一个网页可以包含数百个JQuery相关代码，例如与JQueryUI对话框相关的代码。

现在，我想在分离的文件中组织代码。

例如，我在分隔的文件中移动所有初始化对话框代码$("#dialog-xxx").dialog({...})，由于重用，我将它们封装在单个函数调用中，如下

dialogs.js

function initDialog_1() {
  $("#dialog-1").dialog({});
}

function initDialog_2() {
  $("#dialog-2").dialog({});
}

这简化了函数代码，并使调用方页面变得清晰。

$(function() {
  // do some init stuff
  initDialog_1();
  initTooltip_2();
});

这是正确的模式吗？

你在使用更有效的技术吗？

我知道，在许多js文件中分割代码会带来很糟糕的带宽使用。

是否存在一些好的实践或工具来“连接”生产环境中的文件？

我想象一些工具比简单地最小化和/或压缩JS代码做更多的工作。

Answer 1

我可以补充一些建议：

将所有变量保存在一个全局可用的多结构对象中，比如: MyVars ={ dialogs：{}，工具提示：{} }，然后在所有脚本中使用它。

使用调用或应用方法动态调用自定义函数名，如果您希望将上面的对象保持为轻量级。

为了整理事情，你可以读到：http://betterexplained.com/articles/speed-up-your-javascript-load-time

Answer 2

我听起来也挺好的。只有两个音符：

1. 使用描述性方法名。“initializes.
2. While”没有告诉您任何关于它的对话框的信息，它将JS代码分割成几个文件，简化了开发，这会损害您的界面的性能。您可以在应用程序的构建/部署/运行时将所有文件合并为一个文件。但是，如何在很大程度上做到这一点取决于您的环境。

Answer 3

我现在正在JS中做一些相当复杂的事情，并且一直在想同样的事情。我查看了各种“模块”实现，但尽管它们看起来“很酷”，但它们似乎并没有提供太多的价值。

此时，我的计划是继续引用来自我的.html页面的大量脚本文件(计划只有一个.html页面，或者很少)。

然后，当我构建发布版本时，我将编写一个非常简单的工具来适应我的构建过程，它将发现我从.html页面引用的所有脚本并将它们连接到一个文件中，并将多个<script>元素替换为一个单独的元素，这样在" release“版本中只需要一个请求。

这将允许对所有脚本文本进行压缩，而不是在每个单独的文件上进行压缩(比如执行tar，然后执行gzip)，并且应该对脚本下载时间产生影响(尽管我应该强调，我还没有真正实现它)。