jquery - 优化 jQueryMobile : problems with selectively including external JS files only when they are needed 代码

Question

我正在将 jQueryMobile 用于移动应用程序。显然，我希望 UI 加载速度非常快，但应用程序有多个工具，因此我只想在导航到“页面”时加载相关的外部 JS 库。对于主应用程序(90％的页面)，我只需要 jQueryMobile 核心文件(即来自 Google AJAX 库和 jQueryMobile JS 和 CSS 的最新 jquery 核心)。然而，对于剩下的 10%，我需要启用地理定位的 Google Maps v3(因此需要 Google Gears 外部库)和 MarkerClusterer 库(我有超过 400 个标记，只有在必要时才需要绘制它们)。

据我了解 jQueryMobile 的工作原理(全部通过内部 AJAX 请求)，您必须在应用程序初始化时加载整个应用程序的所有库。当用户第一次请求移动站点(所有核心文件，加上所有 map /地理位置/标记集群文件)时，这使得我的应用程序变得非常重。我想避免这种情况发生，因为它会吓跑许多潜在用户(特别是当我的一部分用户想要地理位置优势时)。

我尝试在相关页面的末尾(页脚 div 之前)仅加载 Google map 组件，并尝试将它们放入相关页面的 标记中。然而，这两个都无法初始化(使用附加到函数的 console.log() 输出进行检查)。

是的，在你问之前，我正在使用“pagecreate”live() 函数，并且正在处理正确的 div(如果我将与 Google map 相关的所有内容放入根页面头标记中，一切都会正常工作)

我觉得这一定是一个非常常见的问题:使用 jQueryMobile 选择性加载页面组件。我无法通过 Google 在线找到任何内容 - 大多数 jQueryMobile 教程都是常见的花园“Hello World!”种类繁多，所以如果你有什么可以提供的，我会洗耳恭听!也欢迎选择性加载教程的链接!

提前致谢!

Answer 1

all those pages initialize all the required libraries on every page.

是的，这是执行此操作的默认方式，因此无论用户首先调用哪个页面/子页面 - 一切正常。所有库都工作正常并且只加载一次。但你可能知道。

假设您想稍后加载一些库，这样即使用户不需要它们，它们也不会减慢整个应用程序的速度，您应该强制它们仅加载正确的页面。

这可以通过一些不同的方式来实现:

1. 最简单的:将其放在头部，就好像它是第一个打开的页面一样，并将 rel="external" 放在指向该子页面的所有链接中。显然，它会重新加载页面，并使您失去 JQM 缓存页面的一些优势，但及时加载库可能是值得的
2. 建议:JQM 应该在将 JS 放入 page div 内时加载并运行 JS。它无法为您工作的原因可能是该库依赖于 domready 事件，您可能必须为该库触发它。但如果你只是触发事件，它会让所有东西(包括 JQM)处理它。您必须使其仅触发库。为此，您需要:
   • 编辑代码并找到事件处理函数
   • 更改代码，以便该函数具有全局可访问的名称
   • 在 pagesomething 处理程序中调用该函数

另外:如果您遇到页面问题，请尝试绑定(bind)到 pageshow 而不是 pagecreate 来查看是否有某些内容需要首先显示元素。