1

当我使用谷歌地图时，我对它的实现很感兴趣，所以我使用萤火虫来检查。

然后我发现它的 javascript 加载策略相当有趣。以这个页面为例：

叠加示例

然后当我第一次打开这个页面时，会加载以下js：

https://maps.googleapis.com/maps/api/js?sensor=false
https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/13b/main.js
https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/13b/%7Bcommon,map,util,poly%7D.js
https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/13b/%7Bonion,geometry%7D.js

但是如果我刷新页面（使用 ctrl+f5），会加载以下 js：

https://maps.googleapis.com/maps/api/js?sensor=false
https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/13b/main.js

但是页面仍然有效，覆盖在地图中绘制。但是 poly.js 等在哪里？

另外，谁能告诉我如何按组件加载js？例如common util poly示例中的。

当我编写不同的组件时我应该知道什么？

4

2 回答 2

2

1.当 poly.js 加载时，它会传递一个字符串到google.maps.__gjsload___.

这是一段摘录：

google.maps.__gjsload__('common', '\'use strict\';var Ai=isNa...

文件的其余部分只是该字符串的内容。

我的预感是这个函数可能会存储这个字符串，localStorage或者sessionStorage只需要检索一次。

2.另外，如果您想了解如何根据需要加载 js 文件，请查看AMD和/或 CommonJS: Modules。

AMD 的一个很好的实现（我的偏好）是RequireJS。

更新

我做了一些探索，并且localStorage似乎sessionStorage没有在此页面上使用。我也无法复制你的结果。在 Firebug 中，poly.js 总是为我加载。某处可能发生了一些魔法，但我没有看到。

但是，完全可以将字符串存储在localStorage其中并sessionStorage进行检索，而无需进行额外的 js 调用。

于 2012-09-08T06:35:42.587 回答
0

另外，谁能告诉我如何按组件加载js？

这涉及到异步 javascript 文件加载的主题。如果您曾经使用过一种可以在脚本中的任何位置“包含”文件的语言，那么您就会明白 javascript 没有此功能。正因为如此，通过脚本标签注入，就有了“aysnc javascript 添加”的整个范例。

脚本标签注入：您动态地制作一个脚本标签，并将其源设置为您需要的文件，并将该标签插入到 DOM 中，瞧，一个新文件已被加载并执行。对于 javascript 繁重的应用程序，这很常见，尤其是在加载第三方应用程序时。谷歌一直在做这件事，看看谷歌分析的包含脚本就是一个很好的例子。

现在，由于这是一种敏感而微妙的编码类型，一些“javascript 组件/模块/资产加载”框架对其进行了改进并使其非常稳定。common.js、require.js 等在这方面都做得很好。

当我编写不同的组件时我应该知道什么？

对于您使用谷歌地图所做的事情，您并不需要了解太多。但是如果你进入 javascript 模块模式开发，你需要知道这一点：确保你保护你的全局命名空间不被你自己的变量弄乱，所以尽可能将你所有的工作封装在闭包中，并且（推荐但不是必需的）开始它们都带有a ;，因此如果它们被乱序加载，它们就不会相互破坏。

于 2012-09-08T06:50:16.853 回答