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

Question

我正在研究我的第一个非常复杂的基于JQuery的应用程序.

单个Web页面可以包含数百个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: {}, tooltips: {} }，然后在所有脚本中使用它

如果您希望保持上述对象的轻量级，请使用 call 或 apply 方法动态调用自定义函数名称