首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >google地图的javascript加载策略是什么

google地图的javascript加载策略是什么
EN

Stack Overflow用户
提问于 2012-09-08 14:31:40
回答 2查看 1.1K关注 0票数 1

当我使用google地图时,我对它的实现很感兴趣,所以我使用firebug来检查。

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

The overlay example

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

代码语言:javascript
运行
复制
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:

代码语言:javascript
运行
复制
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和etc在哪里?

另外,谁能告诉我如何通过组件加载js?例如,示例中的common util poly

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-09-08 14:35:43

1.当poly.js加载时,它将一个字符串传递给google.maps.__gjsload___

以下是摘录:

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

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

我的直觉是,此函数可能将此字符串存储在localStoragesessionStorage中,因此只需检索一次。

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

AMD的一个很好的实现(我更喜欢)是RequireJS

更新

我做了一些调查,在这个页面上似乎没有使用localStoragesessionStorage。我也不能复制你的结果。在Firebug中,poly.js总是为我加载。也许在某个地方发生了一些神奇的事情,但我看不出来。

但是,完全可以将字符串存储在localStoragesessionStorage中以供检索,而不必进行额外的js调用。

票数 2
EN

Stack Overflow用户

发布于 2012-09-08 14:50:17

还有,谁能告诉我如何通过组件加载js?

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

脚本标记注入:动态创建一个脚本标记,并将其源设置为所需的文件,然后将该标记插入到DOM中,瞧,一个新文件已经加载并执行了。对于大量使用javascript的应用程序,这是很常见的,尤其是在加载第三方应用程序时。谷歌一直都在做这件事,看看谷歌分析的包含脚本就是一个很好的例子。

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

当我写不同的组件时,我应该知道什么?

对于你正在用谷歌地图做的事情,你真的不需要知道太多。但是如果你开始了javascript模块模式的开发,你需要知道这一点:确保你保护你的全局命名空间不被你自己的变量弄乱,所以在可能的情况下把你的所有工作都封装在闭包中,并且(推荐但不是必需的)用一个;开始它们,这样如果它们被无序加载,它们就不会相互破坏。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12328616

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档