掌握Meteor中的外部脚本加载顺序(谷歌地图)

Geo*_*nos 5 javascript google-maps meteor

我试图将一个谷歌地图(外部加载的脚本)添加到流星应用程序失败,我发现有两种问题:

  1. 如果我做了简单的事情并将主API脚本添加到我的<head></head>,那么它最后呈现.
  2. 当发生这种情况时,我不得不在我的模板中再次插入依赖于API的任何脚本<head>- 在主API脚本之后.(否则脚本抱怨他们没有看到API blabla ..)
  3. 然后实际函数调用的时间到了 - 现在把它放在<head>其余部分之后将不起作用.您需要使用Template.MyTemplate.rendered.

基本上我的问题是:

  • 处理这类事情的最简洁方法是什么?
  • 我可以使用其他一些变量/方法来确保我的HTML主要API文件在我的HTML中首先被调用吗?

zor*_*lak 7

我刚刚发布了一个关于氛围(https://atmosphere.meteor.com)的软件包,可能会有所帮助.它被称为session-extras,它定义了一些我用来帮助集成外部脚本的函数.代码在这里:https://github.com/belisarius222/meteor-session-extras

基本思想是异步加载脚本,然后在脚本加载完成后的回调中设置Session变量.我使用session-extras包中的函数来尝试使这个过程更平滑.我有一些函数有3或4个不同的依赖项(脚本和订阅),所以它开始变得毛茸茸......

我想我应该补充一点,然后你可以根据是否存在所有依赖项来有条件地渲染模板.因此,如果你有一个facebook按钮,例如,有帮助器检查Session变量,你可以给它一个"禁用"的css类并显示"加载facebook ...",直到所有必要的脚本都加载完毕.

编辑03/14/2013

在许多情况下,还有一种完全不同的方法:创建自己的包.目前Meteorite (指令)可以实现这一功能,Meteor本身很快就可以使用这些功能.这种方法的一些例子是:

如果将js文件放在包中,它会在应用程序代码之前加载,这通常是包含库的好方法.制作包的另一个好处是包可以相互声明依赖关系,所以如果有问题的脚本是例如jQuery插件,你可以在包的package.js文件中指定包依赖于jQuery,这将确保正确的加载顺序.

有时它会变得更有趣(在中文诅咒意义上),因为许多外部服务,包括mixpanel和filepicker.io,有两部分加载过程:1)一个JS片段被包含在身体的末尾, 2)由该片段异步加载从CDN加载的更大的脚本.js代码片段通常(但不总是!)在更大的脚本加载之前使一些方法可用,这样您就可以调用其函数而无需设置更多逻辑来确定其负载状态.Mixpanel这样做,虽然重要的是要记住,来自外部服务的一些JS片段希望你在代码片段的末尾设置API密钥,保证在更大的脚本加载之前; 在某些情况下,如果在设置API密钥之前加载脚本,则库将无法正常运行.有关尝试解决方法的示例,请参阅meteor-mixpanel包.

可以从CDN自己下载更大的js文件,并将其粘贴在您的应用程序中; 但是,有充分的理由不这样做:1)托管代码可能会更改,除非您虔诚地检查它,否则您的代码可能会过时并开始使用旧版本的API 2)这些库通常是经过优化,可以快速加载代码段,不会显着增加页面加载时间.如果您在应用程序中包含较大的JS文件,那么您的服务器必须提供服务,而不是CDN,并且它将在初始页面加载时提供服务.