Meteor 有条件地加载外部脚本答案

【问题标题】：Meteor loading external scripts conditionallyMeteor 有条件地加载外部脚本
【发布时间】：2013-06-03 23:50:02
【问题描述】：

我正在尝试制作一个多页 Meteor 应用程序（我正在使用 https://github.com/tmeasday/meteor-router）。如何根据页面内容有条件地加载 javascript？

这就是我正在做的：主页main.html 在<body> 标签中有一个{{renderPage}}，这是 Meteor-router 使用的。假设有一个名为home 的页面/模板，它是其中一个页面，它有一些脚本。如果不是 Meteor，其中一些脚本位于 <header> 中，例如 jquery，而其他脚本则位于 <body> 的末尾。我在 home 模板的末尾放了一个名为 homeCustomScripts 的部分，它有一个相应的 Template.homeCustomScripts 函数，就像这样（我省略了很多脚本，这只是一个例子）：

Template.homeCustomScripts.created = function() {
  scriptInsert = function () {
    $('head').append('<script type="text/javascript" src="js-plugin/respond/respond.min.js">`
    <script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>`
    <script type="text/javascript" src="js/custom.js"></script>');

  }
}

在main.html 内我有另一个名为customScript 的部分，我在Template.customScript.rendered 内调用scriptInsert()。

它应该可以工作，除了 Chrome 控制台上有一些非常混乱的 Javascript 错误，我不知道这意味着什么：

我猜是因为 Meteor 还在 <head> 中加载了 JQuery，而且我听说 Meteor 最后加载了那里的所有内容，所以可能在该 JQuery 实例之前加载了 JQuery 插件缓动。但我不知道。

在 Meteor 的多页面应用程序中为不同页面加载不同脚本的最佳方法是什么？

【问题讨论】：

检查这个：empire5.com/development/…

标签： meteor

【解决方案1】：

您的代码多次加载脚本 - 每次呈现模板时（即使对于简单页面，这几乎总是会发生多次） - 您一遍又一遍地注入相同的代码，这可能会导致错误

我不确定我是否会参与这个模式 - 基于即使使用流星路由器的多页应用程序（页面永远不会重新加载），流星如何工作，您应该只将您的 javascript 文件包含在您的应用程序目录中并拥有它们已经通过 1 个组合和缩小的 javascript 文件加载 - 您可能需要将文件放在 client/compatibility 目录中以规避任何范围问题，请参阅 https://github.com/meteor/meteor/blob/master/History.md

如果您的文件确实已经在您的应用程序目录中，则它们已经加载并且根本不需要 - 默认情况下，meteor 将加载并为浏览器提供除server 或tests 以外的任何目录中的所有内容

如果您正在加载外部脚本，这可能更有意义，在这种情况下，您应该使用路由器过滤器来完成此操作

Meteor.Router.filters({
  'isCustomScriptLoaded': function(page) {
    if(!Session.equals('isCustomScriptLoaded', true)){
        Session.set('isCustomScriptLoaded', true);
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = "<EXTERNAL SCRIPT URL>";

        var firstScript = document.getElementsByTagName('script')[0];
        firstScript.parentNode.insertBefore(script, firstScript);
    }
  }
});

Meteor.Router.filter('isCustomScriptLoaded',{only: ['pageThatNeedsCustomScript'] });

这将根据需要加载脚本并保持加载 - 您只想加载一次，而不是每次加载页面时，甚至更糟地渲染

以这种方式加载脚本可能仍然存在问题 - 如果页面在加载脚本之前最后一次呈现，它可能无法正常工作 - 最好的办法是立即包含所有需要的文件

【讨论】：

为什么会加载多次？在回调中添加警报表明它们被调用了一次。
外部是指我从购买的主题中获得的脚本。我将所有脚本和 CSS 放在 public 中，但 Javascript 的加载顺序与原始脚本很重要。（我之前的问题：stackoverflow.com/questions/16851395/…）。假设不同页面中的某些 DOM 元素需要不同的第三方脚本。尽管页面永远不会重新加载，但通过单击此“新页面”会将新元素带入页面，并且该页面应包含一些脚本。
而且我不希望一次加载所有内容，因为我担心它不会很漂亮。也许 Meteor 目前不适合这种用途？这是我尝试做的第一个真正的 Web 项目，我选择 Meteor 进行尝试。
rendered() 将在几乎任何模板上被多次调用 - 您的代码肯定会尝试多次加载
这是一个折衷方案 - 在应用程序内导航时，前端加载时间稍慢，使您的加载时间为零 - 这是首选的流星方式 - 大多数应用程序/框架不会导致页面重新加载（也称为单页) 预先加载所有内容 - 我已经以这种方式构建了几个应用程序，没有任何抱怨